TypeScript 요약 - 1

00  TypeScript

-자바스크립트는 동적 타입 언어 또는 느슨한 타입의 언어라는 태생적 한계를 지님

-자바스크립트의 태생적 문제를 극복하고자 AltJS(자바스크립트의 대체 언어)가 등장, TypeScript 역시 이 중 하나

 

-마이크로소프트에서 구현한 자바스크립트(ES5)의 Superset(상위확장)

-단순히 설명하면 타입 구문이 있는 JavaScript

-정적 타이핑을 지원하며 ES6(ECMAScript 2015)의 클래스, 모듈 등과 ES7의 Decorator 등을 지원

-기존의 자바스크립트(ES5) 문법을 그대로 사용할 수 있으며, 별도의 트랜스파일러(Transpiler)를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔진(브라우저 또는 Node.js)에서 실행할 수 있음

 

 

01 TypeScript 사용 이유

에러의 사전 방지

-JavaScript는 동적 타입 언어로 변수 타입이 런타임에 결정되기 때문에 실행 이전에는 오류를 확인하기 어려움

-TypeScript는 정적 타입 언어로 변수의 타입이 컴파일 타임에 결정되기 때문에 타입 에러를 미리 발견할 수 있음

=> 실행 전 컴파일 단계에서 오류 발생 -> compile error 소스코드 라인을 지시헤주기 때문에 사소한 타입 에러를 쉽게 발견할 수 있음 + 코드 가독성 향상

// math.ts
function sum(a: number, b: number) {
  return a + b;
}
sum('10', '20'); // Error: '10'은 number에 할당될 수 없습니다.

도구의 지원

-IDE(통합개발환경)를 포함한 다양한 도구, 즉 개발 툴의 기능을 최대로 활용할 수 있음

-컴파일 과정에서 es6+ 문법들을 es5,es3으로 알아서 변환해주기 때문에 구브라우저 대응 가능

-IDE와 같은 도구에 타입 정보를 제공함으로써 높은 수준의 인텔리센스(IntelliSense), 코드 어시스트, 타입 체크, 리팩토링 등을 지원받을 수 있어 대규모 프로젝트 진행에 있어 필수적

02  환경 구축

1. Node.js 설치

아래 글의 개발환경 설정 부분을 참고해서 설치 진행

https://various-texts.tistory.com/33

 

2. 설치할 폴더 생성

3. 프로젝트 폴더 생성

$ npm init

작성 후 엔터를 계속 치면 package.json 파일이 생성된다.

 

4. TypeScript 컴파일러 설치

$ npm install typescript //install 은 i로 줄여서 써도 됨

//전역 설치 
$ npm install -g typescript

//설치 후 버전 확인
$ tsc -v

node_modules 폴더가 생성되면서 설치되고 package.json에 다음과 같은 내용이 생성된다.

"dependencies":{
  "typescript": "^4.3.5"
}

4. ts-node

타입스크립트를 노드에서 실행시킬 수 있는 런타임을 설치한다.

npm i ts-node --save-dev

 

5. tsconfig.json

타입스크립트 컴파일 관련 설정 파일을 생성한다.

ts.config.json의 기본 형태는 다음 커맨드를 통해 생성할 수 있다.

npx tsc --init

* 컴파일 옵션들

