TypeScript - 기본 제네릭, 유틸리티 유형, 키오프, null!

기본 제네릭

타입을 변수처럼 다루는 기능이다. 값이 아니라 타입을 나중에 정할 수 있게 해주는 문법

type Example<T = string> = {
// T의 기본값은 string이다. 
	value: T;
};

const a: Example = { value: "hello" };
const b: Example<number> = {value:42};

제네릭을 사용하는 이유

타입을 나중에 주입할 수 있는 재사용 가능한 코드를 만드는 것이다. 코드를 한 번 작성, 다양한 타입과 함께 안전하게 사용할 수 있도록 하기 위해서이다.

• 제네릭이 없을 때

function getFirstString(arr: string[]): string {
	return arr[0];
}

function getFirstNumber(arr: number[]): number {
	return arr[0];
}

= 중복이 많고 유지보수가 힘들다.

• 제네릭으로 계산

function getFirst<T>(arr: T[]): T {
	return arr[0];
}

getFirst<string>(["a", "b"]); // string
getFirst<number>([1, 2, 3]); // number

= 타입을 나중에 넘길 수 있음 (타입 안전한 코드 생성)

함수에서 기본 제네릭

function identity<T = string>(value: T): T {
  return value;
}

// 제네릭을 생략 → T는 string으로 추론됨
const x = identity("hi"); // T = string

// 명시적으로 지정 가능
const y = identity<number>(123); // T = number

클래스에서 가능

class Box<T = string> {
  content: T;
  constructor(content: T) {
    this.content = content;
  }
}

const strBox = new Box("Hello");  // T는 string
const numBox = new Box<number>(123); // T는 number

API에서 사용

async function fetchData<T>(url: string): Promise<T> {
  const res = await fetch(url);
  return res.json();
}

interface User {
  id: number;
  name: string;
}

interface Post {
  id: number;
  title: string;
}

const user = await fetchData<User>("/api/user/1");
const post = await fetchData<Post>("/api/post/1");

TypeScript 유틸리티 유형

let myCar: Required<Car> = {} // 객체의 모든 속성을 필수로 변경
Record : 특정 키 유형과 값 유형을 사용하여 객체 유형을 정의하는 단축키
const nameAgeMap: Record<string, number> = {} // 기록 객체 유형 정의
const bob: Omit<Person, 'age' | 'location'> = { // 객체 유형에서 키를 제거
  name: 'Bob'
  // `Omit` has removed age and location from the type and they can't be defined here
};
const bob: Pick<Person, 'name'> = {} //Pick 지정된 키를 제외한 모든 키를 객체 유형에서 제거
const value: Exclude<Primitive, string> = true; // Exclude 공용체에서 유형을 제거한다.
const point: ReturnType<PointGenerator> = {} // ReturnType 반환 유형 
const point: Parameters<PointPrinter>[0] = {} // 매개변수 유형을 배열로 추출한다.
const person: Readonly<Person> = {} // Readonly읽기 전용 

키오프

객체 유형에서 키 유형을 추출하는 데 사용된다.
type PersonKeys = keyof Person;
// 결과: "name" | "age"

• 다른 타입 도구와 함께 사용된다.

const person = { name: "Alice", age: 25 };

// typeof로 타입 추출
type Person = typeof person;

// keyof로 키 추출
type PersonKeys = keyof Person; // "name" | "age"

// 인덱싱으로 값 타입 추출
type PersonValueTypes = Person[PersonKeys]; // string | number

Null 및 Undefined

null TypeScript는 값을 처리하는 강력한 시스템을 갖고 있다. undefined

let value: string | undefined | null = null;
value = 'hello';
value = undefined;

기본 유형이므로 다른 유형처럼 사용할 수 있다.

무효화 병합

function printMileage(mileage: number | null | undefined)
?? 표현식에서 연산자와 함께 사용 가능하며 && 연산자를 사용하는 것과 유사하다.

null!

null검사 오류를 강제로 무시한다.
el!.innerText = "Hello";

템플릿 리터럴 타입

문자열 리터럴 타입을 문자열 조합으로 만들어내는 타입 문법이다.

type Color = "red" | "green" | "blue";

type HexColor<T extends Color> = `#${string}`;

인덱스 서명 레이블

인덱스 서명에 레이블을 지정할 수 있다.