본 포스트는 인프런의 타입스크립트 입문-기초부터 실전까지 강의(링크)를 듣고 정리한 내용입니다.


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

interface Developer {
  name: string;
  skill: string;
}
 
interface Person {
  name: string;
}
 
let developer1: Developer;
let person1: Person;
developer1 = person1
  • 타입 호환은 오른쪽에 있는 type이 더 많은 속성을 가지거나 구조적으로 클 때 사용 가능
  • 때문에 위의 예는 developer1이 더 많은 속성을 가지므로 불가능

반대로 아래 경우는 가능

let developer1: Developer;
let person1: Person;
person1 = developer1

interface Ironman {
  name: string;
}
 
class Avengers {
  name: string;
}
 
let i: Ironman;
i = new Avengers(); // 가능하다!
  • interface와 class는 다르다.
  • 둘 안에 든 속성과 type이 같으므로 호환

const add = function (a: number) {
  // ...
}
 
const sum = function (a: number, b: number) {
  // ...
}
  • sum함수의 구조가 add함수의 구조보다 크다.
  • 인자를 더 크게 포함

sum = add; // 가능; add가 sum보다 더 커서 커버 가능
add = sum; // 불가능

interface Empty<T> {
  // ...
}
let empty1: Empty<string>;
let empty2: Empty<number>;
empty1 = empty2;
empty2 = empty1;
  • 두 generic의 사용에서 type이 달라도 사용하지 않는다.
  • empty1과 empty2는 호환

interface NotEmpty<T> {
  data: T;
}
let notempty1: NotEmpty<string>;
let notempty2: NotEmpty<number>;
notempty1 = notempty2;
notempty2 = notempty1;
  • 두 generic의 사용에서 type이 다르면 내부 속성의 이름은 같아도 type이 다르다.
  • notempty1과 notempty2는 다른 속성을 가진 객체이므로 호환되지 않는다.

모듈: 전역 변수와 구분되는 자체 유효 범위

  • 현업에서는 정의한 type들을 하나의 파일에 몰아넣어 사용
  • 유지보수에 더 유리

JS의 import/export를 똑같이 사용하여 파일간 변수, 함수 이동

// ts-modules/types.ts
export interface Todo {
  title: string;
  checked: boolean;
}

interface의 앞에 export를 붙여서 다른 모듈에서 사용할 수 있도록 export


// ts-module/app.js
import { Todo } from './types'
 
const item: Todo = {
  title: '할 일 1',
  checked: false
}

types.ts의 interface를 사용하려는 경우 경로에서 interface import


// ts-module/types.ts
interface PhoneNumberDictionary {
  [phone: string]: {
    num: number;
  };
}
 
interface Contact {
  name: string;
  address: string;
  phones: PhoneNumberDictionary;
}
 
enum PhoneType {
  Home = 'home',
  Office = 'office',
  Studio = 'studio',
}
 
export { PhoneNumberDictionary, Contact, PhoneType };

한 줄로 간단하게 export 가능


마찬가지로 한 줄로 간단하게 import 가능

// ts-module/index.ts
import { PhoneNumberDictionary, Contact, PhoneType } from './types'