프론트엔드 공부/React

43일차 프론트엔드 공부 - 타입 스크립트2

프망생222 2024. 12. 30. 16:08

- 프론트엔드 공부 43일차 -

 

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

// 1. Partial 타입
type aaa = Partial<IProfile>;
// type aaa = {
//     name?: string | undefined;
//     age?: number | undefined;
//     school?: string | undefined;
//     hobby?: string | undefined;
// } 를 의미한다.

// 2. Required 타입
type bbb = Required<IProfile>;
// type bbb = {
//     name: string;
//     age: number;
//     school: string;
//     hobby: string;
// } 를 의미한다.

// 3. Pick 타입
type ccc = Pick<IProfile, "name" | "age">;
// type ccc = {
//     name: string;
//     age: number;
// } 를 의미한다.

// 4. Omit 타입
type ddd = Omit<IProfile, "school">;
// type ddd = {
//     name: string;
//     age: number;
//     hobby?: string | undefined;
// } 를 의미한다.

// 5. Record 타입
type eee = "철수" | "짱구" | "훈이"; // Union 타입
let child1: eee = "바나나";
// eee 에는 철수, 짱구, 훈이만 할당할 수 있다.

type fff = Record<eee, IProfile>;
// type fff = {
//     철수: IProfile;
//     짱구: IProfile;
//     훈이: IProfile;
// } 를 의미한다.

// 6. 객체의 key들로 Unicon 타입 만들기
type ggg = keyof IProfile; // "name" | "age" | "school" | "hobby"
let myprofile: ggg = "hobby"; // name, age, school, hobby만 사용 가능

// 7. type vs interface 차이 -> interface는 선언병합 가능능
export interface IProfile {
  candy: number; // 선언병합으로 추가됨
}

let profile: Partial<IProfile> = {
  candy: 10,
};