[TypeScript] 타입스크립트 시작

1. 타입스크립트 설치

npm install -g typescript

1-1. 버전 확인

tsc --version

 

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

tsd --init

 

1-3. 옵션 변경

1-3-1. target

// tsconfig.json
{
    "compilerOptions": {
        "target": "es2020"
    }
}

 

tsconfig.json에서

"es2016" => "es2020" 으로 변경합니다.

BigInt는 ES2020 버전 이상에서 사용 가능하기 때문입니다.

 

BigInt는 JavaScript에서 아주 큰 정수를 다룰 수 있도록 도입된 새로운 데이터 타입입니다.
기존의 Number 타입은 정수의 최대값이 Number.MAX_SAFE_INTEGER (약 ±9 * 10¹⁵)로
제한되어 있었기 때문에, 더 큰 정수를 정확하게 표현하려면 BigInt가 필요합니다.

 

BigInt와 Number는 타입이 다르기 때문에 서로 연산할 수 없습니다.

const big = 1234567890123456789012345678901234567890n; // `n`을 붙이면 BigInt
const anotherBig = BigInt("1234567890123456789012345678901234567890");
console.log(big + 10n); // 덧셈

 

const a = 10n;
const b = 5;

console.log(a + BigInt(b)); // OK
console.log(Number(a) + b); // OK
console.log(a + b); // ❌ TypeError: Cannot mix BigInt and other types

 

빨간 줄을 무시하고 실행하면 에러를 볼 수 있습니다.

 

※ ES5 버전으로도 변경할 수 있습니다.

ESNext (최신버전)

1-3-2. include

include는 tsc에게 컴파일 파일의 범위와 위치를 알려줍니다.

파일마다 일일히 tsc 명령어를 작성할 순 없으니까요.

// tsconfig.json
{
    "compilerOptions": {
    },
    "include": ["src"]
}

// 현재 폴더 전체라면 ["."] 하면 됩니다.

 

1-3-3. module

// tsconfig.json
{
    "compilerOptions": {
      "module": "commonjs"
    }
}

 

ES6

ESNext (최신문법)

commonjs (require, module.exports)

등 가능합니다.

 

1-3-4. outDir

컴파일 결과를 저장할 위치를 설정합니다.

// tsconfig.json
{
    "compilerOptions": {
      "outDir": "dist"
    }
}

 

1-3-5. strict

타입스크립트 컴파일러의 타입 검사의 엄격함 수준을 정합니다.

 

1-3-6. ModuleDetection

타입스크립트의 모든 파일은 전역 파일로 취급되기 때문에,

test1.ts와 test2.ts에

같은 변수를 만들면 오류가 발생합니다.

// test1.ts
const test = 1;

// test2.ts
const test = 2;

 

해당 파일들을 전역이 아닌 독립 모듈로 바꿔줘야 합니다.

 

// tsconfig.json
{
    "compilerOptions": {
      "moduleDetection": "force"
    }
}

 

1-3-7. strictNullChecks

// tsconfig.json
{
    "compilerOptions": {
      "strictNullChecks": false
    }
}

 

strictNullChecks 옵션은 null 값을 null 타입 이외의 타입의 변수에 할당하는 것이 가능할지 결정합니다.

기본값은 true로

null 타입이 아닌 변수는 null 값을 할당할 수 없습니다.

 

※ strict 의 하위 옵션으로 strict가 변하면 그 값을 따릅니다.

2. 컴파일

tsc test.ts

 

tsc 명령어로 ts파일을 js파일로 컴파일 할 수 있습니다.

 

const msg: string = "Hello World";
console.log(msg);

 

컴파일하면 아래와 같이 변경됩니다

var msg = "Hello World";
console.log(msg);

 

 

node 명령어로 실행

 

2-1. ts-node로 실행하기

컴파일하지 않고 실행하고 싶다면 ts-node를 설치해서 사용할 수 있습니다.

npm install -g ts-node

 

ts-node

 

※ ts-node는 Node 20버전 이상에서는 더 이상 동작하지 않습니다.

대신 tsx 를 사용합니다.