내배캠 64일차

쥬·2023년 1월 16일

TIL typescript

내일배움캠프

목록 보기

69/142

사용한 github주소

TypeScript

타입스크립트란

타입스크립트(TypeScript)는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다.

타입스크립트에서 자신이 원하는 타입을 정의하고 프로그래밍을 하면 자바스크립트로 컴파일되어 실행할 수 있다.

타입스크립트는 모든 운영 체제, 모든 브라우저, 모든 호스트에서 사용 가능한 오픈 소스이다.

슈퍼셋

타입스크립트는 자바스크립트의 슈퍼셋, 즉 자바크립트의 + 알파(타입)이다.
즉, 자바스크립트와는 100% 호환이 되는건 물론이며, 이 외에 클래스,인터페이스 등 객체지향 프로그래밍 패턴을 제공한다.
자바스크립트의 단점은 줄여주고 대신 더 좋은 기능들을 감싼 형태라고 보면 된다.
superset

ES5 : 기본적으로 웹에서 사용하는 Javascript버전
ES6 : ES2015라고도 하며 ES5의 다음 버전이다
ESNext : ES6이후의 모든 버전을 일컫는 단어!

엄격한 문법사용

typescript

엄격한 문법 예제
const a: number = 1;
const a: number = '1'; # error
타입을 지정하기 때문에 다른 타입으로 선언하면 에러가 난다!


javascript

엄격하지 않은 문법 예제
const a = 1;
const a = '1';

자바스크립트 데이터 타입, 타입스크립트 데이터 타입

자바스크립트 데이터 타입
타입스크립트 데이터 타입

컴파일, 트랜스 파일 차이

타입스크립트 컴파일러(tsc)는 타입스크립 파일(.ts)를 자바스크립트 파일로 트랜스파일링한다.

컴파일은 일반적으로 소스 코드를 바이트 코드로 변환하는 작업을 의미한다.

타입스크립트 컴파일러는 타입스크립트 파일을 자바스크립트 파일로 변환하므로 컴파일보다는 트랜스파일링이 보다 적절한 표현이다.

타입스크립트 설정

모듈설치

글로벌 모듈로 설치가 필요

npm i typescript -g ⇒ 타입 스크립트 사용하기 위하여 설치, 설치 후 명령어는 tsc를 사용

npm ls -g ⇒ 글로벌 모듈 확인
tsc ⇒ [타입스크립트 명령어 보기](https://www.typescriptlang.org/docs/handbook/compiler-options.html) 
tsc —version ⇒ 설치된 타입스크립트 버전 보기 
tsc —init ⇒ tsconfig.json 생성(자동 셋팅)

tsconfig.json

타입스크립트 설정 파일은 타입스크립트를 자바스크립트로 변환할 때의 설정을 정의해놓는 파일입니다.

프로젝트에서 tsc 라는 명령어를 치면 타입스크립트 설정 파일에 정의된 내용을 기준으로 변환 작업(컴파일)을 진행합니다.

//간단하게 설정
{
  "compilerOptions": {
    "lib": ["ES2021", "dom"], 
    // esModuleInterop 속성이 위의 코드 처럼 true로 설정될 경우, ES6 모듈 사양을 준수하여 CommonJS 모듈을 가져올 수 있게 됩니다.
    // e.g. typescript-test.ts => import express from "express"
    "esModuleInterop": true,
    "target": "ES2021",
  }
}

참고

**타입스크립트 설정 파일 -** https://joshua1988.github.io/ts/config/tsconfig.html#타입스크립트-설정-파일-tsconfig-json
Recommended Node TSConfig settings - https://github.com/microsoft/TypeScript/wiki/Node-Target-Mapping
lib 옵션의 사용 - https://norux.me/59
lib dom 옵션 - https://velog.io/@0715yk/TypeScript-lib-d.ts
What is a tsconfig.json - https://www.typescriptlang.org/ko/docs/handbook/tsconfig-json.html
Compiler Options - https://www.typescriptlang.org/tsconfig

타입스크립트를 사용해야하는 이유

에러의 사전 방지

코드 가이드 및 자동 완성(개발 생산성 향상)

에러의 사전 방지

math.js

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

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

=> 문자열도 그대로 더해버려서 오류가 발생할 가능성이 있음!

math.ts

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

sum(10, 20); // 30
sum('10', '20'); // Argument of type 'string' is not assignable to parameter of type 'number'.ts(2345)

=>애초부터 문자열은 불가능하게 만들어서 오류가 날 일을 만들지 않음!

코드 가이드 및 자동 완성(개발 생산성 향상)

math2.js

// 코드 자동 완성과 가이드
function sum2(a, b) {
    return a + b;
}
var total = sum2(10, 20);
console.log(total);
console.log(total.toString());

math2.ts

// 코드 자동 완성과 가이드

function sum2(a: number, b: number): number {
  return a + b;
}

var total = sum2(10, 20);

console.log(total);
console.log(total.toString());