반응형
타입스크립트(TypeScript)는 자바스크립트(JavaScript)에 정적 타입을 부여하여, 코드를 더 안전하고 유지보수하기 쉽게 만들어줍니다. 이 글에서는 타입스크립트의 유틸리티 타입들에 대해 소개해보겠습니다.
1. Partial
Partial<T>는 제네릭 타입 T의 모든 프로퍼티를 옵셔널로 만듭니다. 즉, T의 모든 프로퍼티가 있을 수도 있고 없을 수도 있는 상태로 만들어줍니다.
interface User {
id: number;
name: string;
email: string;
}
const updateUser = (id: number, userUpdate: Partial<User>) => {
// 일부 프로퍼티만 업데이트 가능
};
// 올바른 호출
updateUser(1, { id:1 });
updateUser(1, { id:1 , name: 'Seoyoon Park'});
updateUser(1, { id:1 , name: 'Seoyoon Park', email: 'dev.yelee@gmail.com'});
// 오류 발생
updateUser(1, { phone : '000-0000-0000'});
2. Required
Required<T>는 T의 모든 프로퍼티를 필수로 만듭니다. 옵셔널 프로퍼티가 있는 타입을 필수 프로퍼티로 변환할 때 사용됩니다.
interface User {
id: number;
name?: string;
email?: string;
}
const createUser = (user: Required<User>) => {
// 모든 프로퍼티가 필수
};
// 올바른 호출 - 모든 프로퍼티 제공
createUser({ id: 1, name: 'Seoyoon Park', email: 'dev.yelee@gmail.com' });
// 오류 발생 - name을 제공하지 않음
createUser({ id: 2, email: 'dev.yelee@gmail.com' });
3. Readonly
Readonly<T>는 T의 모든 프로퍼티를 읽기 전용으로 만듭니다. 이는 객체를 불변으로 만들고자 할 때 유용합니다.
interface User {
id: number;
name: string;
email: string;
}
const user: Readonly<User> = {
id: 1,
name: "Seoyoon Park",
email: "asdfasdfasdf@asdfasdf.com",
};
// user.id = 2; // 오류 발생: 읽기 전용 속성입니다.
4. Pick
Pick<T, K>는 T 타입에서 K 프로퍼티들만 선택하여 새로운 타입을 만듭니다. K는 T의 프로퍼티 이름들의 유니온 타입입니다.
interface User {
id: number;
name: string;
email: string;
}
type UserInfo = Pick<User, "id" | "name">;
const user: UserInfo = {
id: 1,
name: "Seoyoon Park",
// email은 포함되지 않음
};
5. Omit
Omit<T, K>는 T 타입에서 K 프로퍼티들만 제외하여 새로운 타입을 만듭니다. K는 T의 프로퍼티 이름들의 유니온 타입입니다. (= 프로퍼티의 차집합)
interface User {
id: number;
name: string;
email: string;
}
type UserWithoutEmail = Omit<User, "email">;
const user: UserWithoutEmail = {
id: 1,
name: "Seoyoon Park",
// email은 제외됨
};
6. Record
Record<K, T>는 K 타입의 키와 T 타입의 값으로 구성된 객체 타입을 만듭니다. 이는 맵이나 객체 리터럴 타입을 정의할 때 유용합니다.
type UserRole = "admin" | "user" | "guest";
interface UserPermissions {
read: boolean;
write: boolean;
delete: boolean;
}
const roles: Record<UserRole, UserPermissions> = {
admin: { read: true, write: true, delete: true },
user: { read: true, write: true, delete: false },
guest: { read: true, write: false, delete: false },
};
7. Exclude
Exclude<T, U>는 T 타입에서 U 타입에 해당하는 타입들을 제외하여 새로운 타입을 만듭니다. 이는 유니온 타입에서 특정 타입을 제거할 때 유용합니다. (=타입의 차집합)
type AllTypes = string | number | boolean;
type ExcludedTypes = Exclude<AllTypes, boolean>;
// ExcludedTypes는 string | number 타입이 됨
8. Extract
Extract<T, U>는 T 타입에서 U 타입에 해당하는 타입들만 추출하여 새로운 타입을 만듭니다. 이는 유니온 타입에서 특정 타입만 남길 때 유용합니다. (=타입의 교집합)
type Member = 'kim' | 'lee' | 'park'
type Developer = 'park' | 'kwon';
// Extract를 사용하여 Member 타입에서 Developer 타입을 추출합니다.
type ExtractedMember = Extract<Member, Developer>;
// ExtractedMember 타입은 'park'가 됩니다.
// 사용 예시
const team1: ExtractedMember = 'park'; // OK
const team2: ExtractedMember = 'choi'; // 오류
9. NonNullable
NonNullable<T>는 T 타입에서 null과 undefined를 제거한 타입을 만듭니다.
type NullableType = string | number | null | undefined;
type NonNullableType = NonNullable<NullableType>;
// NonNullableType는 string | number 타입이 됨
👩💻 Q&A
Q. Pick 과 Extract 의 차이
- Pick: 객체의 일부 속성(=프로퍼티)만 뽑아서 새로운 타입을 만든다
- Extract: 여러개의 타입 중에서 특정 타입만 골라서 새로운 타입을 만든다 (=타입의 교집합 )
Q. Omit과 Exclude의 차이
- Omit: 객체의 일부 속성(=프로퍼티)를 제외하여 새로운 타입을 만든다
- Exclude: 여러 타입에서 특정 타입을 제외한 새로운 타입을 만든다 (=타입의 차집합)
반응형
'📍 Front-End > 🜸 TypeScript' 카테고리의 다른 글
자바스크립트(타입스크립트)에서 숫자 세자리(천단위)마다 콤마 찍기 (0) | 2023.01.12 |
---|---|
Typescript 타입스크립트 에러 Object is possibly 'null' (0) | 2022.11.22 |
[Typescript] 타입스크립트에서 json 파일 import 안될 때 (0) | 2022.06.12 |
[React/Typescript] styled-components로 global style 적용하기 (0) | 2022.06.10 |
React + Typescript + ESLint + prettier 환경 구성하기 (2022. 5. 29 기준) (1) | 2022.05.29 |
댓글