[엘리스 sw 엔지니어 트랙] 23일차 TypeScript

수업 23일차

오늘은 마이크로 소프트 에서만든 TypeScript를 배워보는 날이다. 처음에는 딱보고 어? 똑같은거 아니야? 라고 생각했지만 생각보다 까다로운게 많았다. 그래도 에러를 잘 뱉지 않는 Js보다는 딱딱 뱉어주는 Ts가 매력적으로 보인다.

이론

• 타입스크립트 : 자바스크립트를 확장하여 타입을 입힌 스크립트
  써야하는 이유 : 에러를 방지, 협업에 유리, 100% 호환, 라이브러리가 지원, 개발속도 향상, 점진적으로 변환
  public : 어디서나 접근 가능 , 필요한 경우에만 사용
  private : calss 내부에서만 접근가능, 상속받은 자식에서도 접근이 불가능
  protected : 부모자식 간 class 내부에서만 접근 가능, 상속받은 자식에서 접근가능
  static : 인스턴스화 하지 않고도 호출이 가능, 자식에 물려주지 않음
  접근자(getter,setter) : 함수로 getter/setter를 정의할 수도 있지만, 정해진 키워드를 사용할 수 있음
  추상클래스 : 클래스와 비슷한 형태지만, 정의만 있는 클래스, 상속을 통해서만 사용가능

TypeScript

자바스크립트의 확장된 언어라고 볼 수 있으며, 자바스크립트에 타입을 부여한 언어 입니다.
브라우저에서는 타입스크립트를 실행 할 수 없기 때문에 컴파일(complile) 과정을 거쳐야 합니다.

쓰는 이유

1. 에러의 사전 방지

// math.js
function sum(a, b) {
  return a + b;
}

// math.ts
function sum(a: number, b: number) {
  return a + b;
}

자바스크립트 같은 경우는

sum(10, 20); // 30
sum('10', '20'); // 1020

위와 같이 실행이 됩니다.
타입이 동적으로 바뀌기 때문에 사용자가 의도치 않게 사용을 하여도 에러가 나지 않습니다.

타입스크립트 같은 경우는

// math.ts
function sum(a: number, b: number) {
  return a + b;
}
sum('10', '20'); // Error: '10'은 number에 할당될 수 없습니다.

타입을 명시하기 때문에 의도치 않은 사용을 사전에 예방 할 수 있습니다.

2. 개발 생산성 향상

// math.js
function sum(a, b) {
  return a + b;
}
var total = sum(10, 20);
total.toLocaleString();

자바스크립트에서 total 에 toLocalString API 를 사용하기 위해서는 자동완성이 되지 않기 때문에 사용자가 number 라는 타입으로 가정하에 직접 입력해야 합니다.

하지만 타입스크립트는, 애초에 number 라는 타입을 선언하기 때문에 각 타입에 알맞은 API 가 자동완성을 통해서 사용자가 쉽게 접근을 할 수 있습니다.