타입스크립트의 유틸리티 타입

📚 이론정리/JS & TS

서카츄 2024. 9. 20. 20:45

어떤 타입이 있고, 내 마음대로 요리할 수 있도록 다른 타입으로 만드는 것이 유틸리티 타입이다.

interface Profile {
  name: string;
  age: number;
  school: string;
  hobby?: string;
}

먼저 하나의 타입을 만들었다고 가정

type aaa = Partial<Profile>;

파셜타입은 전부 타입들이 있어도 되고, 없어도 되는 타입으로 지정할 수 있다.

type bbb = Required<Profile>;

모두가 다 필수요건인 타입이다.

type ccc = Pick<Profile, "name" | "age">;

name과 age만 뽑아서 다른 타입으로 쓰고싶을 때

type ddd = Omit<Profile, "school">;

school을 제외한 타입이다. school 을 제외한 타입들이 들어간다.

객체의 키들이 있고 타입을`value`타입으로 만들고 싶을 때 사용한다.

type eee = "철수" | "영희" | "훈이"; //Union 타입, (합집합)

먼저 유니온 타입으로 철수, 영희, 훈이를 지정해줬다.

헷갈리지 말자!

let child1: eee = "영희";
let child2: string = "바나나";

`child1` 에는 타입을 지정해 주었을 때, eee 에는 유니온 타입을 지정해 주었기 때문에 철수, 영희, 훈이만 들어올 수 있다.

`child2` 에는 일반적인 string 타입을 넣어줘서 string에 대한 타입들이 전부 들어올 수 있다.

type fff = Record<eee, Profile>;

다시 돌아와서 Record 타입으로 eee, Profile을 지정해 주면

eee는 key가 되고

Profile은 value가 된다.

이렇게 지정해주면 `철수.name`, `철수.school` 등 여러가지 객체를 활용할 수 있다.

type ggg = keyof Profile //Profile에 있는 key만 뽑아옴 (유니온 타입)

객체에 있는 key를 Union(유니온) 타입으로 만드는 방법이다.

안에는 name, age, school, hobby가 들어와 있다.

type과 interface는 선언병합의 차이점이 있다.

선언병합이란 컴파일러가 같은 이름으로 선언된 두 개의 개별적인 선언을 하나의 정의로 병합하는 것을 뜻한다.

한마디로 같은 Profile객체를 합친다는 뜻이다!

interface Profile {
  candy: number; //선언병합으로 추가되었다.
}

위에 선언했지만, 이렇게 candy를 선언해주면 Profile이 합쳐지고, candy객체도 위에 선언했던 내용과 합쳐줄 수 있다.

type으로 선언하면 두개이상 합칠 수 없다.

즉 interface만 가능하다.

let profile: Partial<Profile> = {
  candy: 10,
};

`interface`는 주로 객체 타입을 정의할 때 사용되고, 클래스나 객체를 정의할 때 적합하다.

`type`은 좀 더 유연하게 사용할 수 있고 원시 타입(primitive types), 유니온(union), 교차 타입(intersection) 등을 표현할 수 있다.

// 원시 타입을 이용한 타입 정의
type StringOrNumber = string | number;

// 튜플 타입 정의
type Tuple = [number, string];

type은 유니온 타입, 교차 타입, 맵드 타입 등을 정의하는 데 주로 사용한다.

interface는 객체 모양을 정의하는 데 주로 쓰이지만, type은 그 외 다양한 복합적인 타입 표현에 유리하다.

interface는 객체와 클래스의 구조를 정의하는 데 더 직관적이며 선언 병합과 상속을 활용할 수 있다.

type은 더 유연하고, 원시 타입이나 유니온 타입 같은 복잡한 타입 표현이 필요할 때 사용된다.

interface는 명확하게 객체의 구조를 정의하고 확장할 때 유리하고, type은 다양한 타입 조합이 필요할 때 유용하다.