[TypeScript] 타입 추론, 단언, 가드, 호환, 모듈화

 

 

 

 타입 추론

// 타입 추론 기본 1 (변수, 속성, 인자의 기본 값, 함수의 반환 값)
var a = 'abc';

function getB(b = 10) {
  var c = 'hi';
  return b + c;
}

10 + '10' //1010

// 타입 추론 기본 2 (인터페이스, 제네릭 이용)
interface Dropdown<T> {
  value: T;
  title: string;
}
var shoppingItem: Dropdown<string> = {
  value: 'abc',
  title: 'hello'
}

// 타입 추론 기본 3 (복잡한 구조)
interface Dropdown<T> {
  value: T;
  title: string;
}
interface DetailedDropdown<K> extends Dropdown<K>{
  description: string;
  tag: K;
}
var detailedItem: DetailedDropdown<string> = {
  title: 'hello',
  description: 'ab',
  value: 'a',
  tag: 'a'
}

// Best Common Type (가장 근접한 타입 추론)
var arr = [1, 2, true, true, 'a'];

 

 타입 단언

 

내가 정하는 타입으로 간주.

// 타입 단언(type assertion)
var a;
a = 20;
a = 'a'
var b = a as string; // b가 any에서 string으로 변함

타입스크립트보다 개발자 자신이 타입에 대해 더 잘 알고 있으니 내가 건들겠다.

// DOM API 조작
<div id="app">hi</div>
var div = document.querySelector('#app') as HTMLDivElement;
//if (div) {
  div.innerText
//}

 

 타입 가드

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

function introduce(): Developer | Person {
  return { name: 'ian', age: 28, skill: 'TypeScript' }
}

var ian = introduce();
console.log(tony.skill); // 오류: Union Type은 공통된 속성 name만 접근 가능

if ((ian as Developer).skill) {
  var skill = (ian as Developer).skill;
  console.log(skill);
} else if ((ian as Person).age) {
  var skill = (ian as Person).age;
  console.log(age);
}

타입 가드를 이용해보자!

// 타입 가드 정의
function isDeveloper(target: Developer | Person): target is Developer {
  return (target as Developer).skill !== undefined; // 존재할 때
}

if (isDeveloper(ian)) {
  console.log(ian.skill);
} else {
  console.log(ian.age);
}

 

 타입 호환

 

특정 타입이 다른 타입에 잘 맞는지를 의미.

// 인터페이스
interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
}
var developer: Developer;
var Person: Person;
// developer = person; 오류: 왼쪽 객체가 더 크기때문에 호환이 안됨
person = developer;

클래스도 마찬가지로 오른쪽보다 왼쪽이 더크면 오류가 발생.

// 인터페이스
interface Developer {
  name: string;
  skill: string;
}

// 클래스
class Person {
  name: string;
}

var developer: Developer;
var person: Person;
// developer = new Person(); 구조적 타이핑: 내부적 속성으로 비교

함수와 제네릭도 구조적으로 타입이 큰 범위와 작은 것과 호환되지 않는다.

// 함수
var add = function(a: number) {
}
var sum = function(a: number, b: number) {
}

// sum의 구조가 add보다 더 크다.
sum = add; // 호환 가능
// add = sum; 오류: 호환 불가

// 제네릭
interface Empty<T> {

}
var empty1: Empty<string>;
var empty2: Empty<number>;
empty1 = empty2;
empty2 = empty1;

interface NotEmpty<T> {
  data: T; // <string>, <number> 구조적 타입의 차이가 생김
}
var notempty1: NotEmpty<string>;
var notempty2: NotEmpty<number>;
//notempty1 = notempty2; 서로 호환되지 않음
//notempty2 = notempty1; 서로 호환되지 않음

 

 타입 모듈화

 

types.ts

export interface Todo {
  title: string;
  checked: boolean;
}

app.ts

import { Todo } from './types'

var item: Todo = {
  title: '할 일 1',
  checked: false,
}