타입스크립트 (TypeScript) 1일차

이번주부터 타입스크립트를 배우게되었다. 강의 들으면서 내용 정리해보자.

 

1. 타입스크립트의 정의

요약: 타입스크립트는 자바스크립트에 타입을 부여한 언어다.

타입스크립트(TS)란, 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다.

이때 슈퍼셋은 자바스크립트(JS)의 플러스알파이다.

JS와 호환되며, 이 외에 클래스, 인터페이스 등의 객체 지향 프로그래밍 패턴을 제공한다.

다시 말해 JS의 장점을 늘리고 단점을 줄인 형태이다.

 

TS는 JS 엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계된 언어이다.

때문에 JS로 작성된 프로그램을 TS로 동작할 수 있다.

TS에서 원하는 타입(any 타입 제외)을 정의하고 프로그래밍하면 JS로 컴파일되어 실행할 수 있다.

 

간단하게 말해서, TS는 JS + Type 이다.

JS는 엄격하지 않은 문법이지만, TS는 엄격한 문법이다.

 

2. 타입스크립트의 필요성

자바스크립트 사용할 때 개발자가 실수를 하곤 한다.

그런 실수, 내지는 에러를 사전적으로 방지할 수 있다.

예를 들어, js에서는 따옴표가 붙어 문자열로 인식해서 잘못 계산되는 수학식이,

ts에서는 데이터타입이 달라서 생기는 에러로 인식하고 안내해준다.

// math.js
function sum(a, b) {
  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); // 30
sum('10', '20'); // Argument of type 'string' is not assignable to parameter of type 'number'.ts(2345)

또한 코드를 가이드해주거나 자동완성 시켜서 개발 생산성을 높인다.

또한 VS 코드는 툴의 내부가 타입스크립트로 작성되어 있어서 ts개발에 최적화되어 있다.

참고

 

3. 타입스크립트의 데이터타입

TS의 데이터타입은 다음과 같다.

참고

TS 사용하는 이유와 데이터타입 잘 설명된 자료

 

4. 타임스크립트 트랜스파일링 (Transpiling)

TS는 JS로 트랜스파일링해야 한다.

트랜스파일한다는 것은, 한 언어로 작성된 소스코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것이다.

cf) 컴파일(Compiling)은 소스 코드를 바이트 코드로 변환하는 작업을 말한다.

타임스크립트 컴파일러는 타임스크립트 파일을 자바스크립트 파일로 변환하므로,

컴파일보다는 트랜스파일링이 적절한 표현이다.

 

5. 타임스크립트 설정

• npm ls -g -> 글로벌 모듈 확인
• npm i typescript -g -> ts 설치
• tsc -> 명령어 보기, tsc --v 버전 보기, tsc --init -> tsconfig.json 생성

 

이때 나는 tsc에서 에러가 났다.

에러 1

문제점

이 시스템에서 스크립트 실행할 수 없었다.

해결방안

Windows PowerShell을 관리자권한으로 실행 후 다음을 입력

Set-ExecutionPolicy

Set-ExecutionPolicy RemoteSigned

참고

 

에러 2

문제점

tsconfig.json: Build:No inputs were found in config file.

작업하는 파일 안에 .ts파일이 없어서 생기는 문제였다.

해결방안

test.ts를 만들고 실행하니 tsc오류가 더 이상 나지 않았다.

 

tsconfig.json은 ts를 js로 변환할 때의 설정을 정의해놓는 파일이다.

tsc라는 명령어로 변환 작업을 진행한다.

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

 

이때 lib은 없으면 기본값으로 설정되고, 있으면 라이브러리를 커스터마이즈할 수 있다.

include와 exclude 속성도 사용할 수 있다. 이런식으로,

{
  "compilerOptions": {
    "module": "system",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "outFile": "../../built/local/tsc.js",
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

 

 

오늘은 이렇게 타입스크립트의 뜻, 타입스크립트를 왜 쓰는지, 타입스크립트의 데이터 타입과 설정방법에 대해 알아보았다.