Typescript 개요 to javascript

타입스크립트는 자바스크립트 위에 레이어로서 자리잡고 있음

자바스크립트의 기능들을 제공하면서 그 위에 자체 레이어를 추가 - 이 레이어가 타입스크립트

 

자바스크립트는 이미 string, number, object, undefined 같은 원시 타입을 가지고 있지만, 전체 코드베이스에 일관되게

할당되었는지는 미리 확인해 주지 않음

이는 이미 존재하고 잘 동작하는 자바스크립트 코드는 동시에 타입스크립트 코드라는 의미지만,

타입스크립트의 타입 검사기는 사용자가 생각한 일과 자바스크립트가 실제로 하는 일 사이의 불일치를 강조하지 못함

 

타입 추론

타입스크립트는 자바스크립트 언어를 알고 있으며 대부분의 경우 타입을 생성

변수를 생성하면서 동시에 특정 값에 할당하는 경우, 타입스크립트는 그 값을 해당 변수의 타입으로 사용

 

타입 정의

자바스크립트는 다양한 디자인 패턴을 가능하게 하는 동적 언어

몇몇 디자인 패턴은 자동으로 타입을 제공하기 힘들 수 있는데 이럴 때 타입스크립트는 명시 가능한 자바스크립트 언어의 확장을 지원

interface User {
  name: string;
  id: number;
}
// ---cut---
const user: User = {
  name: "Hayes",
  id: 0,
};

* 인터페이스에 맞지 않는 객체를 생성 시 경고

 

자바스크립트는 클래스와 객체 지향 프로그래밍을 지원하기 때문에, 타입스크립트 또한 동일

- 인터페이스는 클래스로도 선언 가능

interface User {
  name: string;
  id: number;
}
class UserAccount {
  name: string;
  id: number;
  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}
const user: User = new UserAccount("Murphy", 1);

 

타입 구성

여러가지 타입을 이용하여 새 타입을 작성하기 위해 일상적인 코드에서 가장 많이 사용되는 두 가지 코드

 

- 유니언 (Unions) : 타입이 여러 타입 중 하나일 수 있음을 선언하는 방법

ex) boolean 타입을 true 또는 false 로 설명

type Mybool = true | false;

 

유니언 타입이 가장 많이 사용된 사례 : 값이 다음과 같이 허용되는 string 또는 number 리터럴집합

type WindowStates = "open" | "closed" | "minimized";
type LockStates = "locked" | "unlocked";
type OddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;

 

유니언은 다양한 타입을 처리하는 방법을 제공, 예를 들어 array 또는 string 을 받는 함수

function getLength(obj: string | string[]) {
  return obj.length;
}

 

typeof obj === "string" 을 이용하여 string 과 array 를 구분할 수 있으며

타입스크립트는 객체가 다른 코드 경로에 있음을 알게 됨

function wrapInArray(obj: string | string[]) {
  if (typeof obj === "string") {
    return [obj];
//          ^?
  } else {
    return obj;
  }
}

 

- 제네릭 (Generics) : 타입에 변수를 제공하는 방법 (ex. 배열)

제네릭이 없는 배열은 어떤 것이든 포함 가능, 제네릭이 있다면 배열은 배열 안의 값을 설명  가능

type StringArray = Array<string>;
type NumberArray = Array<number>;
type ObjectWithNameArray = Array<{ name: string }>;

 

// @errors: 2345
interface Backpack<Type> {
  add: (obj: Type) => void;
  get: () => Type;
}
// 이 줄은 TypeScript에 `backpack`이라는 상수가 있음을 알리는 지름길이며
// const backpack: Backpack<string>이 어디서 왔는지 걱정할 필요가 없습니다.
declare const backpack: Backpack<string>;
// 위에서 Backpack의 변수 부분으로 선언해서, object는 string입니다.
const object = backpack.get();
// backpack 변수가 string이므로, add 함수에 number를 전달할 수 없습니다.
backpack.add(23);

 

구조적 타입 시스템 (System Type System)

덕 타이핑 or 구조적 타이핑 : 타입스크립트의 핵심 원칙 중 하나 타입 검사가 값이 있는 형태에 집중

 

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

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);

* point 변수는 Point 타입으로 선언된 적이 없지만 타입스크립트는 타입 검사에서 두 형태를 비교, 같기 때문에 통과

 

형태 일치에는 일치시킬 객체의 필드 하위 집합만 필요

// @errors: 2345
interface Point {
  x: number;
  y: number;
}
function printPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}
// ---cut---
const point3 = { x: 12, y: 26, z: 89 };
printPoint(point3); // prints "12, 26"
const rect = { x: 33, y: 3, width: 30, height: 80 };
printPoint(rect); // prints "33, 3"
const color = { hex: "#187ABF" };
printPoint(color);

 

구조적으로 클래스와 객체가 형태를 따르는 방법에는 차이가 없음

객체 또는 클래스에 필요한 모든 속성이 존재한다면, 타입스크립트는 구현 세부 정보에 관계 없이 일치하게 봄

// @errors: 2345
interface Point {
  x: number;
  y: number;
}
function printPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}
// ---cut---
class VirtualPoint {
  x: number;
  y: number;
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}
const newVPoint = new VirtualPoint(13, 56);
printPoint(newVPoint); // prints "13, 56"