{
  "compilerOptions": {
    /* https://aka.ms/tsconfig.json 를 방문하면 해당 파일에 대한 더 많은 정보를 얻을 수 있습니다. */
 
    // 옵션은 아래와 같은 형식으로 구성되어 있습니다.
    // "모듈 키": 모듈 값                        /* 설명: 사용가능 옵션 (설명이 "~ 여부"인 경우 'true', 'false') */
 
    /* 기본 옵션 */
    // "incremental": true,                   /* 증분 컴파일 설정 여부 */
    "target": "es5",                          /* 사용할 특정 ECMAScript 버전 설정: 'ES3' (기본), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 혹은 'ESNEXT'. */
    "module": "commonjs",                     /* 모듈을 위한 코드 생성 설정: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    // "lib": [],                             /* 컴파일에 포함될 라이브러리 파일 목록 */
    // "allowJs": true,                       /* 자바스크립트 파일 컴파일 허용 여부 */
    // "checkJs": true,                       /* .js 파일의 오류 검사 여부 */
    // "jsx": "preserve",                     /* JSX 코드 생성 설정: 'preserve', 'react-native', 혹은 'react'. */
    // "declaration": true,                   /* '.d.ts' 파일 생성 여부. */
    // "declarationMap": true,                /* 각 '.d.ts' 파일의 소스맵 생성 여부. */
    // "sourceMap": true,                     /* '.map' 파일 생성 여부. */
    // "outFile": "./",                       /* 단일 파일로 합쳐서 출력합니다. */
    // "outDir": "./",                        /* 해당 디렉토리로 결과 구조를 보냅니다. */
    // "rootDir": "./",                       /* 입력 파일의 루트 디렉토리(rootDir) 설정으로 --outDir로 결과 디렉토리 구조를 조작할 때 사용됩니다. */
    // "composite": true,                     /* 프로젝트 컴파일 여부 */
    // "tsBuildInfoFile": "./",               /* 증분 컴파일 정보를 저장할 파일 */
    // "removeComments": true,                /* 주석 삭제 여부 */
    // "noEmit": true,                        /* 결과 파일 내보낼지 여부 */
    // "importHelpers": true,                 /* 'tslib'에서 헬퍼를 가져올 지 여부 */
    // "downlevelIteration": true,            /* 타겟이 'ES5', 'ES3'일 때에도 'for-of', spread 그리고 destructuring 문법 모두 지원 */
    // "isolatedModules": true,               /* 각 파일을 분리된 모듈로 트랜스파일 ('ts.transpileModule'과 비슷합니다). */
 
    /* 엄격한 타입-확인 옵션 */
    "strict": true,                           /* 모든 엄격한 타입-체킹 옵션 활성화 여부 */
    // "noImplicitAny": true,                 /* 'any' 타입으로 구현된 표현식 혹은 정의 에러처리 여부 */
    // "strictNullChecks": true,              /* 엄격한 null 확인 여부 */
    // "strictFunctionTypes": true,           /* 함수 타입에 대한 엄격한 확인 여부 */
    // "strictBindCallApply": true,           /* 함수에 엄격한 'bind', 'call' 그리고 'apply' 메소드 사용 여부 */
    // "strictPropertyInitialization": true,  /* 클래스의 값 초기화에 엄격한 확인 여부 */
    // "noImplicitThis": true,                /* 'any' 타입으로 구현된 'this' 표현식 에러처리 여부 */
    // "alwaysStrict": true,                  /* strict mode로 분석하고 모든 소스 파일에 "use strict"를 추가할 지 여부 */
 
    /* 추가적인 확인 */
    // "noUnusedLocals": true,                /* 사용되지 않은 지역 변수에 대한 에러보고 여부 */
    // "noUnusedParameters": true,            /* 사용되지 않은 파라미터에 대한 에러보고 여부 */
    // "noImplicitReturns": true,             /* 함수에서 코드의 모든 경로가 값을 반환하지 않을 시 에러보고 여부 */
    // "noFallthroughCasesInSwitch": true,    /* switch문에서 fallthrough 케이스에 대한 에러보고 여부 */
 
    /* 모듈 해석 옵션 */
    // "moduleResolution": "node",            /* 모듈 해석 방법 설정: 'node' (Node.js) 혹은 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                       /* non-absolute한 모듈 이름을 처리할 기준 디렉토리 */
    // "paths": {},                           /* 'baseUrl'를 기준으로 불러올 모듈의 위치를 재지정하는 엔트리 시리즈 */
    // "rootDirs": [],                        /* 결합된 컨텐츠가 런타임에서의 프로젝트 구조를 나타내는 루트 폴더들의 목록 */
    // "typeRoots": [],                       /* 타입 정의를 포함할 폴더 목록, 설정 안 할 시 기본적으로 ./node_modules/@types로 설정 */
    // "types": [],                           /* 컴파일중 포함될 타입 정의 파일 목록 */
    // "allowSyntheticDefaultImports": true,  /* default export이 아닌 모듈에서도 default import가 가능하게 할 지 여부, 해당 설정은 코드 추출에 영향은 주지 않고, 타입확인에만 영향을 줍니다. */
    "esModuleInterop": true,                  /* 모든 imports에 대한 namespace 생성을 통해 CommonJS와 ES Modules 간의 상호 운용성이 생기게할 지 여부,  'allowSyntheticDefaultImports'를 암시적으로 승인합니다. */
    // "preserveSymlinks": true,              /* symlik의 실제 경로를 처리하지 않을 지 여부 */
    // "allowUmdGlobalAccess": true,          /* UMD 전역을 모듈에서 접근할 수 있는 지 여부 */
 
    /* 소스 맵 옵션 */
    // "sourceRoot": "",                      /* 소스 위치 대신 디버거가 알아야 할 TypeScript 파일이 위치할 곳 */
    // "mapRoot": "",                         /* 생성된 위치 대신 디버거가 알아야 할 맵 파일이 위치할 곳 */
    // "inlineSourceMap": true,               /* 분리된 파일을 가지고 있는 대신, 단일 파일을 소스 맵과 가지고 있을 지 여부 */
    // "inlineSources": true,                 /* 소스맵과 나란히 소스를 단일 파일로 내보낼 지 여부, '--inlineSourceMap' 혹은 '--sourceMap'가 설정되어 있어야 한다. */
 
    /* 실험적 옵션 */
    // "experimentalDecorators": true,        /* ES7의 decorators에 대한 실험적 지원 여부 */
    // "emitDecoratorMetadata": true,         /* decorator를 위한 타입 메타데이터를 내보내는 것에 대한 실험적 지원 여부 */
 
    /* 추가적 옵션 */
    "skipLibCheck": true,                     /* 정의 파일의 타입 확인을 건너 뛸 지 여부 */
    "forceConsistentCasingInFileNames": true  /* 같은 파일에 대한 일관되지 않은 참조를 허용하지 않을 지 여부 */
  }
}

