공부해봅시당
[Typescript] 타입 활용하기 본문
extends와 제네릭을 활용한 조건부 타입
조건부 타입에서 extends를 사용할 때는 자바스크립트 삼항 연산자와 함께 쓴다.
// T를 U에 할당할 수 있으면 X타입, 아니면 Y타입
T extends U ? X : Y
type IsString<T> = T extends string ? "yes" : "no";
type Test1 = IsString<string>; // "yes"
type Test2 = IsString<number>; // "no"
이해를 돕기 위해 간단한 예제를 살펴보자.
제네릭과 extends를 사용한 필터링
제네릭과 조건부 타입을 사용하여 특정 타입을 필터링할 수 있다.
type Filter<T, U> = T extends U ? T : never;
type Test3 = Filter<string | number | boolean, string>; // string
type Test4 = Filter<string | number | boolean, number>; // number
type Test5 = Filter<string | number | boolean, boolean>; // boolean
제네릭 인터페이스에서 조건부 타입
제네릭 인터페이스에서 조건부 타입을 사용할 수 있다.
interface Example<T> {
value: T;
isString: T extends string ? true : false;
}
const example1: Example<string> = {
value: "hello",
isString: true,
};
const example2: Example<number> = {
value: 42,
isString: false,
};interface Bank {
financialCode: string;
companyName: string;
name: string;
fullName: string;
}
interface Card {
financialCode: string;
companyName: string;
name: string;
appCardType?: string;
}
type PayMethod<T> = T extends "card" ? Card : Bank;
type CardPayMethodType = PayMethod<"card">;
type BankPayMethodType = PayMethod<"bank">;
const bank: BankPayMethodType = {
financialCode: "bank",
companyName: "bank",
name: "bank",
fullName: "bank"
}
console.log(bank);
const card: CardPayMethodType = {
financialCode: "card",
companyName: "card",
name: "card"
}
console.log(card);
조건부 타입과 매핑된 타입
조건부 타입과 매핑된 타입을 결합하여 특정 조건에 맞는 타입만 유지할 수 있다.
type RemoveType<T, U> = {
[K in keyof T]: T[K] extends U ? never : T[K];
};
type Original = {
name: string;
age: number;
isStudent: boolean;
};
type WithoutBoolean = RemoveType<Original, boolean>;
// { name: string; age: number; isStudent: never; }
유틸리티 타입 구성
조건부 타입과 제네릭을 사용하여 유틸리티 타입을 만들 수 있다.
선택적 프로퍼티를 필수 프로퍼티로 변환하는 타입을 만들어보자.
type RequiredKeys<T> = {
[K in keyof T]-?: {} extends { [P in K]: T[K] } ? never : K
}[keyof T];
type User = {
id: string;
name?: string;
age?: number;
};
type RequiredUserKeys = RequiredKeys<User>; // "id"
-?
TypeScript의 맵핑된 타입에서 사용되는 특수 구문으로, 선택적 프로퍼티를 필수 프로퍼티로 변경한다.
-? 예제
interface User {
id: number;
name?: string;
email?: string;
}
type RequiredUser = {
[P in keyof User]-?: User[P];
};
const user: RequiredUser = {
id: 1,
name: "Alice",
email: "alice@example.com",
};
// 모든 프로퍼티가 필수입니다.
// user.id = undefined; // 오류 발생
infer를 활용해서 타입 추론하기
infer는 '추론하다'라는 의미를 지니고 있다.
보통 삼항 연산자를 사용한 조건문의 형태를 가진다.
extends로 조건을 서술하고, infer로 타입을 추론하는 방식을 취한다.
infer 키워드 원리
타입 스크립트가 엔진이 런타임 상황에서도 타입을 추론할 수 있도록 하고, 추론한 타입 값을 infer 타입 파라미터 U 에 할당해준다.
그리고 조건부 타입에 의해서 함수의 형태가 참이라면 파라미터를 아니라면 무시(never) 하는게 기본 동작이다.
infer 키워드는 제약 조건 extends가 아닌 조건부 타입 extends절에서만 사용 가능
// U 가 추론 가능한 타입이면 참, 아니면 거짓
T extends infer U ? X : Y
제네릭 T 에 { a: string, b: string } 객체 타입이 들어가서 infer U 에 의해 string이 추론되어 참이 되어 자기 자신의 타입 U가 반환됨을 알 수 있다.
type Foo<T> = T extends { a: infer U, b: infer U } ? U : never;
type T10 = Foo<{ a: string, b: string }>; // string
type T11 = Foo<{ a: string, b: number }>; // string | number
또 다른 간단한 예제이다.
type MyType<T> = T extends infer R ? R : null;
const a : MyType<number> = 123;
console.log(typeof a); //number
타입 변수 R은 MyType<number>에서 받은 타입 number가 되고, infer 키워드를 통해 타입 추론이 가능하게 된다.
위 코드에서 number타입은 당연히 타입 추론이 가능하니 R을 반환하는 것이다. 어떠한 타입도 추론이 되지 않는다면 null을 반환하게 된다. 콘솔을 통해 변수 a의 타입을 프린트해보면 number를 반환하고 123이란 숫자를 대입할 수 있다.
infer는 특히 함수를 추론하는데 있어 유용하게 사용된다.
함수 반환 타입 추론
infer를 사용하여 함수의 반환 타입을 추론할 수 있다.
반환형을 유추할 수 있으면 R, 아니면 never를 반환한다.
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;
function getUser() {
return {
id: 1,
name: "Alice",
age: 25,
};
}
type User = ReturnType<typeof getUser>; // { id: number; name: string; age: number }
배열 요소 타입 추론
infer를 사용하여 배열의 요소 타입을 추론할 수 있다.
type ElementType<T> = T extends (infer U)[] ? U : never;
type StringArray = string[];
type NumberArray = number[];
type StringType = ElementType<StringArray>; // string
type NumberType = ElementType<NumberArray>; // number
Promise 결과 타입 추론
infer를 사용하여 Promise의 결과 타입을 추론할 수 있다.
type AwaitedType<T> = T extends Promise<infer U> ? U : never;
type PromiseString = Promise<string>;
type PromiseNumber = Promise<number>;
type ResultString = AwaitedType<PromiseString>; // string
type ResultNumber = AwaitedType<PromiseNumber>; // number
함수 인자 타입 추론
infer를 사용하여 함수의 인자 타입을 추론할 수 있다.
type ParametersType<T> = T extends (...args: infer P) => any ? P : never;
function logMessage(message: string, level: number) {
console.log(`${level}: ${message}`);
}
type LogMessageParameters = ParametersType<typeof logMessage>; // [string, number]
복잡한 타입 내에서의 추론
infer를 사용하여 더 복잡한 타입 내에서 부분 타입을 추론할 수 있다.
type GetFirstArgument<T> = T extends (arg1: infer A, ...args: any[]) => any ? A : never;
function processUser(id: number, name: string, age: number) {
// ...
}
type FirstArgument = GetFirstArgument<typeof processUser>; // number
객체 프로퍼티 타입 추론
infer를 사용하여 객체의 특정 프로퍼티 타입을 추론할 수 있다.
type PropertyType<T, K extends keyof T> = T[K] extends infer P ? P : never;
interface User {
id: number;
name: string;
age: number;
}
type UserNameType = PropertyType<User, "name">; // string
type UserAgeType = PropertyType<User, "age">; // number
템플릿 리터럴 타입 활용하기
타입스크립트에서는 유니온 타입을 사용하여 변수 타입을 특정 문자열로 지정할 수 있다.
type HeaderTag = "h1" | "h2" | "h3" | "h4" | "h5";이 기능을 사용하면 컴파일타임의 변수에 할당되는 타입을 특정 문자열로 정확하게 검사하여 휴먼 에러를 방지할 수 있고, 자동 완성 기능을 통해 개발 생산성을 높일 수 있다.
타입스크립트 4.1부터 이를 확장하는 방법인 템플릿 리터럴 타입을 지원하기 시작했다.
템플릿 리터럴 타입은 자바스크립트의 템플릿 리터럴 문법을 사용해 특정 문자열에 대한 타입을 선언할 수 있는 기능이다.
위 유니온 타입을 사용한 예제는 아래와 같이 템플릿 리터럴 타입으로 사용할 수 있다.
type HeadingNumber = 1 | 2 | 3 | 4 | 5;
type HeaderTag = `h${HeadingNumber}`;
유니온 타입과 결합
템플릿 리터럴 타입은 유니온 타입과 결합하여 다양한 문자열 패턴을 정의할 수 있다.
type Size = "small" | "medium" | "large";
type Color = "red" | "green" | "blue";
type TShirt = `${Size} ${Color} t-shirt`;
const shirt1: TShirt = "small red t-shirt"; // 올바른 타입
const shirt2: TShirt = "medium green t-shirt"; // 올바른 타입
// const shirt3: TShirt = "extra large blue t-shirt"; // 오류 발생
함수와 결합
템플릿 리터럴 타입을 함수의 매개변수 타입으로 사용할 수 있다.
type EventName = "click" | "scroll" | "mousemove";
function handleEvent(element: Element, event: `on${Capitalize<EventName>}`) {
// 이벤트 처리 로직
}
handleEvent(document.getElementById("myDiv")!, "onClick"); // 올바른 타입
handleEvent(document.getElementById("myDiv")!, "onScroll"); // 올바른 타입
// handleEvent(document.getElementById("myDiv")!, "onhover"); // 오류 발생
객체 키와 결합
템플릿 리터럴 타입은 객체 키를 생성하는 데 유용하다.
type Person = {
id: number;
name: string;
age: number;
};
type ReadonlyPerson = {
readonly [K in keyof Person as `readonly_${K}`]: Person[K];
};
const person: ReadonlyPerson = {
readonly_id: 1,
readonly_name: "Alice",
readonly_age: 25,
};
// person.readonly_id = 2; // 오류 발생
Extract와 결합
템플릿 리터럴 타입을 Extract 유틸리티 타입과 함께 사용하여 특정 패턴의 타입을 추출할 수 있다.
type Routes = "/home" | "/about" | "/user/:id" | "/product/:id";
type DynamicRoutes = Extract<Routes, `/user/${string}` | `/product/${string}`>;
const route1: DynamicRoutes = "/user/123"; // 올바른 타입
const route2: DynamicRoutes = "/product/456"; // 올바른 타입
// const route3: DynamicRoutes = "/home"; // 오류 발생
템플릿 리터럴 타입과 맵핑된 타입
템플릿 리터럴 타입을 맵핑된 타입과 결합하여 더 유연한 타입 변환을 할 수 있다.
type User = {
id: number;
name: string;
email: string;
};
type ApiEndpoints = {
[K in keyof User as `get${Capitalize<K>}`]: () => User[K];
};
const api: ApiEndpoints = {
getId: () => 1,
getName: () => "Alice",
getEmail: () => "alice@example.com",
};
주의할 점
타입스크립트 컴파일러가 유니온을 추론하는 데 시간이 오래 걸리면 비효율적이기 때문에 타입스크립트가 타입을 추론하지 않고 에러를 내뱉을 때가 있다. 따라서 템플릿 리터럴 타입에 삽입된 유니온 조합의 경우의 수가 너무 많지 않도록 적절하게 나누어 타입을 정의하는 것이 좋다.
커스텀 유틸리티 타입 활용하기
커스텀 유틸리티 타입은 TypeScript의 타입 시스템을 활용하여 특정 상황에 맞는 유틸리티 타입을 정의하는 것이다. 이를 통해 코드의 재사용성을 높이고, 타입 안전성을 유지하면서 더 명확한 코드를 작성할 수 있다.
Nullable 타입
모든 프로퍼티를 선택적으로 만드는 Partial<T>와 비슷하게, 모든 프로퍼티를 null 또는 undefined로 만들 수 있는 Nullable<T> 타입을 정의해보자.
type Nullable<T> = { [P in keyof T]: T[P] | null | undefined };
interface User {
id: number;
name: string;
email: string;
}
type NullableUser = Nullable<User>;
const user: NullableUser = {
id: null,
name: undefined,
email: "alice@example.com",
};
NonNullableProperties 타입
객체의 모든 프로퍼티에서 null과 undefined를 제거하는 타입을 정의해보자.
type NonNullableProperties<T> = {
[P in keyof T]: NonNullable<T[P]>;
};
interface User {
id: number | null;
name: string | undefined;
email?: string;
}
type NonNullableUser = NonNullableProperties<User>;
const user: NonNullableUser = {
id: 1,
name: "Alice",
email: "alice@example.com",
};NonNullable<T>
TypeScript의 내장 유틸리티 타입 중 하나로, 타입 T에서 null과 undefined를 제거한 타입을 만든다.
변수나 프로퍼티가 null 또는 undefined가 될 수 없는 타입을 만들 때 유용하다.
RequireAtLeastOne 타입
객체에서 적어도 하나의 프로퍼티가 반드시 존재하도록 만드는 타입을 정의해보자.
type RequireAtLeastOne<T, Keys extends keyof T = keyof T> =
Pick<T, Exclude<keyof T, Keys>> &
{
[K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
}[Keys];
interface User {
id?: number;
name?: string;
email?: string;
}
type UserWithAtLeastOneProperty = RequireAtLeastOne<User, 'id' | 'name' | 'email'>;
const user1: UserWithAtLeastOneProperty = { id: 1 };
const user2: UserWithAtLeastOneProperty = { name: "Alice" };
const user3: UserWithAtLeastOneProperty = { email: "alice@example.com" };
// const user4: UserWithAtLeastOneProperty = {}; // 오류 발생
Mutable 타입
객체의 모든 프로퍼티를 변경 가능하게 만드는 타입을 정의해보자.
Mutable 타입
객체의 모든 프로퍼티를 변경 가능하도록 만드는 타입이다.
TypeScript 내장 객체에 포함되지는 않지만 직접 정의해서 사용할 수 있다.
TypeScript에서 객체의 프로퍼티는 기본적으로 변경 가능하지만, readonly 키워드를 사용하여 읽기 전용으로 만들 수 있다.
Mutable 타입은 이러한 읽기 전용 프로퍼티를 다시 변경 가능하게 바꾸는 데 사용된다.
type Mutable<T> = {
-readonly [P in keyof T]: T[P];
};
interface ReadonlyUser {
readonly id: number;
readonly name: string;
}
type MutableUser = Mutable<ReadonlyUser>;
const user: MutableUser = {
id: 1,
name: "Alice",
};
user.id = 2;
user.name = "Bob";-readonly와 +readonly
TypeScript의 맵핑된 타입에서 사용되는 특수 구문으로, 기존의 readonly 속성을 제거하여 프로퍼티를 변경 가능하게 만든다.
맵핑된 타입에서는 + 나 - 기호를 사용하여 속성의 수정(추가 또는 제거)을 명시할 수 있다.
-readonly와 +readonly
맵핑된 타입에서의 -와 + 사용
맵핑된 타입에서 -와 + 기호는 프로퍼티의 수정자를 추가하거나 제거하는 데 사용된다.
이를 통해 타입을 유연하게 변환할 수 있다.
-readonly: readonly 속성을 제거하여 프로퍼티를 변경 가능하게 만든다.
+readonly: 명시적으로 readonly 속성을 추가한다(기본값은 +readonly가 붙어 있는 것과 같다).
-?: 선택적 프로퍼티를 필수 프로퍼티로 변경한다.
+?: 필수 프로퍼티를 선택적 프로퍼티로 변경한다(기본값은 +?가 붙어 있는 것과 같다).
-readonly 예제
type Mutable<T> = {
-readonly [P in keyof T]: T[P];
};
interface ReadonlyUser {
readonly id: number;
readonly name: string;
readonly email: string;
}
type MutableUser = Mutable<ReadonlyUser>;
const user: MutableUser = {
id: 1,
name: "Alice",
email: "alice@example.com",
};
// 프로퍼티를 변경할 수 있습니다.
user.id = 2;
user.name = "Bob";
user.email = "bob@example.com";
+readonly 사용 예제
type ReadonlyAll<T> = {
+readonly [P in keyof T]: T[P];
};
interface User {
id: number;
name: string;
email: string;
}
type ReadonlyUser = ReadonlyAll<User>;
const user: ReadonlyUser = {
id: 1,
name: "Alice",
email: "alice@example.com",
};
// 프로퍼티를 변경할 수 없습니다.
// user.id = 2; // 오류 발생
// user.name = "Bob"; // 오류 발생
// user.email = "bob@example.com"; // 오류 발생
-?와 +? 사용 예제
type MakeOptional<T> = {
[P in keyof T]+?: T[P];
};
type MakeRequired<T> = {
[P in keyof T]-?: T[P];
};
interface User {
id: number;
name?: string;
email?: string;
}
type OptionalUser = MakeOptional<User>;
type RequiredUser = MakeRequired<User>;
const optionalUser: OptionalUser = {
id: 1, // id는 필수
};
const requiredUser: RequiredUser = {
id: 1,
name: "Alice", // name과 email도 필수
email: "alice@example.com",
};
DeepReadonly 타입
객체의 모든 중첩된 프로퍼티를 재귀적으로 읽기 전용으로 만드는 타입을 정의해보자.
type DeepReadonly<T> = {
readonly [P in keyof T]: DeepReadonly<T[P]>;
};
interface NestedUser {
id: number;
details: {
name: string;
email: string;
};
}
type ReadonlyNestedUser = DeepReadonly<NestedUser>;
const user: ReadonlyNestedUser = {
id: 1,
details: {
name: "Alice",
email: "alice@example.com",
},
};
// user.id = 2; // 오류 발생
// user.details.name = "Bob"; // 오류 발생
UnionToIntersection 타입
유니온 타입을 교집합 타입으로 변환하는 유틸리티 타입을 정의해보자.
type UnionToIntersection<U> =
(U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
type Union = { id: number } | { name: string } | { age: number };
type Intersection = UnionToIntersection<Union>;
const user: Intersection = {
id: 1,
name: "Alice",
age: 25,
};
불변 객체 타입으로 활용하기
as const와 keyof, typeof 연산자를 통해 객체 타입을 정확하고 안정하게 설정할 수 있다.
const user = {
id: 1,
name: "Alice",
email: "alice@example.com",
} as const;
// user 객체의 키를 타입으로 추출
type UserKeys = keyof typeof user; // "id" | "name" | "email"
// 타입 안전한 함수
function getUserProperty(key: UserKeys) {
return user[key];
}
const id = getUserProperty("id"); // 올바른 타입, id는 number 타입
const name = getUserProperty("name"); // 올바른 타입, name은 string 타입
const email = getUserProperty("email"); // 올바른 타입, email은 string 타입
// getUserProperty("age"); // 오류 발생, "age"는 유효한 키가 아님
interface와 keyof 연산자로 객체의 키값을 타입으로 추출하기
keyof 연산자는 객체 타입을 받아 해당 객체의 키값을 string 또는 number 리터럴 유니온 타입을 반환한다.
객체 타입으로 인덱스 시그니처가 사용되었다면 keyof는 인덱스 시그니처의 키 타입을 반환한다.
interface User {
id: number;
name: string;
email: string;
}
type UserKeys = keyof User; // "id" | "name" | "email"
// 함수에서 추출된 키 타입을 사용
function getProperty(obj: User, key: UserKeys) {
return obj[key];
}
const user: User = {
id: 1,
name: "Alice",
email: "alice@example.com",
};
const id = getProperty(user, "id"); // number 타입
const name = getProperty(user, "name"); // string 타입
const email = getProperty(user, "email"); // string 타입
// getProperty(user, "age"); // 오류 발생, "age"는 유효한 키가 아님
TypeScript typeof 연산자로 값을 타입으로 다루기
keyof 연산자는 객체 타입을 받는다. 따라서 객체의 키값을 타입으로 다루려면 값 객체를 타입으로 변환해야 한다.
이때 타입스크립트의 typeof 연산자를 활용할 수 있다.
자바스크립트에서는 typeof가 타입을 추출하기 위한 연산자로 사용된다면, 타입스크립트에서는 typeof가 변수 혹은 속성의 타입을 추론하는 역할을 한다.
타입스크립트의 typeof 연산자는 단독으로 사용되기보다 주로 ReturnType 같이 유틸리티 타입이나 keyof 연산자같이 타입을 받는 연산자와 함께 쓰인다.
const user = {
id: 1,
name: "Alice",
email: "alice@example.com",
};
type UserType = typeof user;
// type UserType = {
// id: number;
// name: string;
// email: string;
// };
const anotherUser: UserType = {
id: 2,
name: "Bob",
email: "bob@example.com",
};
// 오류 발생, UserType에 "phone" 프로퍼티는 존재하지 않음
// const invalidUser: UserType = {
// id: 3,
// name: "Charlie",
// email: "charlie@example.com",
// phone: "123-456-7890",
// };
Record 원시 타입 키 개선하기
Record 타입은 TypeScript에서 제공하는 유틸리티 타입 중 하나로, 특정 키와 값 타입을 가지는 객체를 정의할 때 사용된다. 이는 객체의 키 타입과 그 키에 해당하는 값 타입을 명확히 지정하는 데 유용하다.
type Record<K extends keyof any, T> = {
[P in K]: T;
};- K: 객체의 키 타입. 보통 string, number, symbol 중 하나를 사용.
- T: 객체의 값 타입.
아래와 같이 사용할 수 있다.
type Scores = Record<string, number>;
const scores: Scores = {
Alice: 90,
Bob: 85,
Charlie: 92,
};
console.log(scores.Alice); // 90
console.log(scores["Bob"]); // 85
이러한 Record는 예상치 못한 런타임 에러를 야기할 수 있다.
여기서는 Record를 명시적으로 사용하는 방안에 대해 알아보자.
무한한 키를 집합으로 가지는 Record
무한한 키를 집합으로 가지는 Record는 런타임에서 undefined가 되어 오류를 반환할 수 있다.
따라서 옵셔널 체이닝 등을 사용해 런타임 에러를 방지할 수 있다.
// 무한한 키를 가지는 Record 타입 정의
type MyRecord = Record<string, any>;
// Record 객체 생성
const myObject: MyRecord = {
user1: { name: "Alice", age: 25 },
user2: { name: "Bob", age: 30 },
};
// 옵셔널 체이닝을 사용하여 안전하게 프로퍼티 접근
const userName1 = myObject.user1?.name; // "Alice"
const userName2 = myObject.user2?.name; // "Bob"
const userName3 = myObject.user3?.name; // undefined (런타임 에러 발생하지 않음)
console.log(userName1); // "Alice"
console.log(userName2); // "Bob"
console.log(userName3); // undefined
// 중첩된 객체에서 옵셔널 체이닝 사용
const user1Age = myObject.user1?.age; // 25
const user3Age = myObject.user3?.age; // undefined (런타임 에러 발생하지 않음)
console.log(user1Age); // 25
console.log(user3Age); // undefined
옵셔널 체이닝(Optional Chaining)
TypeScript와 JavaScript에서 도입된 기능으로, 객체의 중첩된 속성에 안전하게 접근할 수 있도록 한다.
옵셔널 체이닝을 사용하면 존재하지 않는 속성에 접근할 때 발생하는 오류를 방지할 수 있다.
만약 중첩된 속성 중 하나가 null 또는 undefined이면, 전체 표현식이 undefined를 반환하고 실행이 중단된다.
옵셔널 체이닝 연산자는?.이다.
옵셔널 체이닝 예제
객체 속성 접근
const user = {
id: 1,
name: "Alice",
address: {
city: "Wonderland",
},
};
const cityName = user.address?.city; // "Wonderland"
const streetName = user.address?.street; // undefined (런타임 오류 발생하지 않음)
배열 요소 접근
const users = [
{ id: 1, name: "Alice" },
{ id: 2, name: "Bob" },
];
const firstUserName = users[0]?.name; // "Alice"
const thirdUserName = users[2]?.name; // undefined (런타임 오류 발생하지 않음)
함수 호출
const user = {
id: 1,
name: "Alice",
greet: () => "Hello!",
};
const greeting = user.greet?.(); // "Hello!"
const nonExistentMethod = user.nonExistentMethod?.(); // undefined (런타임 오류 발생하지 않음)
옵셔널 체이닝과 널 병합 연산자
널 병합 연산자(nullish coalescing operator)
TypeScript와 JavaScript에서 도입된 기능으로, 변수의 값이 null 또는 undefined인 경우에만 기본값을 반환하는 연산자이다.
널 병합 연산자는 ??로 표기한다.
const user = {
id: 1,
name: "Alice",
address: {
city: "Wonderland",
},
};
const cityName = user.address?.city ?? "Unknown City"; // city가 "Wonderland" 이므로 "Wonderland" 반환
const streetName = user.address?.street ?? "Unknown Street"; // street이 undefined이므로 "Unknown Street" 반환
console.log(cityName); // "Wonderland"
console.log(streetName); // "Unknown Street"
유닛 타입으로 변경하기 - 키가 유한할 때
키가 유한한 집합이라면 유닛 타입(다른 타입으로 쪼개지지 않고 오직 하나의 정확한 값을 가지는 타입)을 사용할 수 있다.
type Category = "한식" | "일식";
interface Food {
name: string;
// ...
}
const foodByCategory: Record<Category, Food[]> = {
한식: [{name: "제육덮밥"}, {name: "뚝배기 불고기"}],
일식: [{name: "초밥"}, {name: "텐동"}],
};
// Property '양식' does not exist on type 'Record<Category, Food[]>'
foodByCategory["양식"];이제 Category로 한식 또는 일식만 올 수 있기 때문에 양식을 키로 사용하면 에러가 발생한다.
이처럼 유닛 타입을 활용하면 개발 중에 유효하지 않은 키가 사용되었는지를 확인할 수 있다.
그러나 키가 무한해야 하는 상황에는 적합하지 않다.
Partial을 활용하여 정확한 타입 표현하기 - 키가 무한할 때
키가 무한한 상황에서는 Partial을 사용하여 해당 값이 undefined일 수 있는 상태임을 표현할 수 있다.
객체 값이 undefined일 수 있는 경우에 Partial을 사용해서 PartialRecord 타입을 선언하고 객체를 선언할 때 이것을 활용할 수 있다.
type PartialRecord<K extends string, T> = Partial<Record<K, T>>;
type Category = string;
interface Food {
name: string;
// ...
}
const foodByCategory: PartialRecord<Category, Food[]> = {
한식: [ name: "제육덮밥" }, { name: 뚝배기 불고기" }],
일식: [ name: "초밥" }, { name: "텐동" }],
};
foodByCategory["양식"]; // Food[] 또는 undefined 타입으로 추론
foodByCategory["양식"].map((food) => console.log(food.name)); // Object is possibly 'undefined'
foodByCategory["양식"]?.map ((food) => console.log(food.name)); // 0K
타입스크립트는 foodByCategory[key]를 FoodL] 또는 undefined로 추론하고, 개발자에게 이 값은 undefined일 수 있으니 해당 값에 대한 처리가 필요하다고 표시해준다. 개발자는 안내를 보고 옵셔널 체이닝을 사용하거나 조건문을 사용하는 등 사전에 조치할 수 있게 되어 예상치 못한 런타임 오류를 줄일 수 있다.
참고
타입스크립트 with 리액트
https://product.kyobobook.co.kr/detail/S000210716282
우아한 타입스크립트 with 리액트 | 우아한형제들 - 교보문고
우아한 타입스크립트 with 리액트 | 주니어 프론트엔드 개발자를 위한 타입스크립트+리액트 온보딩 가이드 우아한형제들은 자바스크립트와 자체 개발 웹 프레임워크인 WoowahanJS를 사용했었다. 그
product.kyobobook.co.kr
📘 타입스크립트 조건부 타입 완벽 이해하기
고급 타입 - Conditional Types 조건부 타입(conditional type)이란 입력된 제네릭 타입에 따라 타입을 결정 기능을 말한다. 위와 같이 조건부 타입 문법은 extends 키워드와 물음표 ? 기호를 사용하는데, 보
inpa.tistory.com
'STUDY > Typescript' 카테고리의 다른 글
| [Typescript] 비동기 호출 (0) | 2024.08.20 |
|---|---|
| [Typescript] 타입스크립트 컴파일 (0) | 2024.08.20 |
| [Typescript] 타입 확장하기 & 좁히기 (0) | 2024.07.30 |
| [Typescript] 값과 타입 (1) | 2024.07.24 |
| [Typescript] 타입스크립트 타입 선언 & 종류 (24) | 2024.07.23 |
