함수 return값의 타입정하기
function 함수(x: unknown[]) {
return x[0];
}
let a = 함수([4,2])
console.log(a+1) //에러 발생
unknown타입으로 설정했기 때문에 계산식에서 에러가 발생하는 모습
1. narrowing 적절히 해서 에러 없애기
2. 가변적 타입 지정하기
=> Generic 문법
Generic 적용하기
function 함수<T>(x: T[]):T {
return x[0]
}
let a = 함수<number>([4,2])
let b = 함수<string>(['4','2'])
1. 함수명 오른쪽의 < > 안에 사용자정의 제네릭명을 임의로 입력.
2. 파라미터에 제네릭명 입력
=> array의 경우 [ ] 포함
3. return 타입도 제네릭으로 지정가능
4. 함수를 사용할 때에도 함수명 오른쪽에 < >를 사용하고 안에 원하는 타입을 정의
=> 사용하지 않아도 기본타입을 자동으로 유추해서 에러가 발생하지는 않음.
function 함수<T, T2>(x: T[]):T {
return x[0]
}
1. 보통 제네릭 작명은 <T>를 자주 사용하는 편.
2. 2개 이상의 제네릭 파라미터를 작성할 수도 있음.
타입 제한하기
function 함수<T>(x: T) {
return x - 1 // 에러 발생
}
let a = 함수<number>(100)
number이 아닌 다른 것이 들어오는 것을 방지하기 위해 에러가 발생함.
1. Narrowing으로 해결 가능
2. extends 사용
function 함수<T extends number> (x: T){
return x -1 // 가능
}
let a = 함수<number>(100)
특성을 가진 타입을 extends 하면 해결가능.
=> 여기서 extends는 상속의 개념이 아니라, T가 number의 속성을 가지고 있나? 체크하는 문법.
커스텀 타입 설정
interface LengthCheck{
length: number
}
function 함수<T extends LengthCheck> (x: T){
return x.length
}
let a = 함수<string>('hello')
1. 타입변수 만들기
2. extends에 해당 타입 설정하기
계속 자바 얘기를 하는 것같지만,,
자바 배울 때 특히 약했던 부분이 쓰레드랑 제네릭 부분이었는데,
이렇게 다시 공부해 보니 제네릭 너 별거 아니었구나? 하하하하 ,, 나중에 또 까먹을 듯
'TypeScript' 카테고리의 다른 글
Redux toolkit (0) | 2023.07.04 |
---|---|
React + TypeScript 타입지정 (0) | 2023.07.04 |
import export, namespace 문법 (0) | 2023.07.04 |
protected, static 키워드 (0) | 2023.07.03 |
public, private 키워드 (0) | 2023.07.03 |