본문 바로가기
Programming/JavaScript

TypeScript 살펴보기

by 드로니뚜벅이 2023. 1. 3.

타입스크립트(TypeScript)는 마이크로소프트에서 개발한 언어입니다. 자바스크립트 코드에 타입(Type) 시스템을 도입하여 런타임에 에러가 발생할 가능성이 있는 코드를 정적 프로그램 분석으로 찾아줍니다.

타입스크립트는 자바스크립트에 구문을 추가하여 만들어졌습니다. tsc 명령어로 컴파일하여 자바스크립트 코드로 변환이 가능합니다. 컴파일 후 생성된 자바스크립트는 타입이 없습니다. 자바스크립트에 원래 사용자 정의 타입이 없기 때문입니다.

타입스크립트가 제공하는 타입 추론은, 타입 오류로 인해 런타임에 발생할 오류를 컴파일 타임에 잡아줍니다.

 

설치하기

타입스크립트를 사용하기 위해서는 먼저 노드(Node.js)가 설치되어 있어야 합니다. (이후 내용은 노드가 설치된 것으로 가정합니다)

1) 작업할 프로젝트 폴더를 생성합니다.

$ mkdir prj-ts-sample

 

2) 생성된 프로젝트 폴더로 이동 후 "npm init" 명령어로 노드 패키지 정보를 생성합니다.

$ cd prj-ts-sample
$ npm init --yes
Wrote to /home/bluesky/programming/typescript/prj-ts-sample/package.json:

{
  "name": "prj-ts-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

$ ls
package.json

정상적으로 실행된 경우라면 package.json 파일이 생성됩니다. 기본 설정을 사용하지 않고 직접 설정을 하려면 "--yes" 플래그를 사용하지 않고 실행해 주세요.

 

3) 타입스트립트를 설치해 줍니다.

$ npm install typescript

위 명령어는 해당 프로젝트에만 설치할 경우 사용하는 명령어이며 시스템 전체에서 사용하려면 전역 옵션 "-g" 를 추가하시면 됩니다. 즉, "npm install -g typescript"로 입력해 주시면 한번만 설치해서 모든 프로젝트에서 사용할 수 있습니다. 하지만, 프로젝트를 외부로 배포할 경우 다른 시스템에 typescript가 설치되어 있지 않을 수도 있기 때문에 패키지 파일에 종속성("dependencies")에 대한 내용을 포함시켜 주는 게 좋습니다.

{
  "name": "prj-ts-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "typescript": "^4.9.4"
  }
}

설치 전에는 프로젝트 폴더에 package.json 파일만 존재했지만 설치 후에는 node_modules 라는 폴더와 package-lock.json 파일이 생성되었음을 확인할 수 있습니다.

$ tree -L 2
.
├── node_modules
│   └── typescript
├── package.json
└── package-lock.json

 

4) 노드에서 타입스크립트를 실행할 수 있도록 ts-node를 설치합니다.

$ npm install ts-node --save-dev

ts-node는 타입스크립트 파일을 자바스트립트 파일로 변환하고 노드에서 자바스트립트를 실행하도록 해 줍니다.

마찬가지로 해당 모듈도 package.json에 추가됨을 확인할 수 있습니다.

  ...
  "dependencies": {
    "typescript": "^4.9.4"
  },
  "devDependencies": {
    "@types/node": "^18.11.18"
  }
}

간혹, 위 방법으로 설치 시 노드에서 정상적으로 실행되지 않은 경우가 있다고 합니다. 그럴 경우에는 아래처럼 다시 설치해 보세요.

$ npm install @types/node --save-dev

 

5) 타입스트립트 컴파일 설정 파일(tsconfig.json) 파일을 아래와 같이 작업 프로젝트 루트에 생성합니다.

{
  "compilerOptions": {
    "strict": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "lib": ["es2015", "es2016", "es2017", "es2018", "es2019", "es2020"],
    "target": "ES5",
    "outDir": "./dist",
    "esModuleInterop": true
  },
  "exclude": ["node_modules"],
  "include": ["src/**/*"]
}

 

6) 타입스크립트 실행하기

컴파일을 할 테스트 타입스크립트 파일을 생성합니다. (prj-ts-sample/src/index.ts)

console.log("Hello, TypeScript!!!");

npx tsc 명령어로 자바스크립트 파일을 tsconfig.json에 지정한(./dist) 위치에 생성합니다.

$ pwd
/home/bluesky/programming/typescript/prj-ts-sample

