반응형
여러 제한을 적용한 한정된 다형성
type TreeNode = {
value: string
}
type LeafNode = TreeNode & {
isLeaf: true
}
type InnerNode = TreeNode & {
children: [TreeNode] | [TreeNode, TreeNode]
}
let a: TreeNode = {value: 'a'}
let b: LeafNode = {value: 'b', isLeaf: true}
let c: InnerNode = {value: 'c', children: [b]}
function mapNode<T extends TreeNode>( // ①
node: T, // ②
f: (value: string) => string
): T{ // ③
return {
...node,
value: f(node.value)
}
}
let a1 = mapNode(a, _ => _.toUpperCase()) // TreeNode
let b1 = mapNode(b, _ => _.toUpperCase()) // LeafNode
let c1 = mapNode(c, _ => _.toUpperCase()) // InnerNode
위의 예시에선 T는 적어도 TreeNode여야 한다는 타입 제한을 하나 추가했습니다.
여러 개를 추가하려면 단순히 인터섹션(&)으로 제한들을 이어 붙이면 됩니다.
type HasSides = {numberOfSides: number}
type SidesHaveLength = {sideLength: number}
function logPerimeter< // ①
Shape extends HasSides & SidesHaveLength // ②
>(s: Shape) : Shape { // ③
console.log(s.numberOfSides * s.sideLength)
return s
}
type Square = HasSides & SidesHaveLength
let square: Square = { numberOfSides: 4, sideLength: 4}
logPerimeter(square) // 정사각형, "16" 기록
① logPerimeter는 Shape 타입의 인자 s 한 개를 인수로 받는 함수입니다.
② Shape는 Hashsides 타입과 SidesHaveLength 타입을 상속받는 제네릭 타입입니다. 즉, Shape는 적어도 길이(length)를 갖는 변(side)들로 이루어집니다.
③ logPerimeter는 인수와 타입이 같은 값을 반환합니다.
반응형
'👶 TypeScript' 카테고리의 다른 글
제네릭 타입 기본값 (0) | 2023.01.14 |
---|---|
한정된 다형성으로 인수의 개수 정의하기 (0) | 2023.01.14 |
한정된 다형성 (0) | 2023.01.13 |
제네릭 타입 별칭 (0) | 2023.01.13 |
제네릭 타입 추론 (0) | 2023.01.13 |