유틸리티 타입 (+MappedType)



1. Record

모든 키를 지정된 타입으로 매핑 (맵드타입이다)

그러므로 home이나 about둘중에 하나가 빠져도 안된다

type Page = "home" | "about";
type PageInfo = { title: string };

const nav: Record<Page, PageInfo> = {
  home: { title: "Title1" },
  about: { title: "Title2" },
};

위의 예제는 아래의 맵드타입예제와 동일하다

( 맵드타입이기 때문에 in을 사용 )

const nav: { [key in Page]:PageInfo } = {
  home: { title: "Title1" },
  about: { title: "Title2" },
};

맵드타입이란?

- 맵드타입 : 주로 유니온 타입의 멤버를 순회하면서 각각의 멤버를 기반으로 키-값 쌍을 생성하는 데 사용

in등을 사용한다

모든 키값을 포함하며 필수값이 된다

type MappedType = { [Key in UnionType]: Type };



2. Required

모든 프로퍼티를 필수로 변경.

type PartialType = { name?: string };
type RequiredType = Required<PartialType>;

const obj: RequiredType = { name: "John" }; // `name` 필수


3. Partial

모든 프로퍼티를 선택적으로 변경.

type FullType = { name: string; age: number };
type PartialType = Partial<FullType>;

const obj: PartialType = { name: "John" }; // `age` 생략 가능


4. Readonly

모든 프로퍼티를 읽기 전용으로 변경.

type MutableType = { name: string };
type ReadonlyType = Readonly<MutableType>;

const obj: ReadonlyType = { name: "John" };
// obj.name = "Doe"; // 오류 발생


5. Pick

특정 프로퍼티만 추출.

type FullType = { name: string; age: number };
type NameOnly = Pick<FullType, "name">;

const obj: NameOnly = { name: "John" };


6. Omit

특정 프로퍼티를 제외.

type FullType = { name: string; age: number };
type WithoutAge = Omit<FullType, "age">;

const obj: WithoutAge = { name: "John" };


7. Extract

유니온 타입에서 특정 타입 추출.

type Mixed = "a" | "b" | "c";
type OnlyA = Extract<Mixed, "a" | "d">; // "a"


8. Exclude

유니온 타입에서 특정 타입 제거.

type Mixed = "a" | "b" | "c";
type WithoutB = Exclude<Mixed, "b">; // "a" | "c"


9. NonNullable

null과 undefined 제거.

type MaybeNull = string | null | undefined;
type NotNull = NonNullable<MaybeNull>; // string


10. Nullable (사용자 정의)

null과 undefined 추가.

위의 Nullable은 타입스크립트의 유틸리티타입에 정의되어있지 않다

하지만 아래와 같이 제너릭을 사용해서 구현할수있다

type Nullable<T> = T | null | undefined;
type Example = Nullable<string>; // string | null | undefined


11. Parameters

함수 매개변수 타입을 튜플로 추출.

type Fn = (a: string, b: number) => void;
type Params = Parameters<Fn>; // [string, number]


12. ReturnType

함수 반환 타입 추출.

type Fn = () => string;
type Ret = ReturnType<Fn>; // string


13. InstanceType

클래스의 생성자 타입 추출.

class MyClass {
  name: string = "John";
}
type Instance = InstanceType<typeof MyClass>; // MyClass



참고

유틸리티타입 핸드북




Nov 16, 2024 Views 37