- 프론트엔드 공부 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,
};
'프론트엔드 공부 > React' 카테고리의 다른 글
45일차 프론트엔드 공부 - eslint, prettier (0) | 2025.01.05 |
---|---|
44일차 프론트엔드 공부 - 이벤트 버블링 (0) | 2025.01.01 |
42일차 프론트엔드 공부 - 타입 스크립트 (0) | 2024.12.29 |
41일차 프론트엔드 공부 - 게시글 수정하기 (0) | 2024.12.22 |
41일차 프론트엔드 공부 -나만의 페이지 만들기 실습 04 (0) | 2024.12.15 |