$ npx tsc

생성한 자바스크립트 파일을 실행합니다.

$ node dist/index.js

타입스크립트 파일을 바로 실행하려면 ts-node를 사용합니다.

$ npx ts-node src/index.ts

 

7) 컴파일과 실행을 한번에...

package.json 파일에서 "scripts"에 아래 내용을 추가합니다.

  ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "tsc && node dist/index.js"
  },
  ...

아래 명령으로 실행하면 됩니다.

$ npm run start

> prj-ts1@1.0.0 start
> tsc && node dist/index.js

Hello, TypeScript!!!

여기까지 잘 따라 오셨으면 이제부터 타입스크립트 작성을 위한 기초 지식을 쌓아보도록 하겠습니다.

 

변수 선언하기

타입스크립트의 변수 선언하는 방식은 다음과 같습니다.

[선언키워드] [변수명]: [타입]

선언 키워드는 const, let 혹은 var를 사용합니다. const는 선언 후 재할당이 불가능하며 let과 var는 재할당이 가능하여 값을 변경할 수 있습니다. let과 var의 차이는 호이스팅(hoisting) 여부인데 var는 변수를 사용한 후에 선언이 가능하지만 let은 그렇지 않습니다.

 

타입스크립트에서 지원하는 타입

타입스크립트는 자바스크립트가 가지고 있는 자료형을 모두 포함합니다. 자바스크립트의 타입은 원시값(primitive value)과 객체(object), 함수(function)가 있습니다. typeof 키워드를 이용하여 인스턴스의 타입을 알 수 있습니다.

typeof instance === "undefined"

원시값 타입

typeof 설명 할당 가능한 값
boolean 참, 거짓을 나타내는 논리값 true, false
null '유효하지 않음'을 나타냄 null
undefined 값이 존재하지 않음. 즉, 변수 선언 후 '값이 할당되지 않았음'을 나타냄 undefined
number 배정밀도 64비트 형식 IEEE 754의 값 -(2^53-1)와 2^53-1사이의 정수와 실수
+Infinity, Infinity
NaN(Not a Number)
bigint Number의 범위를 넘어서는 정수를 안전하게 저장하고 연산할 수 있게 해 줌 예) const x = 2n ** 53n;
정수 끝에 n을 추가
string 문자열. 변경 불가능(immutable)함 예) 'hello', "world"
홑따옴표 혹은 쌍따옴표로 둘러싸인 문자열
symbol 유일하고 변경 불가능한 원시값. 객체 속성의 키로 사용할 수 있음  

 

객체 타입

객체 타입은 속성(프로퍼티, property)을 가지고 있는 데이터 컬렉션입니다. C 언어의 구조체와 유사합니다. 속성은 키와 값으로 표현되는데 값은 다시 자바스크립트의 타입을 가지고 있습니다.

const dexter = {
  name: 'Dexter Han',
  age: 21,
  hobby: ['Movie', 'Billiards']
}

자바스크립트에는 개발할 때 유용한 내장 객체들이 있습니다.

  • Date
  • Array
  • Map, WeakMap
  • JSON

 

함수 타입

자바스크립트는 함수를 변수에 할당하거나 다른 함수의 인자로 전달할 수 있습니다. 함수의 결과로 반환할 수도 있습니다. 이러한 특징을 일급 함수(first-class function)라고 합니다. 함수의 func의 타입을 검사하면 "function"이 나옵니다.

typeof func === "function"

 

any / unknown / never

타입스크립트에는 특수한 타입이 있습니다.

any는 자바스크립트와 같이 어떠한 타입의 값도 받을 수 있는 타입입니다. any 타입의 객체 역시 어떤 타입의 변수에도 할당이 가능합니다. 이 특성 때문에 런타임에 오류를 일으킬 가능성이 있습니다.

unknown 타입은 any 타입과 마찬가지로 어떤 타입도 할당 가능하지만 다른 변수에 할당 또는 사용할 때 타입을 강제하도록 하여 any가 일으키는 오류를 줄일 수 있습니다.

never 타입의 변수에는 어떤 값도 할당할 수 없습니다. 함수의 리턴 타입으로 지정하면 함수가 어떤 값도 반환하지 않는다는 것을 뚯하고, 다음과 같이 특정 타입의 값을 할당받지 못하도록 하는 데 사용할 수도 있습니다.

type NonString<T> = T extends string ? never : T;

 

저작자표시 비영리 변경금지

티스토리툴바