TypeScript for JavaScript Programmers

TypeScript adds a additional layer on top of JS : type system

• main benefit of TypeScript is that it can highlight unexpected behavior in your code, lowering the chance of bugs.
• JS infers type for written code while running the program by the engine, but TS requires for programmers to write data types while coding

Type Composing

• Union : 여러 타입 중 하나일 수 있음을 선언

  type MyBool = true | false;
  type WindowStates = "open" | "closed" | "minimized";
  type LockStates = "locked" | "unlocked";
  type OddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;
  function getLength(obj: string | string[]) {
    return obj.length;
  }
  

• Generic : 타입에 변수를 제공

  • generic이 있는 경우 → 배열 안의 값을 설명할 수 있음
  • generic이 없는 경우 → 어떤 타입이든 포함할 수 있음

  type StringArray = Array<string>;
  type NumberArray = Array<number>;
  type ObjectWithNameArray = Array<{ name: string }>;
  
  interface Backpack<Type> {
    add: (obj: Type) => void;
    get: () => Type;
  }
  declare const backpack: Backpack<string>;
  const object = backpack.get(); // object는 string 값을 반환
  backpack.add(23); // backpack 변수는 string만 받을 수 있으므로, 숫자는 전달 불가
  

Structural Type System

구조적 타입 시스템에서 두 객체가 같은 형태를 가지면 같은 것으로 간주

• 형태 일치에는 일치시킬 객체 필드의 하위 집합만 사용
• point 객체를 Point 타입으로 선언하지 않아도, printPoint에 파라미터로 넣을 때, point 객체 필드의 하위 집합을 타입 검사에 사용 → point와 printPoint의 타입 형태가 같으므로 값이 잘 반환 됨
• 클래스와 객체가 형태를 따르는 방법에는 차이가 없음 (결국 Class도 function이자 object 이므로…)

interface Point {
  x: number;
  y: number;
}

function printPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}

// "12, 26"를 출력합니다
const point = { x: 12, y: 26 };
printPoint(point);

TS, the Basic

JS는 동적 타입만을 제공하며, 런타임에만 확실히 어떤 일이 벌어지는지 알 수 있음

→ 정적 타입검사를 도입해 코드를 실행하기 전에 예측하자!

→ 오타, 호출되지 않은 함수, 논리 오류, 예외가 아닌 실행 실패 등을 코드를 실행하기 전에 발견하고 잡을 수 음

tsc, TypeScript Compiler

npm install -g typescript

// tsc 에러 뜨면  -> package.json에 
tsc --noEmitOnError hello.ts

// tsconfig.json 생성
tsc --init

strict 모드 사용을 위해 package.json “script”에 명령어 추가

실행할 때, 뒤에 컴파일 할 ts 파일명만 추가하면 됨

TypeScript는 ES3라는 아주 구버전의 ECMAScript를 타겟으로 동작 → es2020으로 동작하도록 바꿔줄 수 있음

— strict

noImplicitAny : 타입이 any로 암묵적으로 추롲되는 변수에 대하여 오류를 발생시킴

strictNullChecks : null, undefined 처리 확인

Documentation - Everyday Types