[타입스크립트] 한정된 다형성, 타입스크립트 프로그래밍 이진트리 예제 분석

본 포스팅 예제 미리보기

 

1. 타입스크립트 프로그래밍 예제 내가 풀어본 것(한 포인트 미스, 아직도 생성자에 화살표 함수 받아들이는게 어색...)

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] }; //통과

let a1 = mapNode(a, (_) => _.toUpperCase()); //TreeNode
let b1 = mapNode(b, (_) => _.toUpperCase()); //LeafNode
let c1 = mapNode(c, (_) => _.toUpperCase()); //InnerNode

function mapNode<T extends TreeNode>(node: T, f: (value: string) => string): T {
  return {
    ...node,
    value: node.value.toUpperCase(),
  };
}

console.log(a1.value); //A
console.log(b1.value); //B
console.log(c1.value); //C

2. 타입스크립트 프로그래밍 책 모범답안

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] }; //통과

let a1 = mapNode(a, (_) => _.toUpperCase()); //TreeNode
let b1 = mapNode(b, (_) => _.toUpperCase()); //LeafNode
let c1 = mapNode(c, (_) => _.toUpperCase()); //InnerNode

function mapNode<T extends TreeNode>(node: T, f: (value: string) => string): T {
  return {
    ...node,
    value: f(node.value),
  };
}

console.log(a1.value); //A
console.log(b1.value); //B
console.log(c1.value); //C

 

 

제네릭 타입 T를 사용 중일때에 정확하게 T와 같은 타입임을 표현하기보다는
”이 타입은 U 타입이고, 적어도 T 타입을 포함하고 있어” 같은 상황이 필요할 때가 있다.

이런 상황을 ‘U가 T의 상한 한계(upper bound)’ 라고 한다.

 

이런 기능이 왜 필요한지 이진 트리 예제를 살펴본다.

 

세 종류 노드를 갖는 이진트리를 구현한다고 가정한다.

1. 일반 TreeNode

2. 자식을 갖지 않는 TreeNode인 LeafNode

3. 자식을 갖는 TreeNode인 InnerNode

배경 지식: - 이진트리는 자료구조다. - 이진트리는 노드를 갖는다. - 노드는 값을 가지며 최대 두 개의 자식 노드를 가리킬 수 있다 - 노드는 잎노드(자식없음) 또는 내부 노드(적어도 한 개의 자식을 가짐) 둘 중 하나의 타입을 갖는다.

먼저 각 노드의 타입을 선언한다.

 

//value라는 한 개의 프로퍼티만 갖는 객체
type TreeNode = {
  value: string;
};

//TreeNode가 갖는 모든 프로퍼티 뿐 아니라 값이 항상 true인 isLeaf 프로퍼티를 추가로 포함
type LeafNode = TreeNode & {
  isLeaf: true;
};

//TreeNode가 갖는 모든 프로퍼티 뿐 아니라 한 개나 두 개의 자식을 가리킬 수 있는 children
//프로퍼티를 추가로 포함
type InnerNode = TreeNode & {
  children: [TreeNode] | [TreeNode, TreeNode];
};

다음으로 TreeNode를 인수로 받아 value에 매핑 함수를 적용해 새로운 Tree Node를 반환하는 mapNode 함수를 구현해본다.

다음처럼 사용할 수 있는 Node 함수가 필요하다고 해보자.

let a: TreeNode = { value: "a" };
let b: LeafNode = { value: "b", isLeaf: true };
let c: InnerNode = { value: "c", children: [b] };

let a1 = mapNode(a, (_) => _.toUpperCase()); //TreeNode
let b1 = mapNode(b, (_) => _.toUpperCase()); //LeafNode
let c1 = mapNode(c, (_) => _.toUpperCase()); //InnerNode

TreeNode의 서브타입을 인수로 받아 같은 서브타입을 mapNode 함수를 구현

(LeafNode를 전달하면 LeafNode 반환, InnerNode를 전달하면 InnerNode가 반환되며, TreeNode를 전달하면 TreeNode가 반환

function mapNode<T extends TreeNode>(node: T, f: (value: string) => string): T {
  return {
    ...node,
    value: f(node.value),
  };
}

 

<지금까지 전체 코드>

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] };

let a1 = mapNode(a, (_) => _.toUpperCase()); //TreeNode
let b1 = mapNode(b, (_) => _.toUpperCase()); //LeafNode
let c1 = mapNode(c, (_) => _.toUpperCase()); //InnerNode

function mapNode<T extends TreeNode>(node: T, f: (value: string) => string): T {
  return {
    ...node,
    value: f(node.value),
  };
}

1. mapNode는 한 개의 제네릭 타입 매개변수 T를 정의하는 함수. T의 상한 경계는 TreeNode.

(즉, T는 TreeNode 이거나 아니면 TreeNode의 서브타입)

function mapNode<T extends TreeNode>

T 자리에 (빈객체{}, null, TreeNode 배열 등의) TreeNode가 아닌 다른 것을 인수로 전달하면 바로 꼬불거리는 빨간 밑줄.

 

 

왜 T를 이런 방식으로 선언하냐면,

 

extends TreeNode를 생략하고 T타입을 그저 T라고만 쓰면 (특정 타입과 연결되지 않은) mapNode가 컴파일 타임 에러를 던질 것이다. T 타입에 상한 경계가 없으므로 node.value를 읽는 행위가 안전하지 않기 때문(예를 들어 숫자가 건네질 수도 있다.)

 

 

