[TypeScript] 고급타입

고급 타입

intersection Types

두 가지 타입을 교차해서 사용할 때 사용한다.

type Admin = {
  name: string;
  privileges: string[];
};


type Employee {
  name: string;
  startDate: Date;
}

type ElevatedEmployee = Admin & Employee;

const e1: ElevatedEmployee = {
  name: 'Max',
  privileges: ['create-server'],
  startDate: new Date()
}

Type Guards

유니언 타입을 도와 특정 타입을 발라내는 역할을 한다. 유연성을 가지는 건 좋지만 런타임 시 정확히 어떤 타입을 얻게 될지 알아야하는 경우가 많기 때문이다.

typeof으로 체크하기

function add(a: Combinable, b: Combinable) {
  if (typeof a === 'string' || typeof b === 'string') return a.toString()  + b.toString();
  return a + b;
}

속성으로 체크하기

function printEmployeeInformation(emp: UnknownEmployee) {
  console.log('Name : ' +  emp.name);
  if ('privileges' in emp) {
    console.log('Privileges ' + emp.privileges);
  }
  if ('startDate' in emp) {
    console.log('startDate:' + emp.startDate);
  }
}

인스턴스인지 확인하기

클래스의 경우만 가능

interface Transport {
  drive():void;
}
class Car implements Transport{ 
  drive() {
    console.log('Driving ...');
  }
}

class Truck implements Transport{
  drive() {
    console.log('Driving a truck ...');
  }

  loadCargo(amount: number) {
    console.log('Loading cargo ... ' + amount);
  }
}


type Vehicle = Car | Truck;

const v1 = new Car();
const v2 = new Truck();

function useVehicle(vehicle: Vehicle) {
  vehicle.drive();
  if (vehicle instanceof Truck) {
    vehicle.loadCargo(1000);
  }
}

useVehicle(v1);
useVehicle(v2);

즉 타입가드는 특정 속성이나 메소드를 사용하기 전에 그것이 존재하는지 확인하거나 타입을 사용하기 전에 이 타입으로 어떤 작업을 수행할 수 있는지를 확인하는 방법이다.

Discriminated Unions

객체 리터럴로 타입을 추가하여 switch 문을 사용해 객체 유형을 분리하는 패턴이다.

interface Bird {
  type: 'bird';
  flyingSpeed: number;

}

interface Horse {
  type: 'horse';
  runningSpeed: number;
}

type Animal = Bird | Horse;

function moveAnimal(animal: Animal) {
  let speed;
  switch (animal.type) {
    case 'bird':
      speed = animal.flyingSpeed;
      break;
    case 'horse':
      speed = animal.runningSpeed;
      break;
  }
  console.log('Moving at speed ' + speed);
}

moveAnimal({type: 'bird', flyingSpeed: 10});

Type Casting

타입스크립트는 HTML을 살펴보고 분석하지 못한다.

따라서 형변환을 통해서 HTML 데이터의 값을 특정해줄 수 있다.

const userInputElement = <HTMLInputElement>document.getElementById('user-input')!;
userInputElement.value = 'Hi There!';

리액트 프로젝트의 경우 JSX와 혼동될 수 있으므로 as를 사용한다.

const userInputElement = document.getElementById('user-input')! as HTMLInputElement;

if문으로 null 값을 체크하는 경우

const userInputElement = document.getElementById('user-input');
if (userInputElement) {
  (userInputElement as HTMLInputElement).value = 'Hi There!';
}

Index

객체의 속성의 이름과 개수를 한정하고 싶지 않지만 한정해야하는 타입이 있는 경우 index를 사용한다. [] 안에 속성 이름과 타입을 적는다. boolean는 인덱스로 사용할 수 없다.

interface ErrorContainer { // { email: 'Not a valid email', username: 'Must start with a charactor'}
  [prop:  string]: string;
}

const errorBag: ErrorContainer = {
  error: 'Not a valid email',
  username: 'Must start with a charactor',
}

Function Overloads

타입스크립트가 자체적으로 타입을 추론하지 못하는 경우에 유용하며 다양한 인수 타입에 따른 리턴 타입을 조합해서 오버로드 할 수 있다.

원래 함수의 위에 함수 인자 타입과 리턴 타입을 정의한다.

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: Combinable, b: Combinable) {
  if (typeof a === 'string' || typeof b === 'string') return a.toString()  + b.toString();
  return a + b;
}

const result = add('Max' , 'Schwarz');
result.split(' ');

선택적 체이닝 (optional chaining)

optional chaining은 객체 테이터의 중첩된 속성과 객체에 안전하게 접근할 수 있게 해준다. 존재하지 않을 가능성이 있는 속성 혹은 객체에 ?를 붙여 해당 객체 혹은 속성이 존재할 때만 접근하도록 한다.

const fetchedUserData = {
  id: 'u1',
  name: 'Max',
  job: {title: 'CEO', description: 'My Opinion'},
}

console.log(fetchedUserData?.job?.title);

 

Null 병합

특정 값이 null 혹은 undeinfed 일 경우에만 fallback 처리를 하기 위해서 사용한다. 해당 변수 뒤에 ?? 를 붙이고 기본 값을 적는다.

const userInput = null;
const storedData = userInput ?? 'DEFAULT';
console.log(storedData);