관리 메뉴

프로그래밍 삽질 중

[TS] (utility types)Required, Record, NonNullable 타입 분석 본문

과거 프로그래밍 자료들/Javascript&typescript

[TS] (utility types)Required, Record, NonNullable 타입 분석

평부 2022. 9. 18. 23:46

 

 

출처 : https://github.com/ZeroCho/ts-all-in-one

 

GitHub - ZeroCho/ts-all-in-one

Contribute to ZeroCho/ts-all-in-one development by creating an account on GitHub.

github.com

 

https://github.com/microsoft/TypeScript/blob/main/lib/lib.es5.d.ts

 

GitHub - microsoft/TypeScript: TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

TypeScript is a superset of JavaScript that compiles to clean JavaScript output. - GitHub - microsoft/TypeScript: TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

github.com

 

 

* [lib.ex5.d.ts] Required, Record, NonNullable

type Required<T> = {
    [P in keyof T]-?: T[P];
};

type Record<K extends keyof any, T> = {
    [P in K]: T;
};

type NonNullable<T> = T & {};

 

 

* Required

- 옵셔널로 Profile을 만들었는데 모든 항목을 다 필수로 만들고 싶을 때 사용

interface Profile {
    name?: string,
    age?: number,
    married: boolean
}

type Name = Profile['name']

const zerocho: Required<Profile> = {
    name: "zerocho",
    age: 29,
    married: false,
}

 

 

* Required를 R로 만들기

interface Profile {
    name?: string,
    age?: number,
    married: boolean
}

type Name = Profile['name']

type R<T> = {
    //[Key in keyof T]는 name?, age?, married? 이렇게 가져옴
    //-는 옵셔널을 전부 제거
    [Key in keyof T]-?: T[Key];
}

const zerocho: R<Profile> = {
    name: "zerocho",
    age: 29,
    married: false,
}

 

 

 

* Readonly 

▶ 수정 못하게 막는 것 

interface Profile {
    name?: string,
    age?: number,
    married: boolean
}
const zerocho: Readonly<Profile> = { //프로필 수정 못함
    name: "zerocho",
    age: 29,
    married: false,
}

zerocho.name = "nero"

 

 

 

* Readonly를 R로 만들기

interface Profile {
    name?: string,
    age?: number,
    married: boolean
}

type Name = Profile['name']

type R<T> = {
    readonly[Key in keyof T]: T[Key];
// -readonly[Key in keyof T]: T[Key]; //-도 붙일 수 있음
}

const zerocho: R<Profile> = { //프로필 수정 못함
    name: "zerocho",
    age: 29,
    married: false,
}

zerocho.name = "nero" //수정이 안 되므로 오류난다고 나옴

 

 

* Record 

▶ 객체를 표현하는 한 가지 방법

//1번 코드
interface Obj {
    [key: string]: number;
}
//2번 코드(1번과 2번은 서로 같은 코드)
const a: Record<string, number> = {a: 3, b:5, c: 7}

 

 

* Record를 R로 만들기

type R<T extends keyof any, S> = { //T에 제한조건을 줌
    [Key in T]: number;
}
const a: R<string, number> = {a: 3, b:5, c: 7}

 

 

* NonNullable

▶ null, undefined 제거

type A = string | null | undefined | boolean | number;
//type B = string | boolean | number
type B = NonNullable<A>;

 

 

* NonNullable를 N으로 만들기

type A = string | null | undefined | boolean | number;
//type B = string | boolean | number
type B = N<A>;

//삼항연산자 사용
type N<T> = T extends null | undefined ? never : T