종류가 많아서 일단 두 파트로 나눠서 정리하려 한다.
- 유틸리티 타입(1) : Partial / Required / Record / Readonly / Exclude
Utility Types
- 일반적인 타입 변환을 쉽게 하기 위해서 제공하는 타입
- 전역으로 사용이 가능하다.
참고 및 출처) typescriptlang.org - Partial<Type>
Partial<Type>
- Type 집합의 모든 프로퍼티를 선택적으로 타입을 생성한다.
- 주어진 타입의 모든 하위 타입 집합을 나타내는 타입을 반환한다.
참고 및 출처) How the TypeScript Partial Type Works
- User라는 타입을 type alias 로 선언하고, firstUser에 User타입을 지정한다.
- firstUser에 firstName 프로퍼티만 넣으면 에러가 일어난다.
type User = {
firstName: string,
lastName: string
}
let firstUser:User = {
firstName: "John"
}
- fistUser의 타입을 Partial<User>로 변경한다.
let firstUser:Partial<User> = {
firstName: "John"
}→ 이는 다음 코드처럼 선언한 것과 같다.
type User = {
firstName?: string,
lastName?: string
}- 만약 모든 프로퍼티가 아닌 몇개의 프로퍼티만 타입을 지정하고 싶다면 사용하면 된다.
- 모든 프로퍼티를 사용하려면 굳이 Partial 타입을 지정할 필요는 없다.
type User = {
firstName: string,
lastName: string
}
// Partial타입 지정
let firstUser:Partial<User> = { firstName: "John" }
//일반적인 타입 지정
let secondUser:User = { firstName: "John", lastName: "Doe" }Reauired<Type>
- Type 집합의 모든 프로퍼티를 필수로 설정한 타입을 생성한다.
- Partial 타입과 반대이다.
참고 및 출처) How the TypeScript Required Type Works
- User라는 타입을 type alias 로 선언하고, firstUser에 User타입을 지정한다.
- firstUser에 firstName 프로퍼티만 넣으면 에러가 일어난다.
type User = {
firstName: string,
lastName: string
}
let firstUser:User = {
firstName: "John"
}- 에러를 해결하기 위해 type User의 lastName 프로퍼티에
?를 추가하였다.
→ 이제는 firstUser에서 lastName 프로퍼티를 포함하지 않아도 괜찮다.
type User = {
firstName: string,
lastName?: string
}
let firstUser:User = {
firstName: "John"
}- lastName을 옵션(
?)을 줘서 에러는 해결했지만, lastName 프로퍼티까지 포함한 모든 프로퍼티가 필수로 필요한 상황이 생긴다면?
⇒ Required<type> 타입을 사용한다.
type User = {
firstName: string,
lastName?: string
}
//firstUser는 lastName 프로퍼티를 가져도 되고 없어도 된다.
let firstUser:User = {
firstName: "John",
}
//secondUser는 firstName과 lastName을 필수로 가지고 있어야 한다.
let secondUser:Required<User> = {
firstName: "John"
}
- 에러를 해결하기 위해서는 secondUser에 lastName 프로퍼티를 추가해야 한다.
type User = {
firstName: string,
lastName?: string
}
let secondUser:Required<User> = {
firstName: "John",
lastName: "Doe"
}Record<K, T>
- Type의 프로퍼티 key의 집합으로 타입을 생성한다.
- 타입의 프로퍼티를 다른 타입에 매핑시킬 때 사용한다.
참고 및 출처) How the TypeScript Record Type Works
- 각 key값(string타입)에는 같은 포맷의 value값들이 있다.
const myData = {
"123-123-123" : { firstName: "John", lastName: "Doe" },
"124-124-124" : { firstName: "Sarah", lastName: "Doe" },
"125-125-125" : { firstName: "Jane", lastName: "Smith" }
}- Recordt<K, T>를 사용해서 코드를 작성해보자.
- K는 key의 타입, T는 value의 타입이다.
type User = {
firstName: string,
lastName: string
}
//key는 string, value는 User타입이다!
const myData:Record<string, User> = {
"123-123-123" : { firstName: "John", lastName: "Doe" },
"124-124-124" : { firstName: "Sarah", lastName: "Doe" },
"125-125-125" : { firstName: "Jane", lastName: "Smith" }
}Record<K,T>타입과 Union타입
- 가끔 어떤 값들은 정해진 값만 들어가야 하는 경우가 생긴다.
const myData = {
"uk" : { firstName: "John", lastName: "Doe" },
"france" : { firstName: "Sarah", lastName: "Doe" },
"india" : { firstName: "Jane", lastName: "Smith" }
}- 위 코드에서 key값에는 uk, france, india만 들어가야 한다고 해보자.
→ union타입을 사용해서 지정해준다.
type User = {
firstName: string,
lastName: string
}
// Country는 uk, france, india 세개의 값만 허용한다.
type Country = "uk" | "france" | "india";
//key를 Country타입으로 지정한다.
const myData:Record<Country, User> = {
"uk" : { firstName: "John", lastName: "Doe" },
"france" : { firstName: "Sarah", lastName: "Doe" },
"india" : { firstName: "Jane", lastName: "Smith" }
}Readonly<Type>
- Type집합의 모든 프로퍼티를 읽기 전용(readonly)로 설정한 타입을 생성한다.
- 생성된 타입의 프로퍼티는 재할당 될 수 없다.
참고 및 출처) How the TypeScript Readonly Type Works
- 내가 지정한 객체 타입을 아무도 건들이지 않으면 좋겠다..
type User = {
firstName: string,
lastName: string
}
let firstUser:Readonly<User> = {
firstName: "John",
lastName: "Doe"
}→ 만약 firstName 프로퍼티를 수정하려고 한다면 에러가 난다.
firstUser.firstName = 'Alex';
Readonly변수는 TypeScript에서 작동하지 않는다
- TypeScript에서는 변수에 Readonly타입을 줘도 작동하지 않는다.
let myVariable:Readonly<string> = "Hello World";
myVariable = "Goodbye World";
console.log('myVariable : ',myVariable);→ 콘솔에 찍힌 결과
- 변수에서는 Readonly 대신 const를 사용하자.
Exclude<U, E>
- 이미 정의된 Union타입에서 특정 프로퍼티를 제외할 수 있다.
- 특정 상황에 따라 항목을 제거할 수 있다.
참고 및 출처) How the TypeScript Exclude Type Works
- Union타입을 사용해서 타입을 만들었다.
- myUnionType을 지정한 변수에는 해당 값들만 할당 할 수 있다.
type myUnionType = "🍇" | "🍎" | "🍑" | "🍋";
//성공!
let myString:myUnionType = "🍇"
//실패..
let secondString:myUnionType = "some-string"
- 위에서 지정한 myUnionType에서 "🍋"만 제외하고 싶다면?
→ Exclude<U, E>를 사용해서 코드를 작성해보자.
- T는 Union타입, E는 제외할 값이다.
//성공!
let noLemonsPleaseFirst:Exclude<myUnionType, "🍋"> = "🍇";
//실패..
let noLemonsPleaseSecond:Exclude<myUnionType, "🍋"> = "🍋";
예고) 유틸리티 타입(2) : Extract / Omit / Pick / Parameters / NonNullable / ReturnType
프론트엔드 개발자를 꿈꾸는 사람( •̀ ω •́ )✧