[TypeScript] 맘대로 기록.

1. 에러를 사전 방지할 수 있다.

function add(a: number, b: number): number {
  return a + b;
}

add(10, '20'); // Error!

잘못된 타입의 파라미터 사용, 의도하지 않은 리턴값 등을 사전에 방지할 수 있음.

 

 

2. 함수 구조 정의가 가능하다.

interface SumFunc {
  (a: number, b: number): number;
}

var sum = SumFunc;
sum = function(a: number, b: number): number {
  return a + b;
}

 

 

3. 인덱싱 정의.

interface StringArray {
  [index: number]: string; // index는 number 타입, 배열의 요소는 string 타입
}

var arr: StringArray = ['a', 'b', 'c'];
arr[0] = 10; // Error!

 

 

4. 인터페이스 딕셔너리 패턴

interface StringRegexDic {
  [key: string]: RegExp;
}

var obj: StringRegexDic = {
  cssFile: /\.css$/,
  jsFile: /\.js$/,
}

 

 

5. 인터페이스 확장

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

interface Developer extends Person {
  language: string;
}

var hong: Developer = {
  language: "kor",
  name: "hong",
  age: "13",
}

 

 

타입 별칭

타입 별칭은 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미.

// string 타입을 사용할 때
const name: string = "hong";

// 타입 별칭을 사용할 때
type MyName = string;
const name: MyName = "hong";

// interface
type Developer = {
  name: string;
  skill: string;
}

// generic
type User<T> = {
  name: T
}

 

 

type vs interface

타입은 인터페이스와 다르게 타입의 확장이 불가능하다. 되도록이면 인터페이스를 사용하자.

 

 

6. keyof (https://inpa.tistory.com/889)

만일 함수의 매개변수 key가 반드시 매개변수 obj의 제네릭 타입 T(객체를 받게되는)에 존재하여야 할때, keyof T 를 하면 객체의 key 값을 모아 유니온 타입으로 만들 수 있다.

function getProperty<T, K extends keyof T>(obj: T, key: K) {
    return obj[key];
}
 
let x = { a: 1, b: 2, c: 3, d: 4 };
 
getProperty(x, "a"); // 성공
getProperty(x, "m"); // 오류: 인수의 타입 'm' 은 'a' | 'b' | 'c' | 'd'에 해당되지 않음.

 

 

7. 타입 단언 문법 (https://ahnheejong.gitbook.io/ts-for-jsdev/06-type-system-deepdive/type-assertion)

value as Type 문법을 사용해 값 value를 Type 타입으로 단언할 수 있다. 이 표현은 다음과 같은 의미를 갖는다.

value가 어떤 타입인지는 내가 가장 잘 알아. 책임은 프로그래머인 내가 질테니, 네가 갖고 있는 정보는 다 무시하고 value를 Type 타입의 값이라 생각하고 진행해.

일례로 아래 코드는 Animal 타입의 값을 Fish로 단언한다. 원래대로라면 Dog와 Insect 타입에는 swim 메소드가 없다는 에러가 났겠지만, 타입 단언으로 인해 컴파일러는 animal을 Fish 타입으로 해석하고, 타입 에러 없이 컴파일된다.

interface Dog {
  legs: 4;
  bark(): void;
}

interface Insect {
  legs: number;
  creepy: boolean;
}

interface Fish {
  swim(): void;
}

type Animal = Dog | Insect | Fish;

function doSomethingWithAnimal(animal: Animal) {
  (animal as Fish).swim();
}

 

 

주의할 점은 타입 단언은 타입 에러를 없애줄 뿐 런타임 에러를 막아주지 않는다는 점이다. 오히려 그 반대인데, 컴파일 타입에 잡을 수 있는 에러를 없앰으로서 원래대로면 생기지 않았을 런타임 에러를 발생시킬 수 있다. 실제로 위 함수는 런타임에 Dog 혹은 Insect 타입 값을 받으면 터질 것이다.