TIL.Typescript_0415

Typescript는 왜 공부해야 할까?

Superset of Javascript

동적 언어인 Javascript는 Runtime에서 타입을 결정하지만, 정적 언어인 Typescript는 Complie 과정에서 타입을 결정합니다.

즉, Javascript의 경우 에러를 user가 발견하는 확율이 높고, Typescript는 개발 환경에서 에러를 발견할 수 있는 확율이 높습니다.

코드를 작성하는 중에 에러를 핸들링하는 것과 모든 코드를 작성하고 에러를 확인하는 것은 생산성 측면에서 대단한 차이를 줍니다.

간단한 코드를 작성하는 경우 human error가 발생할 확율이 그리 높지 않지만 코드가 방대해 지는 경우 코드도 결국 사람이 작성하는 것이기 때문에 human error가 발생할 확율이 높습니다. 이럴 때 Typescript는 매우 강력한 도구가 될 수 있습니다.

타입 정의

1) Javascript에서 우리는 아래처럼 변수를 선언했습니다.

let myName = "peter"

하지만 Typescript에서는 아래와 같이 변수를 선언합니다.

let myName: string = "peter"

2) 객체 타입의 변수의 경우 interface를 사용합니다.

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

const user: User = {
  name: "peter",
  age: 22
}

3) Javascript는 class를 지원하고 객체 지향 프로그래밍을 지원하기 때문에 Typescript에서도 아래와 같이 class를 작성할 수 있습니다.

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

class UserAccount {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

const user: User = new UserAccount("peter", 22)

Union

단순한 타입을 조합하여 literal한 string, number 등을 정의할 수 있습니다.

// 문자열 리터럴 타입 (Union types)
type Score = 'A' | 'B' | 'C' | 'F'

interface User {
    name: string
    age: number
    [grade: number]: Score

let user: User = {
    name: "peter",
    age: 22,
    1: "A",
    2: "B"
}

Generic

아래와 같은 함수가 있다고 생각해 봅시다.
숫자로 이뤄진 배열만 parameter로 받고 있기 때문에 ["1", "2"]와 같이 문자로 이뤄진 배열을 함수에 넣으면 에러가 발생합니다.

function getSize (arr: number[]) : number {
  return arr.length
}

이럴 때 우리는 Generic를 사용할 수 있습니다. <T>를 함수 이름에 붙여서 다양한 Type을 사용할 수 있도록 합니다.

function getSize<T> (arr: T[]) : number {
  return arr.length
}

// 에러 없이 아래 두 함수를 호출할 수 있습니다.
const arr1 = [1, 2, 3]
getSize<number> (arr1)

const arr2 = ["1", "2", "3"]
getSize<string> (arr2)

Generic을 활용하면 하나의 interface를 설정하면 다양한 모습의 객체를 만들 수 있습니다.

interface Mobile <T> {
  name: string
  price: number
  option: T
}

const mobile1: Mobile <string> = {
  name: "iPhon12",
  price: 1000
  option: "Wifi"
}

const mobile2: Mobile <{color: string coupon: boolean}> = {
  name: "iPhon13",
  price: 1100
  option: {color: "red", coupon: false}
}

Structural Type System

Typescript의 큰 특징 중 하나는, 타입의 모양을 통해 타입을 checking할 수 있다는 점입니다.

interface Point {
  x: number;
  y: number;
}
 
function logPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}
 
const point = { x: 12, y: 26 };
logPoint(point);

위 그림에서 point 객체의 경우, 타입을 정해주지 않았지만 Point interface에서 정의된 타입으로 유추하여 에러로 확인하지 않습니다.

다만. 아래와 같이 타입의 모양으로 유추할 수 없는 객체가 parameter로 들어오게 된다면 에러로 확인하게 됩니다.

const color = { hex: "#187ABF" };
logPoint(color);