[英]Typescript:: Assigning data to a variable of type 'non empty array'
I am a beginner and learning TypeScript for a week now.我是初学者,现在学习 TypeScript 一周了。 I have below code in my React Component
我的 React 组件中有以下代码
interface Restaurant {
id: number;
name: string;
rating?: number;
}
type NonEmptyArray<T> = [T, ...T[]];
type RestaurantProps = {
data: NonEmptyArray<Restaurant>;
};
export const Restaurants: React.FC<RestaurantProps> = ({ data }) => {
if (!data.length) {
return null;
}
// by default, select the first element in the array
// since it depends on first element, making sure that NonEmptyArray is passed
const [selectedRestaurant, setSelectedRestaurant] = React.useState(data[0]);
.....
}
Above code works fine and no typescript errors are shown.上面的代码工作正常,没有显示打字稿错误。
Now, in my Jest Test, I am assigning my test data to a variable.现在,在我的 Jest 测试中,我将测试数据分配给一个变量。 I get below error
我得到以下错误
Type 'Restaurant[]' is not assignable to type 'NonEmptyArray'.类型“Restaurant[]”不可分配给类型“NonEmptyArray”。 Source provides no match for required element at position 0 in target.
源没有为目标中位置 0 处的所需元素提供匹配项。 ts(2322)
ts(2322)
const data: NonEmptyArray<Restaurant> = [ {id: 1, name: 'abc', rating: 3}, {id: 2, name: 'xyz', rating: 4}, {id: 3, name: 'pqr', rating: 3} ];
it('renders properly', () => {
render(<Restaurants data={data} />);
....
});
Can someone help me understand if my approach is right?有人可以帮助我了解我的方法是否正确吗? If so, how can fix this typescript error?
如果是这样,如何解决这个打字稿错误?
I think it might be worth simplifying your types a little bit:我认为稍微简化你的类型可能是值得的:
// Restaurants.tsx
import { useState } from 'react';
import type { FC } from 'react';
// export your type so you can use it in your test file
export interface Restaurant {
id: number;
name: string;
rating?: number;
}
// It's common practice to use interfaces for object types
interface RestaurantProps {
// By not making data optional you are already requiring this prop in your component.
data: Restaurant[];
};
export const Restaurants: FC<RestaurantProps> = ({ data }) => {
// Having this check will ensure your component doesn't get rendered if your data array as no length.
if (!data.length) {
return null;
}
// Here you can return whatever you'd like.
return <>data[0].name</>
}
In your Restaurants.jest.tsx file:在您的 Restaurants.jest.tsx 文件中:
// Restaurant.jest.tsx
import { Restaurants } from './Restaurant.tsx';
import type { Restaurant } from './Restaurant.tsx';
const data: Restaurant[] = [ {id: 1, name: 'abc', rating: 3}, {id: 2, name: 'xyz', rating: 4}, {id: 3, name: 'pqr', rating: 3} ];
it('renders Restaurant', () => {
render(<Restaurants data={data} />);
...
});
I hope this helps a little!希望这会有帮助! Let me know if you have additional questions, I'd be glad to help out.
如果您还有其他问题,请告诉我,我很乐意提供帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.