Post

타입스크립트 - 타입알아내기

typeof 연산자 사용

1
2
3
4
5
6
7
8
9
function StrOrNum(param: string | number) {
  if (typeof param === "string") {
    param; // string
  } else if (typeof param === "number") {
    param; // number
  } else {
    param; // never
  }
}

undefined, null 거르기

1
2
3
4
5
6
7
8
9
function StrOrNullOrUndefined(param: string | number) {
  if (param === "undefined") {
    param; // undefined
  } else if (param === "null") {
    param; // null
  } else {
    param; // string
  }
}

boolean값 구분하기

1
2
3
4
5
6
7
function trueOfFalse(param: boolean) {
  if (param) {
    param; // true
  } else {
    param; // false
  }
}

배열 구분하기

Array.isArray()를 사용

1
2
3
4
5
6
7
function strOrArr(param: string | number[]) {
  if (Array.isArray(param)) {
    param; // number
  } else {
    param; // string
  }
}

클래스, 함수 구분

instanceof를 사용

1
2
3
4
5
6
7
8
9
class A {}
class B {}
function classAorB(param: A | B) {
  if (param instanceof A) {
    param; // A
  } else {
    param; // B
  }
}

객체 구분하기

in을 사용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
interface X {
  width: number;
  height: number;
}
interface Y {
  length: number;
  center: number;
}
function objXorY(param: X | Y) {
  if ("width" in param) {
    param; // X
  } else {
    param; // Y
  }
}

브랜드 속성을 사용하면 객체 구분이 쉬움

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
interface Money {
  _type: "money";
  amount: number;
  unit: string;
}
interface Liter {
  _type: "liter";
  amount: number;
  unit: string;
}
function moneyOrLiter(param: Money | Liter) {
  if (parma._type === "money") {
    param; // Money
  } else {
    param; // Liter
  }
}

타입 좁히는 함수를 만들어서 사용해도 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
interface Money {
  _type: "money";
  amount: number;
  unit: string;
}
interface Liter {
  _type: "liter";
  amount: number;
  unit: string;
}

function isMoney(param: Money | Liter) {
  if (parma._type === "money") {
    param; // Money
  } else {
    param; // Liter
  }
}

function moneyOrLiter(param: Money | Liter) {
  if (isMoney(param)) {
    param; // Money | Liter
  } else {
    param; // Money | Liter
  }
}
  • isMoney 반환값을 작성하지 않으면 param은 타입을 추론할 수 없기때문에 반환값을 직접 작성해주어야한다. (서술 함수)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function isMoney(param: Money | Liter): param is Money {
  if (parma._type === "money") {
    param; // Money
  } else {
    param; // Liter
  }
}

function moneyOrLiter(param: Money | Liter) {
  if (isMoney(param)) {
    param; // Money
  } else {
    param; // Liter
  }
}
This post is licensed under CC BY 4.0 by the author.