[Typescript] 타스형! 스터디 5주차

woo·2022년 11월 21일
0

Typescript

목록 보기
5/13
post-thumbnail

➕ zerocho님 typescript all-in-one 강의를 듣고 정리한 내용입니다.

✔ 섹션3

Partial 타입 분석

utility types로 알아보기

interface Profile{
    name : string,
    age : number,
    isStudent : boolean,
}

const wooyoung: Profile = {
	name : 'wooyoung',
    age : 24,
    isStudent : true
}

// Partial : interface 속성을 다 optional(?)로 만듦
const newWooyoung: Partial<Profile> = {
	name : 'wooyoung',
  	age : 24,

}

// Partial 직접만들어보기
type Partial<T> = {
    [Key in keyof T]?: T[Key];
};

Partial<Profile> {
    name? : string,
    age? : number,
    isStudent? : boolean,
}

Pick 타입 분석

Partial을 사용하게 되면 전부다 optional이 되기 때문에 아무것도 속성을 안넣어도 되는게 문제!
따라서 Pick 또는 Omit을 사용하는게 좋음!

interface Profile{
    name : string,
    age : number,
    isStudent : boolean,
}

const wooyoung: Profile = {
	name : 'wooyoung',
    age : 24,
    isStudent : true
}

// Pick : interface 속성에서 원하는 속성만 선택
const newWooyoung: Pick<Profile, 'name' | 'age'> = {
	name : 'wooyoung',
  	age : 24,

}

// Omit : interface 속성에서 빼고싶은 속성만 선택
const newWooyoung: Pick<Profile, 'isStudent'> = {
	name : 'wooyoung',
  	age : 24,

}

// Pick 직접만들어보기
type Pick<T, S extends keyof T> = {
    [key in S]: T[key];
};

// Omit 직접만들어보기
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

Omit, Exclude, Extract 타입 분석

interface Profile{
    name : string,
    age : number,
    isStudent : boolean,
}

const wooyoung: Profile = {
	name : 'wooyoung',
    age : 24,
    isStudent : true
}

// Exclude : key들 중에서 빼고 싶은 것 선택

// type A = 'name' | 'age'
type A = Exclude<keyof Profile, 'isStudent'>

const newWooyoung: Pick<Profile, Exclude<keyof Profile, 'isStudent'>> = {
	name : 'wooyoung',
  	age : 24,

}

// Exclude : S를 배제
type Exclude<T, S> = T extends S ? never : S;

// Extract : S를 포함
type Extract<T, S> = T extends S ? S : never;

// Omit
type Omit<T, S extends keyof any> = Pick<T, Exclude<keyof T, S>>;

// Omit : interface 속성에서 빼고싶은 속성만 선택
const newWooyoung: Pick<Profile, 'isStudent'> = {
	name : 'wooyoung',
  	age : 24,

}

ts type 지정할 때 삼항연산자 자주 사용됨!

Required, Record, NonNullable 타입 분석

interface Profile{
    name : string,
    age : number,
    isStudent : boolean,
}

const wooyoung: Profile = {
	name : 'wooyoung',
    age : 24,
    isStudent : true
}

// Required : key들을 모두 필수 속성으로
type Required<T> = {
    [P in keyof T]-?: T[P]; // -? : optional(?)를 모두 제거
};

const newWooyoung: Required<Profile> = {
	name : 'wooyoung',
  	age : 30,
    isStudent : false

}

// Readonly : key의 값을 수정못하게 막고싶을때
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

const newWooyoung: Required<Profile> = {
	name : 'wooyoung',
  	age : 30,
    isStudent : false
}

newWooyoung.name = "song" //❌

// Record : 객체를 표현하는 방법
type Record<K extends keyof any, T> = {
    [P in K]: T;
};


// 이렇게 Obj를 만드는 대신에
interface Obj {
	[key : string] : number,
}


const a : Record<string, number> = {a:3, b:5, c:7}


// NonNullable : null, undefiend를 빼고 가져오고 싶을때
type NonNullable<T> = T extends null | undefined ? never : T;

type A = string | null | undefined | boolean | number;
type B = NonNullable<A> // string | boolean | number;
profile
🌱 매일 성장하는 개발자

0개의 댓글