T를 아예 사용하지 않고 mapNode를 (node: TreeNode, f:(value:string)=>string) =>TreeNode처럼 선언하면 매핑되면서 타입정보가 날아가서 a1, b1, c1이 모두 TreeNode가 된다.

 

 

T extends TreeNode라고 표현함으로써 매핑한 이후에도 입력 노드가 특정 타입(TreeNode, LeafNode, InnerNode)이라는 정보를 보존할 수 있다.

<모범>

  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] }; //통과

let a1 = mapNode(a, (_) => _.toUpperCase()); //TreeNode
let b1 = mapNode(b, (_) => _.toUpperCase()); //LeafNode
let c1 = mapNode(c, (_) => _.toUpperCase()); //InnerNode

function mapNode<T extends TreeNode>(node: T, f: (value: string) => string): T {
  return {
    ...node,
    value: f(node.value),
  };
}

console.log(a1); //{ value: 'A' }
console.log(b1); //{ value: 'B', isLeaf: true }
console.log(c1); //{ value: 'C', children: [ { value: 'b', isLeaf: true } ] }

 

 

 

여러 제한을 적용한 한정된 다형성

 

위의 예에서는 T는 적어도 TreeNode여야 한다는 타입 제한을 하나 추가했다.

여러 개를 추가하려면 단순히 인터섹션(&)으로 제한들을 이어붙이면 된다.

type HasSides = { numberOfSides: number };
type SidesHaveLength = { sideLength: number };
function logPerimeter<T extends HasSides & SidesHaveLength>(s: T): T {
  console.log(s.numberOfSides * s.sideLength);
  return s;
}
type Square = HasSides & SidesHaveLength;
let square: Square = { numberOfSides: 4, sideLength: 3 };
logPerimeter(square);

logPerimeter은 Shape 타입의 인자 s 한 개를 인수로 받는 함수다.

Shape는 HasSides 타입과 SideHaveLength 타입을 상속받는 제네릭 타입이다. 즉, Shape는 적어도 길이(length)를 갖는 변(side)들로 이루어진다.

logPerimeter는 인수와 타입이 같은 값을 반환한다.

 

 

 

제네릭 | 타입스크립트 핸드북

제네릭 제약 조건

제네릭 함수에 어느 정도 타입 힌트를 줄 수 있는 방법

function logText<T>(text: T): T {
  console.log(text.length); // Error: T doesn't have .length
  return text;
}

인자의 타입에 선언한 T는 아직 어떤 타입인지 구체적으로 정의하지 않았기 때문에 length 코드에서 오류

해당 타입을 정의하지 않고도 length 속성 정도는 허용하려면 아래와 같이 작성

interface LengthWise {
  length: number;
}

function logText<T extends LengthWise>(text: T): T {
  console.log(text.length);
  return text;
}

위와 같이 작성하게 되면 타입에 대한 강제는 아니지만 length에 대해 동작하는 인자만 넘겨받을 수 있게 된다.

logText(10); // Error, 숫자 타입에는 `length`가 존재하지 않으므로 오류 발생
logText({ length: 0, value: 'hi' }); // `text.length` 코드는 객체의 속성 접근과 같이 동작하므로 오류 없음

객체의 속성을 제약하는 방법

두 객체를 비교할 때도 제네릭 제약 조건을 사용할 수 있다.

function getProperty<T, O extends keyof T>(obj: T, key: O) {
  return obj[key];  
}
let obj = { a: 1, b: 2, c: 3 };

getProperty(obj, "a"); // okay
getProperty(obj, "z"); // error: "z"는 "a", "b", "c" 속성에 해당하지 않습니다.

제네릭을 선언할 때 <O extends keyof T> 부분에서 첫 번째 인자로 받는 객체에 없는 속성들은 접근할 수 없게끔 제한

 

https://kyounghwan01.github.io/blog/TS/fundamentals/type-aliases/#%E1%84%90%E1%85%B3%E1%86%A8%E1%84%8C%E1%85%B5%E1%86%BC

typescript - 타입 별칭 (type-aliases)

타입 별칭

타입 별칭은 인터페이스와 거의 비슷한 기능

객체 또는 함수에 대한 타입 정의를 하는 일.

type Developer = {
  name: string;
  skill: string;
};

 

타입 별칭에도 제네릭 사용 가능

type typeGeneric<T> = {
  name: T;
};

 

특징

타입 별칭은 새로운 타입 값을 하나 생성하는 것이 아니라 정의한 타입에 대해 개발자가 쉽게 관찰하도록 이름을 부여
그래서 interface를 정의하고 커서를 hover하면 interface xx 이렇게 나오지만 type은 type xx = {xx: xx}

인터섹션에 의한 확장

타입 별칭은 extends라는 명령어가 없고 인터섹션(&)를 이용해 확장한다.

type test1 = { name: string };

type test2 = test1 & { age: number };

const test3: test2 = { name: "d", age: 33 };

 

위 방법은 엄밀히 따지면 인터섹션을 이용하여 test1 타입과 추가된 타입을 합하여 새로운 타입을 정의한 것이지 test1 타입을 extends로 상속 받아 확장하는 개념이 아니다. 그러므로 type은 extend가 안되기 때문에 왠만하면 interface를 쓰도록 하자.