TypeScript - 1 환경설정, 기본타입

history

자바스크립트의 태생적 한계를 극복하기 위해 마이크로소프트에서 2012년에 발표했다.
자바스크립트의 대체 언어 중 하나로 정적 타이핑을 지원하며, ES2015의 문법을 기본적으로 지원한다.

정적 타입

타입스크립트는 자바스크립트와는 다르게 정적 타입을 제공한다.
이를 통해 개발자가 의도한 대로 동작하는 코드를 구현하기 수월해진다.

타입스크립트의 변수 선언은 아래와 같다.

// 키워드 변수명: 타입 = 값;
const age: number = 10;
const name: string = "abc";

// 타입과 맞지 않을 경우 에러 발생
const foo: string = 7; // Type 'number' is not assignable to type 'string'.

물론 타입을 생략해도 동작하며, 타입스크립트는 이 때, 암묵적으로 타입을 변수에 지정한다.

let foo = 3; // let foo: number = 3;

단, 암묵적으로 할당하는 방법은 변수의 선언과 할당을 동시에 해야 유효하며,
선언과 할당을 나눠서 진행하면 다른 타입으로 재할당 하더라도 에러가 발생하지 않게 된다.

let foo; // type any
foo = 3;
foo = "foo";

---

환경 설정

먼저 npm에서 typescript 모듈을 전역에 설치한다.

npm install -g typescript

ts파일을 만들고 타입스크립트 문법에 맞는 코드를 작성한다.

const foo: number = null ?? 3;

해당 파일을 tsc 파일경로 -t 버전 명령어를 통해 컴파일한다.
이 때, 경로에 확장자는 생략할 수 있으며, 버전은 ES3 ~ ES2020 와 ESNext를 지원한다.
버전을 생략하게 되면 ES3로 컴파일한다.

// ES3 컴파일
var foo = null !== null && null !== void 0 ? null : 3;

// ES2016 컴파일
const foo = null !== null && null !== void 0 ? null : 3; // const, let은 ES2015부터 표준.

// ES2020 컴파일
const foo = null ?? 3; // 널병합 연산자는 2020부터 표준.

tsconfig.json

타입스크립트는 config를 통한 옵션 설정을 지원한다.

tsc --init

tsconfig에서 설정한 옵션대로 컴파일하기 위해서는 tsc 뒤에 파일 경로를 입력하지 않아야 한다.
만약 경로를 입력한다면 tsconfig는 무시된다.

tsc tmp // x

tsc

tsc만 입력하면 현재 프로젝트 폴더 영역 내부의 모든 .ts 파일이 컴파일 된다.
tsconfig.json에서 사용할 수 있는 옵션 중 흥미가 생기는 것들은 아래와 같다.

1. target

"target": "ES3" // default ES3, ~ ES2020, ESNext 지원.
// 소문자도 가능하다.
"target": "es2015"

2. allowJs

"allowJs": false // default false, true 설정 시 js파일도 컴파일한다.

// tmp.js
const foo = "foo";
// tmp.js ES3
var foo = "foo";

3. checkJs

"checkJs": false // default false, true 설정 시 js파일의 컴파일에 발생하는 에러를 출력한다.
// allowJs와 함께 사용한다!

// tmp.js
const foo = "foo";
const foo = 3;
// checkJs: false
var foo = "foo"; 
var foo = 3;
// checkJs: true
error TS2451: Cannot redeclare block-scoped variable 'foo'.

4. outDir, outFile

"outFile": "경로/파일명", // 단일 파일에 컴파일한다.               
"outDir": "경로", // 지정한 디렉토리에 컴파일한다.

5. watch

"watch": true // true 설정 시 파일의 수정을 감시하며, 자동으로 컴파일!

예시

{
  "compilerOptions": {
      "target": "ES3",
      "allowJs": true,
      "checkJs": true,
      "outDir": './dist',
      "watch": true
  }
}

---

기본타입

타입스크립트의 기본 타입은 아래와 같다.

const isDone: boolean = true | flase;
const decimal: number = Number;
const string: string = String;
const listA: type[] = [type, type, ..., type];
const listB: Array<type> = [type, type, ..., type];
const tuple: [string, number] = [String, Number];
// 자바처럼 열거형 사용 가능!
enum Addr {ABC, DEF}; // { '0': 'ABC', '1': 'DEF', ABC: 0, DEF: 1 }
// 모든 타입을 허용
const Any: any;
// 자바의 void처럼 함수에서 반환 값이 없을 때, 사용
function Void(): void { connsole.log('void') }
const Undefined: undefined = undefined;
const Null: null = null;
// 발생할 수 없는 타입을 의미한다. never를 반환하는 함수는 함수의 마지막에 도달할 수 없음.
function Never(): never { while (true) {} }
const Object: object;