TypeScript

개발 환경

컴파일러 설치

$ npm install -g typescript
$ tsc --version
$ tsc ./src/index.ts

npx tsc 명령으로 실행할 수 있다.

Parcel 번들러

$ npm init -y
$ npm install -D typescript parcel-bundler

1. tsconfig.json을 생성한 후, 옵션을 추가한다.
2. main.ts 파일을 작성한다.
3. index.html을 생성하여 script 태그를 main.ts 파일에 연결한다.
4. 진입 파일로 index.html을 지정 후 빌드한다.

$ npx parcel index.html

---

타입 기본

타입 지정

• 타입스크립트는 일반 변수, 파라미터, 프로퍼티 등에 : 기호 뒤에 타입을 지정할 수 있다.

function hello(a: TYPE_A, b: TYPE_B): TYPE_RETURN {
  return a + b;
}

let hello: TYPE_HELLO = hello(1, 2);

예시를 살펴보면 다음과 같다.

function add(a: number, b: number) {
  return a + b;
}
const sum: number = add(1, 2);
console.log(sum); // 3

매개변수인 a,b는 number 타입이여야 한다고 지정해주었으므로
add 함수를 호출할 때 인자로 숫자를 넘겨줘야 한다.
또한 리턴 값 또한 a+b이므로 number 타입으로 추론된다.

타입 에러

만약 타입 에러가 발생한다면, 컴파일 전 단계에서
(코드 작성 시점에서) 에러가 발생하게 된다.
이때 나오는 에러 코드를 검색하면 에러 코드에 대한 정보를 쉽게 알 수 있다.

예> TS2322

타입 선언

Boolean

• true / false 두가지 값을 나타내는 타입.

Number

• 모든 부동 소수점 값 사용 가능.

String

• ES6의 템플릿 리터럴도 지원함.

Array

• 순차적으로 값을 가지는 일반 배열.

문자열만 가지는 배열의 경우에는 아래와 같이 선언할 수 있다.

let fruits: string[] = ['Apple', 'Banana', 'Mango'];
// 또는
let fruits: Array<string> = ['Apple', 'Banana', 'Mango'];

숫자만 가지는 배열의 경우에는 아래와 같이 선언할 수 있다.

let oneToSeven: number[] = [1, 2, 3, 4, 5, 6, 7];
// 또는
let oneToSeven: Array<number> = [1, 2, 3, 4, 5, 6, 7];

type[] 과 같이 작성하거나
Array<type>과 같이 작성하면 된다.

만약 여러개의 다중 타입을 갖는 배열의 경우 | 연산자를 이용하면 된다.

let arr: (string | number)[] = ['Apple', 1, 2];
// 또는
let arr: Array<string | number> = ['Apple', 1, 2];

any

• 배열이 갖는 항목의 값을 단언할 수 없을 때 사용함.

---

인터페이스

interface

interface IUser {
  name: string,
  age: number,
  isValid: boolean
}

읽기 전용 값

-readonly 키워드 사용.

• 배열의 경우에는 ReadOnlyArray 라는 타입이 존재함.

---

튜플

• 배열과 유사.
• 정해진 타입의 고정된 길이의 배열.

let tuple: [sting, number]; 
tuple = ['a', 1, 2]; // Error

tuple은 정해진 길이 배열을 표현하지만, 할당에 국한된다.
-> push나 splice를 통해 값을 넣는 행위는 막을 수 X.

---

Enum

• 열거형.
• 숫자 or 문자형 값 집합에 이름(membuer)을 부여할 수 있는 타입.
  -> 값의 종류가 일정한 범위로 정해진 경우 유용함.

enum Week {
  Sun,
  Mon,
  Tue,
  Wed,
  Thu,
  Fri,
  Sat
}

console.log(Week.Mon); // 1

수동으로 값 변경시 변경한 부분부터 다시 1씩 증가함.

---

Object

• typeof 연산자가 object로 반환하는 모든 타입.
  -> 여러 타입의 상위 타입임.
  반복적인 사용을 할 경우 interface나 type의 사용을 권장함.

interface IUser {
  name: string,
  age: number
}

let userA: IUser = {
  name: 'HEROPY',
  age: 123
};

Void

• 값을 반환하지 않는 함수에서 사용.
• 함수가 반환 타입을 명시하는 곳에 위치

function hello(name: string): void {
  console.log(`Hello ${name}`);
}

참고 문서

• heropy님 블로그
• https://www.typescriptlang.org/
• TS for JS Programmer