Generic Type의 사용방법에 대한 예시
아래 예시는 codesandbox에서 테스트할 수 있습니다.
// basic generic type
type MyProfile<T> = {
hobby: Array<T>;
};
Array<T>
는 T[]
와 동일하다.// multiple generic type
type XYCoordinateAxisName<X, Y> = {
xAxisName: X;
yAxisName: Y;
};
// reuse type
type DefaultScheme = {
id: string;
modifiedDate: string;
};
type AsyncValue<T> = {
data: T & DefaultScheme;
loading?: boolean;
error?: string;
};
type User = {
name: string;
age: number | null;
};
type Item = {
name: string;
};
type AsyncUser = AsyncValue<User>;
type AsyncItem = AsyncValue<Item>;
const fetchedUser: AsyncUser = {
data: {
id: "1",
modifiedDate: "20211010",
name: "admin",
age: null
}
};
const fetchedItem: AsyncItem = {
data: {
id: "1",
modifiedDate: "20211011",
name: "iphone"
}
};
&
로 intersection type을 만들었다.)// basic function usage (inferred return value)
const studentNameList = ["bob", "json", "stefan"];
const numberList = [1, null, 3, 4];
const getCount = <T>(list: T[]) => {
return log(list.length);
};
getCount(studentNameList);
getCount<number | null>(numberList); // define explicitly generic type
<>
로 explict하게 type을 정의할 수 있다. React에서는 useState에서 explict하게 정의할 수 있다. (ex useState<number | null>(0)
)// explicit return value
const getList = <T>(list: T[]): T[] => {
return list;
};
// extends generic type
type StudentDetail = {
firstName: string;
lastName: string;
};
const getStudentDetail = <T extends StudentDetail>(detail: T) => {
log(detail);
};
getStudentDetail({
firstName: "stephen",
lastName: "cho",
age: 30
});
blog : https://javascript.plainenglish.io/typescript-generics-whats-with-the-angle-brackets-4e242c567269
video : https://youtu.be/nViEqpgwxHE