타입스크립트 가이드 읽기 - 1. The Basics

1. The Basics

Typescript는 함수, string, object 등 타입을 명확하게 정의해주어, 사용할 수 없는 메서드를 사용하는 일이 없도록 방지한다. (ex. function.toLowerCase();)

javascript는 동적 타입 검사(타입 오류를 동작 수행 전에는 알 수 없고, 코드 실행해 호출해봐야 안다)만 제공한다. 그래서 어떤 동작 결과를 보일지 코드를 작성하는 동안 확인하기 위해 Typescript 사용하는 것이다.

정적 타입 검사 필요한 이유

1) JavaScript가 런타임 시 내보내는 오류는 ECMA Script 명세에 적힌 대응법 기반이다. 그런데 당연히 오류를 띄워야 할 상황에서 아래처럼 이상하게 작동할 때가 있다. 아예 정의되지 않은 속성을 불러오는데 오류가 아니라 undefined가 뜬다.

const user = {
  name: "Daniel",
  age: 26,
};
user.location; // undefined 를 반환

즉, 현재 오류 없이 유효한 자바스크립트 코드더라도, 정적 타입 시스템 내애서 오류로 간주되는 경우 오류를 발생시킨다.(타입스크립트의 장점)

const user = {
  name: "Daniel",
  age: 26,
};
 
user.location;
Property 'location' does not exist on type '{ name: string; age: number; }'

이 외에도 타입스크립트는 2) 오타를 잡거나, 3) 호출되지 않은 함수(괄호를 빼먹었다던지), 4) 기본적인 논리 오류를 잡아낼 때 사용 가능하다.

타입스크립트 컴파일러, TSC

ts 파일을 컴파일 해서 js 형태로 출력한다. 
실수에 보다 방어적으로 대응할 목적이면 tsc --noEmitOnError  hello.ts 명령어를 사용해보자. 그러면 hello.ts에 작성한 코드 중 타입 검사를 통과하지 않은 것이 js로 수정되어 출력되지 않게 된다.

명시적 타입 

function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

greet("Maddison", new Date());

명시적인 타입 표기를 작성하지 않더라도, 타입스크립트가 알아서 타입 정보를 추론할 수도 있다.

지워진 타입

위의 ts 파일은 아래의 js파일로 tsc를 통해 변환된다.

"use strict";
function greet(person, date) {
    console.log("Hello ".concat(person, ", today is ").concat(date.toDateString(), "!"));
}
greet("Maddison", new Date());

이때, person과 date에 명시해둔 타입은 지워지고, 백틱 사용한 template literal이 연결연산자(+, concat)으로 이어진 하나의 문자열로 변환되었다.

타입 표기는 JavaScript(ECMAScript)의 일부가 아니기 때문에 TypeScript를 수정 없이 그대로 실행할 수 있는 브라우저나 런타임은 존재하지 않는다. 그래서 컴파일러 이용해 typescript 전용 코드가 제거되고, 타입표기 또한 지워진다. 타입 표기는 프로그램의 런타임 동작을 전혀 수정하지 않고, 코드 작성 중 에러를 띄워줄 뿐이다.

다운 레벨링

앞서 템플릿 리터럴이 연결연산자로 변환된 것을 보았다. 템플릿 문자열은 ECMA Script 2015(ES6) 버전에서 등장ㅎ란 기능이다. TypeScript는 이런 새 버전의  ECMAScript를 ECMAScript 3나 5처럼 예전 버전으로 다시 작성해준다.

이렇게 상위 버전의 ECMAScript를 하위 버전의 것으로 바꾸는 과정을 "다운레벨링"이라고 부른다.

TypeScript는 ES3라는 아주 구버전의 ECMAScript를 타겟으로 동작하는 것이 기본 동작이다.(--target 플래그 설정하면 최근 버전을 타겟으로 변환할 수도 있다. ex) tsc --target es2015 input.ts) 

(기본적인 타겟값 ES3지만, 현존하는 대다수 브라우저들이 ES2015 지원하므로 안심하고 ES2015 또는 그 이상을 컴파일러 타겟으로 정할 수 있다.)

엄격도

기본 제공: 타입 검사는 선택사항, 타입 추론은 가장 느슨, 잠재적인 null / undefined 값에 대한 검사 이루어지지 않음

엄격도 설정을 통해 최대한도의 타입 검사 가능하다. 엄격도를 활성화하는 방법은 CLI에서 --strict 플래그를 활성화하거나 tsconfig.json에 "strict": true 를 추가하는 것이다. 반드시 알아야 하는 두 가지 가장 주요한 옵션은 noImplicitAny와 strictNullChecks이다.

noImplicitAny

몇몇 경우 Typescript는 타입을 추론하지 않고 가장 관대한 타입인 any로 간주한다. 하지만 any를 사용하면 타입스크립트 사용하는 이유 무색하기 때문에, 이 noImplicitAny 플래그를 활성화하면 타입이 any로 암묵적으로 추론되는 변수에 대해 오류 발생시킨다.

strictNullChecks

null과 undefined와 같은 값은 다른 타입의 값에 살당할 수 있는 기본 동작이지만, 이의 처리를 잊는 것 많은 버그의 원인이 될 수 있다. strictNullChecks 플래그는 null과 undefined를 보다 명시적으로 처리하게 해준다.

https://www.typescriptlang.org/ko/docs/handbook/2/basic-types.html

Documentation - The Basics