TypeScript를 알아보자!

오늘은 회사개발자들이 모여서
우리 프로젝트에 추가하면 좋을 거 같은 기술들을 알아보았다.

선정된 주제는 아래와 같다.

일시 : 2202-8-2
안건 : 각자 정한 주제로 발표
정영훈 : TypeScript
윤선정 : TestCode
서버1 : CI / CD
허인주 : ORM

나는 TypeScript를 맡게 되었다.

자 그럼 모두 TypeScript의 세계로 들어가 보자~

위키를 보면 타입스크립트(TypeScript)는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이고 마이크로소프트에서 개발, 유지하고 있다고 한다.

더 자세한 내용은 해당 주소를 참고하면 된다. (https://ko.wikipedia.org/wiki/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8)

타입스크립트 장점

1. 에러 사전 방지

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

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

• test1

  sum(10, 20); // 30

  둘 다 정상 결과 출력

• test2

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

  math.js => 1020
  math.ts => 에러 출력!
  

3. 우리 프로젝트 백엔드에 적용한다면 타입 에러를 줄일 수 있음.
   아래와 같은 타입 에러 혹은 db에 값을 insert 시 나타나는 타입 에러를 줄일 수 있을 것으로 기대.
   

타입스크립트 단점

1. 현재 프로젝(프론트/백엔드) 적용 하려면 학습 비용 및 교체 비용이 큼

설치 및 세팅 방법

1. 프로젝트 생성

   $ mkdir ts-practice
   $ cd ts-practice
   $ yarn init -y # 또는 npm init -y

2. 타입스크립트 설정파일 생성 tsconfig.json

   {
     "compilerOptions": {
       "target": "es5",
       "module": "commonjs",
       "strict": true,
       "esModuleInterop": true
     }
   }

3. src/practice.ts

• 정상출력

  const message: string = 'hello world';
  console.log(message);

• 오류출력
  

Fundamentals

타입도 굉장히 많다...
더 알아보고 싶으면 타입스크립트 핸드북을 참고하자~
(https://joshua1988.github.io/ts/why-ts.html)

리소스

예제 및 이미지 참고: https://joshua1988.github.io/ts/why-ts.html#%EC%99%9C-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC-%EC%8D%A8%EC%95%BC%ED%95%A0%EA%B9%8C%EC%9A%94