#TypeScript (7) Utility Type 3

유틸리티 타입

TypeScript는 일반적인 타입 변환을 쉽게 하기 위해서 몇 가지 유틸리티 타입을 제공합니다. 이러한 유틸리티는 전역으로 사용 가능합니다.

---

Parameters<Type>

함수 타입 Type의 매개변수에 사용된 타입에서 튜플 타입을 생성합니다. 간단하게 함수의 매개변수를 추출합니다.

type Tuple1 = Parameters<() => void> // []

type Tuple2 = Parameters<(n1: number, n2: number) => void> // [n1: number, n2: number]

type Tuple3 = Parameters<<T>(param: T) => T> // [param: unknown]

type Tuple4 = Parameters<(param: any) => void> // [param: any]

type Tuple5 = Parameters<any> // unknown[]
type Tuple6 = Parameters<string> // 함수자체로 인식을 못하기 때문에 원시타입인 string, number 등 안됩니다.
type Tuple7 = Parameters<never> // never

type Tuple8 = Parameters<<T>(...arg: T[]) => void> // unknown[]

 

https://www.typescriptlang.org/ko/play?#code/C4TwDgpgBAKgrmANhAjFAvFACgQwE44C2EwEeAzgDwAUAlBgHxQBuA9gJYAmTA9D1AG0AugFgAUONCRYCZACYM2fERJkq1AHYoAXFA1xCAIzIAaPXN36jZeuiZsuvfgK2WDxvGY0W97sqIkxKWh4JAgAZkVcAmJSCkpKGAZqMGVCXRhbJiSoPkFUmN04DQBrDVYAdw0AyXAQ2QgAFii01XiUtN0cDRAslg5uXOcCoi6emqC6mTCAVhaYtqpukCcoYrLKjWFa6VDkADZ5lTiqcmA8dg0Ac1XAC1XADCHABPHAFpnAHQ6oQA9xwF2hwBFxqEBursAGquABjqoIAZVsAHN2ABdGoIAFscAO0OAAYXAKHjHygZwu1y8fjwUEAjy1QQASo4BKFsAE02AE6aAHQ7ephADsR1iakoGggzDIq1Z7Lw4hp02QAA5GYsEklqJSJfgrhlhH0HIM8utylVhEA 

TS Playground - An online editor for exploring TypeScript and JavaScript

---

ReturnType<Type>

함수 Type의 반환 타입으로 구성된 타입을 생성합니다.

type return1 = ReturnType<() => number> // number
type return2 = ReturnType<() => void> // void
type return3 = ReturnType<() => unknown> // unknown
type return4 = ReturnType<() => null> // null

type return5 = ReturnType<(<T>(p: T) => T)> // unknown

function func(s: string) : string {
    return s
}
type return6 = ReturnType<typeof func> // string

type return7 = ReturnType<string> // () => string 구조로 해야함
type return8 = ReturnType<Function> // () => void 구조로 해야함

https://www.typescriptlang.org/ko/play?#code/C4TwDgpgBAThwFcYDsCMUC8UBK8nIBVwIAeACgEpMA+KZBAWwCMIZaB6duxlmAWABQoSLDwoATJhxjCxclQy0AbgHsAlgBMOXVZsHDocRCgDMU3MdmR5NKAmQBrZCoDuybXcfO3+4qMsALOYyRNaUtvQANpEeUZGCviJG+ACswZahpGQkBNRkYABcUAQKtCUe9k6uyAkCAGb2AMbAairIUA3IjWQAzkU9wDBqyADmVP2DwyNQAN6CUAv++FA9ggC+iYYyAGzp+JkkBip1HU0eA0OjtQZLKADseygHF1Me4York6NQgDa1gA4TgB0OqCAF1XAD6jgAtVza3ZAADkeVlIADEmi02m9SlBdBpfoCQRCgA

TS Playground - An online editor for exploring TypeScript and JavaScript

---

InstanceType<Type>

Type의 생성자 함수의 인스턴스 타입으로 구성된 타입을 생성합니다.

class a {}

type instance1 = InstanceType<typeof a>

class b {
    x = 0;
    y = 0;
}

type instance2 = InstanceType<typeof b>

type instance3 = InstanceType<string>

// InstanceType이 추상화가 되어있기때문에 class와 typeof의 조합만 가능

https://www.typescriptlang.org/ko/play?#code/MYGwhgzhAEbQ3gXwLACg0BcCeAHAptAJYB2EGYxweAjNALzQCSp5leAKrngDzb4D2AM1gA+NGlCQYAIwRpoC6AA960AAwBueYqyrNaFOlR8CJMhSoAmVc3NtO+XlyHRpYoyaIsLeAMw3vey5uMgAnEgBzdzQAehimQKoHPEAXcehAFNnAQYHAFTXAABroQAwWwBbRwAjxwAY6wBlWwA5uwAXR6EkoQAEx6BMhQA1x6EAHCcBLVcAZzuhcwFKmoA 

TS Playground - An online editor for exploring TypeScript and JavaScript

---

최종 정리

1. 유틸리티 타입을 통해 타입의 변화를 아주 쉽게 할 수 있습니다.
2. 훨씬 간결한 문법으로 타입을 정의할 수 있습니다.
3. 기존의 인터페이스, 제네릭 등의 기본문법으로 충분히 타입을 변환할 수 있습니다.

https://www.typescriptlang.org/ko/docs/handbook/utility-types.html

Documentation - Utility Types