TypeScript(Generic)

EunRyeong Park·2022년 9월 27일
0

typescript

목록 보기
6/11

Generic
데이터 타입을 일반화 하는것

  • 정적 타입 언어는 클래스나 함수를 정의할 때 type을 선언
  • Generic은 코드를 작성할때가 아닌 코드가 수행될 때 타입 명시
    -- 일반적으로 T, U V 식별자를 써서 아직 정해지지 않은 타입 표시

✔️ 재사용성이 높은 함수와 클래스를 생성할 수 있음
- 여러 타입에서 동작이 가능
- 코드의 가독성이 향상

✔️ 오류를 쉽게 포착 가능
- any타입을 사용할 시 컴파일할때 타입 체크x
->관련 메소드의 힌트를 사용할 수 x
-->Generic을 사용하여 타입을 체크해 컴파일러가 오류를 찾을 수 있음

function sort<T>(items: T[]): T[] {
return items.sort();
}
const nums: number[] = [1, 2, 3, 4];
const chars: string[] = ["a", "b", "c", "d"];
sort<number>(nums);
sort<string>(chars);

Union Type
'|'을 사용하여 두개 이상의 타입을 선언

  • Union vs Generic
    Union은 선언한 공통된 메소드만 사용 가능
    리턴값이 하나의 타입이 아닌 선언된 Union 타입으로 지정
// 1. Union type
const printMessage = (message: string | number) => {
	return message;
}
const message1 = printMessage(1234);
const message2 = printMessage("hello world !");
// string과 number type의 공통된 메소드만 사용 가능
// error: length does not exist on type string | number
message1.length;

// 2. generic
const printMessage2 = <T>(message: T) => {
	return message;
}
const message1 = printMessage2<string>("hello world !");
message1.length;

  • Constraints/keyof
    원하지 않는 속성에 접근하는것을 막기 위해 제약조건 사용
    ▸ Constraints :특정 타입들로만 동작하는 Generic 함수를 만들 때 사용
//Generic T에 제약조건을 설정
const printMessage = <T extends string | number>(message: T): T => {
	return message;
}
printMessage<string>("1");
printMessage<number>(1);
printMessage<boolean>(false) 
// Error: Type 'boolean' does not satisfy the constraint 'string | number'.

▸ keyof : 두 객체를 비교할 떄 사용

const getProperty = <T extends object, U extends keyof T>(obj: T, key: U) => {
	return obj[key]
}
getProperty({ a: 1, b: 2, c: 3 }, "a");
// error: Argument of type '"z"' is not assignable to parameter of type '"a" | "b" |“c"'
getProperty({ a: 1, b: 2, c: 3 }, "z");

0개의 댓글