타입어노테이션과 추론
타입어노테이션
타입 어노테이션은 어떤 값이 어떤 타입을 참조하고 있는지 개발자가 직접 타입을 작성해서 타입스크립트에게 알려주는 행동이다.
타입 추론
TypeScript는 코드에서 타입을 명시적으로 지정하지 않아도, 컴파일러가 코드의 문맥을 통해 타입을 자동으로 추론해줌
타입 추론은 TypeScript의 중요한 기능 중 하나로, 개발자가 타입을 명시적으로 지정(타입 어노테이션)하지 않아도 타입 안전성을 유지할 수 있게 도와준다.
제네릭(타입을 변수처럼 사용)
제네릭 : 타입을 마치 클래스나 함수 등에서 파라미터처럼 사용하는 것
function printAnything<T>(arr: T[]): void {
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
}
printAnything(['a', 'b', 'c']); // <string>을 써주지 않아도 타입 추론이 가능
printAnything([1, 2, 3]); // <number>를 써주지 않아도 타입 추론이 가능실전 유틸리티 타입
Generic 을 사용해서 타입을 effective 하게 쓸 수 있게 해주는 유틸리티 타입
유틸리티 타입
데이터를 이용해 간단한 계산을 하는 함수들을 Utility Function이라고 부르는 것처럼 타입을 통해 간단한 계산을 수행해 주는 타입을 유틸리티 타입이라고 한다.
Pick<T, K>
T에서 프로퍼티 K의 집합을 선택해 타입을 구성한다.
interface Todo {
title: string;
description: string;
completed: boolean;
}
type TodoPreview = Pick<Todo, 'title' | 'completed'>;
const todo: TodoPreview = {
title: 'Clean room',
completed: false,
};Omit<T, K>
T에서 모든 프로퍼티를 선택한 다음 K를 제거한 타입을 구성한다.
interface Todo {
title: string;
description: string;
completed: boolean;
}
type TodoPreview = Omit<Todo, 'description'>;
const todo: TodoPreview = {
title: 'Clean room',
completed: false,
};Exclude<T, U>
T에서 U에 할당할 수 있는 모든 속성을 제외한 타입을 구성합니다.
type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"
type T1 = Exclude<"a" | "b" | "c", "a" | "b">; // "c"
type T2 = Exclude<string | number | (() => void), Function>; // string | numberPartial<T>
T의 모든 프로퍼티를 선택적으로 만드는 타입을 구성함. 이 유틸리티는 주어진 타입의 모든 하위 타입 집합을 나타내는 타입을 반환한다.
전체가 아닌 일부의 값을 사용하기 위해서 사용된다.
interface Todo {
title: string;
description: string;
}
function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
return { ...todo, ...fieldsToUpdate };
}
const todo1 = {
title: 'organize desk',
description: 'clear clutter',
};
const todo2 = updateTodo(todo1, {
description: 'throw out trash',
});
console.log(todo1) //{ title: 'organize desk', description: 'clear clutter' }
console.log(todo2) //{ title: 'organize desk', description: 'throw out trash' }ReadOnly<T>
T의 모든 프로퍼티를 읽기 전용(readonly)으로 설정한 타입을 구성함, 즉 생성된 타입의 프로퍼티는 재할당할 수 없다.
interface Todo {
title: string;
}
const todo: Readonly<Todo> = {
title: 'Delete inactive users',
};
todo.title = 'Hello'; // 오류: 읽기 전용 프로퍼티에 재할당할 수 없음Record<K, T>
타입 T의 프로퍼티의 집합 K로 타입을 구성함. 이 유틸리티는 타입의 프로퍼티들을 다른 타입에 매핑 시키는 데 사용될 수 있다.
interface PageInfo {
title: string;
}
type Page = 'home' | 'about' | 'contact';
const x: Record<Page, PageInfo> = {
about: { title: 'about' },
contact: { title: 'contact' },
home: { title: 'home' },
};Extract<T, U>
T에서 U에 할당 할 수 있는 모든 속성을 추출하여 타입을 구성한다.
type T0 = Extract<"a" | "b" | "c", "a" | "f">; // "a"
type T1 = Extract<string | number | (() => void), Function>; // () => voidReturnType<T>
T 함수 타입의 반환 타입을 구성함. 함수의 반환 타입을 추론하는 데 유용하다.
function getUser() {
return { name: 'Alice', age: 25 };
}
type User = ReturnType<typeof getUser>;
const user: User = { name: 'Alice', age: 25 };Parameters<T>
T 함수 타입의 매개변수 타입을 튜플로 구성한다.
function log(message: string, userId: number): void {
console.log(`${userId}: ${message}`);
}
type LogParams = Parameters<typeof log>;
const params: LogParams = ['Hello, world!', 1];
log(...params); // 1: Hello, world!Awaited<T>
Awaited<T>는 Promise의 결과 타입을 추론하는 유틸리티 타입이다. 비동기 함수의 반환 타입을 처리하거나, Promise로 감싸진 값을 추출할 때 유용하다.
async function fetchData(): Promise<string> {
return "Hello, world!";
}
// fetchData 함수의 반환 타입 추론
type FetchDataType = Awaited<ReturnType<typeof fetchData>>;
const data: FetchDataType = await fetchData();
console.log(data); // "Hello, world!"이 Generic, Utility Type을 이용해서 하나의 타입으로 여러가지 타입을 만들거나, 함수를 기반으로 타입을 빼올 수 있다.
