타입스크립트 대수타입

·2024년 11월 19일

TS

목록 보기
5/5

타입스크립트 대수타입

대수타입이란?

복수의 타입을 합성하거나 교차한 형태의 타입을 새롭게 만든 것

합집합의 형태로 타입 : union 타입
교집합의 형태로 타입 : intersection 타입

대수타입 : union 타입

  • 합집합과 완전 똑같지는 않음
type Dog = {
  name: string;
  color: string;
};
type Person = {
  name: string;
  language: string;
};

type Union1 = Dog | Person;

let union1: Union1 = {
  name: "",
  color: "",
};

let union2: Union1 = {
  name: "",
  language: "",
};

let union3 = {
  name: "",
  color: "",
  language: "",
};

하지만 합집합이라 아래 할당은 불가하다

let union4: Union1 = {
  name: "",
};

대수타입 : Intersection

  • 합집합 전부 (하나라도 빠지면 안됨)
type Intersection = Dog & Person;

let intersection: Intersection = {
  name: "",
  color: "",
  language: "",
};
  • 두가지의 내용을 모두 가진 type
  • & 연산자를 사용하여 더한다

타입단언

  • any 다음으로 치트키
interface Person01 {
  name: string;
  age: number;
}

let person01: Person01 = {}; // 에러

person01.name = "";
person01.age = 20;

이상적으로는 맞는 구문인거 같지만 선언시 person01의 값이 없기때문에 에러가 뜬다.

interface Person01 {
  name: string;
  age: number;
}

let person01 = {} as Person01;

person01.name = "";
person01.age = 20;

as Person01
위와 같은 타입단언으로 먼저 타입을 선언할 수 있다.

type Dog = {
  name: string;
  color: string;
};

let dog: Dog = {
  name: "뽀삐",
  color: "red",
  breed: "똥개",
} as Dog;

프로퍼티가 초과했지만 타입단원으로 캡슐을 씌워넣어서 타입검사를 통과할 수 있다.

타입 단언은 any 다음으로 치트키

let num1 = 10 as never; // type은 never

하지만 타입 단언을 실행시키려면 반드시 조건이 필요하다
- 상호간 슈퍼&서브타입이어야함

let num3 = 10 as string; // 에러
// 'number' 형식을 'string' 형식으로 변환한 작업은 실수일 수 있습니다. 두 형식이 서로 충분히 겹치지 않기 때문입니다.

number를 string으로 변환할시 해당 오류가 발생


let num3 = 10 as unknown as string;

해당 형식으로는 타입단언 가능 하지만 너무 많이 쓰는건 비추천

리터럴 타입

as const

let num3: 10 = 10
let num4 = 10 as const;

해당 방법으로 선언 가능

타입가드 = 타입좁히기

유니온타입의 함정

const func = (value: number | string) => {
  value.toFixed(2); 
  value.toUpperCase(); 
};

둘 다 불가하다
해당 타입을 사용하고 싶으면 조건문을 사용하면 된다.

const func = (value: number | string) => {
  if (typeof value === "number") {
    value.toFixed(2);
  } else if (typeof value === "string") {
    value.toUpperCase();
  }
};

if/else 로 타입 확인한 후 사용 가능

profile
하고싶은거 짱많은 주니어 프론트엔드 개발자

0개의 댓글