* 출처: https://geonlee.tistory.com/214

 

include/exclude 설정

컴파일에 포함할 디렉토리, 파일 경로를 설정하거나 제외시킬 수 있다.

// * 0 이상의 모든 문자와 일치 (디렉토리 분리 기호 제외)
// ? 1개 문자와 일치 (디렉토리 분리 기호 제외)
// **/ 모든 하위 디렉토리까지 포함

{
  // 컴파일 포함
  "include": [
    "src/**/*.tsx?"
  ],
  // 컴파일 제외
  "exclude": [
    "node_modules",
    "build",
    "**/*.(spec|test).ts"
  ],
  // 컴파일 옵션
  "compilerOptions": { ... }
}

 

6. 테스트 파일 작성

src 폴더에 테스트 파일을 만들고 저장한다.

// ./src/index.ts
console.log('typescript')

//Cannot find name console 에러 발생 시
npm i @types/node --save-dev

7. 실행

npx tsc
//js 변환

node dist/index.js
//컴파일된 js파일 실행

npx ts-node src/index.ts
//ts node 이용해 실행

 

+ TypeScript 공식 사이트에서 지원하는 Playground 에서 타입스크립트를 사용해볼 수 있다!

TS Playground - An online editor for exploring TypeScript and JavaScript

---

참고 자료

https://yamoo9.gitbook.io/typescript/cli-env/tsconfig

https://hoho325.tistory.com/311

https://poiemaweb.com/typescript-introduction

https://joshua1988.github.io/ts/