프론트 115 - typescript utility type

규링규링규리링·2024년 9월 21일

프론트 공부하기

목록 보기
115/135

typescript utility type

유틸리티 타입
기존의 타입들을 변형해서 새로운 타입처럼 사용하는것

 interface IProfile{
    name : string
    age : number
    school : string
    hobby? : string
}

Partial

type a = Partial<IProfile>

모든 항목을 필수가 아닌 타입

Required

type b = Required<IProfile>

모든 항목이 필수인 타입

Pick

type c = Pick<IProfile,"name"|"age">

선택한 값으로만 이루어진 타입

Omit

type d = Omit<IProfile,"school">

선택한 값을 제외한 나머지로만 이루어진 타입

Record

Union

type ee = "a" | "b" | "c"      
let alp1: ee = 'a'
let alp2: ee = 'b'
let alp3: ee = 'c'
// let alp4: ee = 'd'  
// let alp5: ee = 'e'   

| 을 사용하여 특정한 값들만 넣도록 설정할 수 있음.

type e = Record<ee,IProfile>

키와 밸류형식으로 만들어서 사용

keyof

type f = keyof IProfile 
let key1 : f = "age"
let key2 : f = "hobby"
let key3 : f = "name"
let key4 : f = "school"
// let key6 : f = "apple"       
// let key7 : f = "banana"   

객체 안의 키들을 뽑아서 Union으로 만듬

type vs interface 차이점

선언 병합의 가능 여부 ( interface는 가능함 )

interface IProfile{
    alp : number    
}

이런식으로 하면 맨처음 선언한 IProfile과 병합되어
name, age, school, hobby, alp 를 가지는 interface가 됨

간단 응용

let profile : Partial<IProfile> ={
    name: "aa",
    alp : 5
}

이런식으로 사용 가능

0개의 댓글