Typescript 기본 배우기(1)

Typescript란?

TypeScript는 JavaScript에 타입을 부여한 언어입니다. JavaScript의 확장된 언어(superset)라고 볼 수 있습니다.

TypeScript는 JavaScript와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 합니다.

이 변환 과정을 우리는 컴파일(compile)이라고 부릅니다.

 

TypeScript는 정적 타입(static)이며 코드 작성 단계에서 오류를 확인할 수 있습니다.

JavaScript는 동적 타입(dynamic)이며 런타임에서 동작할 때 오류를 확인할 수 있습니다.

 

Typescript Type

Type이란, 그 value가 가지고 있는 프로퍼티나 함수를 추론할 수 있는 방법입니다.

 

TypeScript는 JavaScript에서 기본으로 제공하는 기본 제공 유형(built-in types)을 상속합니다.

TypeScript 유형은 다음과 같이 분류됩니다.

- Primitive Types(원시타입)

- Object Types(객체타입)

 

Primitive Types(원시타입)

Name	Description
string	문자열
number	숫자 값
boolean	true와 false
null	null값
undefined	undefined값. 초기화되지 않은 변수의 기본값
symbol	고유한 상수 값

Object Types(객체타입)

Name	Description
function	함수
array	배열
classes	클래스
object	객체

 

Typescript 추가 제공 타입

Any

App을 만들 때, 잘 알지 못하는 타입을 표현해야 할 수가 있습니다. 이 값들은 사용자로부터 받은 데이터나 서드 파티 라이브러리 같은 동적인 컨텐츠에서 올 수도 있습니다. 이 경우 타입 검사를 하지 않고, 그 값들이 컴파일 시간에 검사를 통과하길 원합니다. 이를 위해 any타입을 사용할 수 있습니다.

하지만 이 타입을 최대한 쓰지 않는게 좋습니다. 그래서 nolmplicitAny라는 옵션을 주면 any를 썼을 때 오류가 나오게 할 수 있습니다.

 

Union

TypeScript를 사용하면 변수 또는 함수 매개변수에 대해 둘 이상의 데이터 유형을 사용할 수 있습니다.

이것을 union 타입이라고 합니다.

 

Enum

enum은 enumerated type(열거형)을 의미합니다.

enum은 값들의 집합을 명령하고 이를 사용하도록 만듭니다.

위 코드에서 PrintMedia라 불리는 집합을 기억하기 어려운 숫자 대신 친숙한 이름으로 사용하기 위해 enum을 활용할 수 있습니다. 열거된 각 PrintMedia는 별도의 값이 설정되지 않은 경우 기본적으로 0부터 시작합니다.

 

enum과 객체의 차이점

object는 코드내에서 새로운 속성을 자유롭게 추가할 수 있지만, enum은 선언 이후에 변경할 수 없습니다.

object의 속성값은 JS가 허용하는 모든 타입이 올 수 있지만, enum의 속성값으로는 문자열 혹은 숫자만 허용됩니다.

 

Void

Java와 같은 언어와 유사하게 데이터가 없는 경우 void가 사용됩니다. 함수가 값을 반환하지 않으면 반환 유형으로 void를 지정할 수 있습니다.

타입이 없는 상태이며, any와 반대의 의미를 가집니다. 주로 함수의 리턴이 없을 때 사용합니다.

 

Never

TypeScript는 절대 발생하지 않을 값을 나타내는 새 타입 never를 도입했습니다.

never 유형은 어떤 일이 절대 일어나지 않을 것이라고 확신할 때 사용합니다.

일반적으로 함수의 리턴 타입으로 사용됩니다. 함수의 리턴 타입으로 never가 사용될 경우, 항상 오류를 리턴하거나 리턴 값을 절대로 내보내지 않음을 의미합니다. 이는 무한 루프(loop)에 빠지는 것과 같습니다.

 

void와 never의 차이점

void유형은 값으로 undefined이나 null값을 가질 수 있으며,

never는 어떠한 값도 가질 수 없습니다.

 

type annotation, type inference

type annotation는 개발자가 타입을 타입 스크립트에게 직접 말해주는 것입니다.

type inference는 TypeScript가 알아서 타입을 추론하는 것입니다.

 

any 타입을 리턴하는 경우

위 코드 같은 경우 coordinates는 any타입을 리턴해줍니다.

JSON는 object타입이므로 annotation을 해줘야 합니다.

 

변수 선언을 먼저하고 나중에 초기화하는 경우

변수 선언과 동시에 초기화하면 타입을 추론하지만,

선언을 먼저하고 나중에 값을 초기화할 때에는 추론하지 못합니다.

위 코드처럼 any타입을 추론할 겁니다.

 

변수에 대입될 값이 일정치 못하는 경우

여러 타입이 지정되어야 할 때는 | (for statement)로 여러 타입을 annotation 해줍니다.

위 코드처럼 numAboveZero에 대입될 값이 여러 타입일 수 있음으로 | 로 annotation해줍니다.

 

TypeScript 개발 환경 구성

npm install -g typescript

모든 프로젝트에서 TypeScript을 다 사용할 수 있게 global로 설치했습니다.

tsc main.ts

TypeScript파일은 .ts로 끝납니다.

terminal에서 tsc TypeScript파일이름을 실행하고 JavaScript파일로 컴파일러할 수 있으며, html에 js파일을 연결할 수 있습니다.

 

tsc main.ts -w

위 명령어는 ts파일 실시간으로 js로 변환해주는 명령어입니다.

 

tsconfig.json 설정하기

{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./build/js",
    "target": "ES2015",
    "noEmitOnError": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "strict": true,
    "strictNullChecks": false
  },
  "include": [
    "./src/**/*.ts"
  ]
}

tsconfig.json 파일입니다.

 

타입 단언(type assertion)과 타입 Guard

TypeScript에서는 시스템이 추론 및 분석한 타입 내용을 윌가 원하는 대로 얼마든지 바꿀 수 있습니다. 이 것을 type assertion이라 불리는 메커니즘이 사용됩니다. 프로그래머가 컴파일러에게 나의 주장에 대해 의심하지 말라는 것과 같습니다.

 

Type Alias vs Interface

Type Alias(타입 별칭)과 Interface(인터페이스)는 타입의 이름을 지정하는 방법으로 매우 유사하며 대부분의 경우 자유롭게 선택할 수 있습니다.

차이점

interface는 extends를 이용해서 확장

type은 intersection을 이용해서 확장

 

interface 선언 병합(declaration merging)가능하지만 type에서는 선언 병합이 안 됩니다.

 

공통점

- type과 interface 모두 클래스에 implements를 사용할 수 있습니다.

- | 연산자를 사용하여 type과 interface를 모두 사용하여 새로운 union유형을 생성합니다. 선은은 항상 type이어야 합니다.