Node.js를 이용한 타입스크립트(Typescript) 프로젝트 생성과 기초 이론 알아보기

타입스크립트는 동적 자료형인 일반 자바스크립트를 자바(Java)같은 객체지향 언어에서 사용하는 정적 자료형을 사용할 수 있도록 도와주는 프로그래밍 언어입니다.

장점으로는 마이크로소프트가 관리하고 있기 때문에 점유율이 높고 안정적입니다. 협업에 있어 형변환 충돌로 인한 문제가 없어진다는 점도 있다고 합니다.

일반 웹 브라우저나 Node.js에서는 원래 지원을 하지 않으며, tsc 라는 타입스크립트용 컴파일러를 설치해야 합니다.

프로젝트 생성 (Node.js npm)

Node.js: 설치, 코드 실행 (Windows, macOS 기준)

Node.js 를 통해 타입스크립트를 전역(global)으로 설치

커맨드 창에서 다음을 입력합니다.

sudo npm install -g typescript

윈도우 운영체제의 경우 sudo 키워드 대신 관리자 권한으로 커맨드 창을 실행한 후 설치

타입스크립트 컴파일러 버전 확인

타입스크립트 명령어는 tsc 를 사용합니다.

tsc -v

타입스크립트 설정 파일 생성

다음 명령어를 npm 프로젝트가 있는 디렉토리에서 실행하면 tsconfig.json이 생성됩니다.

tsc --init

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "sourceMap": true,                     /* Generates corresponding '.map' file. */
    "outDir": "./dist",                        /* Redirect output structure to the directory. */
   
    /* Strict Type-Checking Options */
    "strict": true,                           /* Enable all strict type-checking options. */

    /* Module Resolution Options */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */

    /* Advanced Options */
    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
  }
}

outDir 옵션은 트랜스컴파일된 js 파일이 저장될 디렉토리를 지정합니다.

src 디렉터리를 만들고 예제 코드 작성

person.ts

빨간색 부분은 기존 자바스크립트(ES6+)에는 없는 타입스크립트 고유의 문법입니다.

클래스의 멤버변수에 public, private, protected를 지정할 수 있습니다. 이것들은 자바 등의 객체지향 언어를 다루신 분은 익숙할 것입니다. public은 인스턴스 생성시 항상 접근 가능하며 private는 해당 클래스 내부에서만 동작하고, protected는 외부에서 접근할 수 없지만 연관된 (예를 들면 자식 클래스) 클래스의 인스턴스에서는 접근할 수 있습니다. 기본값은 public입니다.

변수 이름 뒤에 : [타입명] 을 입력하여 타입을 지정할 수 있습니다. 위의 예에서는 멤버 변수 name과 생성자의 파라미터 name의 자료형을 string으로 사용하겠다고 명시적으로 지정한 것입니다. 타입스크립트에서 지원하는 타입은 다음과 같습니다.

3/ Typescript_기본 데이터 타입

밑의 person 변수에는 따로 자료형을 지정하지 않았는데, 암시적으로 자료형을 지정하지 않은경우 Any 자료형을 사용하였다고 간주합니다. 이것은 나중에 다루기로 하겠습니다. person에 명시적으로 자료형을 지정하면 다음과 같습니다.

const person: Person = new Person("Lee")

여기에서 비주얼 스튜디오 코드를 사용하는 경우 TSLint 라는 플러그인을 설치하면 각종 컴파일 오류를 알려주는데 아래와 같이 person에 string 자료형을 대입한 경우 다음과 같은 에러가 발생합니다.

student.ts

이전 Person 클래스의 name 변수가 protected로 지정되어 있었습니다. 만약 이것을 private로 바꾸면 어떻게 될까요?

아래와 같이 외부에서 접근할 수 없게 됩니다.

ts 파일들을 컴파일링

npm 프로젝트 디렉토리에서 tsc를 입력하면 tsconfig.json의 설정에 따라 컴파일을 실행합니다.

tsc

person.js 와 student.js 는 순수 자바스크립트 파일이며, 변환된 코드를 대충 보면 다음과 같습니다.

ts 파일을 트랜스컴파일한 결과 위와 같이 되었습니다.