{Typescript} 10. type assertion / 11.utility / 12. mapped-type

Jerry·2021년 5월 30일

language & framework study

목록 보기

4/28

10. type assertion : 타입 단언

컴파일러에서 의도한 타입으로 추론이 되지 않을 경우 명시적으로 타입을 정해줌
런타임에는 영향을 미치지 않는것이 타입캐스팅과 차이가 있음

non-null assertion
타입추론으로 null 발생이 가능한 값인, if절로 null처리할 필요없이 해당 값이 null이 아니란 단언을 '!'를 이용해 할 수 있음

...
    li.appendChild(span);
    li.appendChild(p);
    deathsList!.appendChild(li);

상위 interface로 추론이 된 경우, 타입단언으로 적합한 type을 명시해줌

// document.querySelector는 HTMLElement 타입을 반환함.
function $(selector: string) {
  const element = document.querySelector(selector);
  return element;
}

/* <p> 태그에 해당하는 $('.deaths')는 
HTMLParagraphElement으로 타입 단언을 해주어야 해당 속성을 컴파일 오류 없이 사용할 수 있음
*/
const deathsTotal = $('.deaths') as HTMLParagraphElement;

[참고] 타입단언 대신 제네릭을 이용한 타입추론

function $<T extends HTMLElement = HTMLDivElement>(selector: string) {
  const element = document.querySelector(selector);
  return element as T;
}

const confirmedTotal = $<HTMLSpanElement>('.confirmed-total');

11.utility

타입스크립트는 일반적인 타입 변환을 위한 몇가지 utility를 제공한다.

1) Partial< T >

주어진 타입 T의 모든 subset 타입을 생성

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",});

2) Readonly< T >

타입 T의 모든 property가 readonly인 타입 생성
=> 초기화 후 재할당 불가

interface Todo {
  title: string;
}

const todo: Readonly<Todo> = {
  title: "Delete inactive users",
};

// 재할당 불가
// todo.title = "Hello";

3) Omit<T, Keys>

타입 T에서 keys 속성을 뺀 타입을 생성

interface Todo {
  title: string;
  description: string;
  completed: boolean;
  createdAt: number;
}

type TodoInfo = Omit<Todo, "completed" | "createdAt">;

const todoInfo: TodoInfo = {
  title: "Pick up kids",
  description: "Kindergarten closes at 5pm",
};

4) Pick<T, Keys>

타입 T에서 keys에 해당하는 속성으로만 이루어진 타입을 생성

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type TodoPreview = Pick<Todo, "title" | "completed">;

const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};

12. mapped-type

이미 정의되어있는 타입의 속성을 가져와서 해당 속성을 키로 정의한 타입

// mapped type 정의 방법
{ [ P in K ] : T }
{ [ P in K ] ? : T } // subset 표현가능
{ readonly [ P in K ] : T }
{ readonly [ P in K ] ? : T }

//예시 1.
type Heroes = 'Hulk' | 'Capt' | 'Thor'
type HeroAges = { [K in Heroes]: number }

const ages: HeroAges = {
    Hulk: 33,
    Capt: 100,
    Thor:1000,
}

// 예시 2.
interface Person {
  age: number;
  name: string;
}

const ageOnly: Subset<Person> = { age: 23 };
const ironman: Subset<Person> = { age: 23, name: 'jerry' };
const empty: Subset<Person> = {};