Basic

message.toLowerCase();
 
message();

일반적인 경우 변수 message 는 호출 가능하고 toLowerCase() 라는 프로퍼티가 있고, 호출 가능하다고 가정합니다.

만약 const message = “Hello World!” 라고 한다면 어떻게 될까?

TypeError: message is not a function

message.toLowerCase() 를 실행하면 소문자로 변환한 문자를 얻을 수 있지만 message 는 함수가 아니기 때문에 타입에러가 발생한다.

하지만 JavaScript 는 함수를 호출해 어떻게 실행되는지 확인하기 전까지는 알기가 어렵다. 그렇게 때문에 정적타입 시스템인 TypeScript 는 이런 에러를 미리 예측해 식별할 수 있게 해준다.

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

이렇게 타입 에러를 잡을수도 있지만

const announcement = "Hello World!";
 
// 오탈자
announcement.toLocaleLowercase();
announcement.toLocalLowerCase();
 
// 정상
announcement.toLocaleLowerCase();

이런식으로 오탈자를 확인할 수도 있다.

Types for Tooling

TypeScript 는 오류 메시지와 코드완성기능을 제공한다.

이런 식으로 TypeScript는 단순한 오류를 잡는것이 아니라 오류를 자동으로 수정하는 “빠른 수정”, 코드를 쉽게 재구성하는 “리팩터링”, 특정 변수에 대한 모든 참조를 찾는 탐색기능을 제공한다.

TSC, TypeScript Compiler

// hello.ts
console.log("Hello world!");

이 hello.ts 를 tsc hello.ts 명령어를 통해 컴파일을 하면

// hello.js
console.log("Hello world!");

hello.js 파일이 생성된다.

TSC는 일관된 들여쓰기와 주석 유지 등 사람이 읽기 쉬운 코드를 생성하려고 노력한다.

다음 처럼 오류가 발생하는 .ts 를 컴파일 한다면,

function greet(person, date) {
  console.log(`Hello ${person}, today is ${date}!`);
}
 
greet("Brendan");

Expected 2 arguments, but got 1.

이렇게 TypeScript는 greet 함수에 인수를 전달하는 것을 잊었다고 알려준다.

하지만 컴파일을 통해 생성된 .js 파일을 열어보면 똑같이 작성되어 있는것을 확인 할 수 있는데 이는 TypeScript 의

“대부분의 경우 타입스크립트보다 사람이 더 잘 알 것이다.”

라는 핵심 가치에 기반한 결과이다.

따라서 자바스크립트 코드를 타입스크립트로 마이그레이션하는 경우 실행이 중단되는 일은 없다.

엄격한 타입스크립트 모드를 적용하고 싶은 경우

tsc --noEmitOnError hello.ts

해당 코드를 통해 noEmitOnError 컴파일러 옵션을 사용할 수 있다.

Explicit Types, 명시적 유형

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

Argument of type 'string' is not assignable to parameter of type 'Date'.

Date() 를 호출하면 문자열이 반환되기 때문에 다음과 같이 수정할 수 있다.

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

항상 이렇게 명시적으로 타입을 작성할 필요없이 타입 스크립트가 타입을 알아서 유추 할 수 있다.

이렇게 타입스크립트가 타입을 추론하는것은 하나의 기능으로 장황해질 수 있으므로 굳이 명시적으로 작성 할 필요는 없다.

Erased Types

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

TypeScript를 수정 없이 그대로 실행 할 수 있는 브라우저나 런타임은 현재 존재하지 않는다.

TypeScript 전용 코드나 타입 표기를 지워 컴파일 한다.

Down Leveling

// 기존
`Hello ${person}, today is ${date.toDateString()}!`;
 
// 재작성
"Hello " + person + ", today is " + date.toDateString() + "!";

TypeScript 는 최신 버전의 ECMAScript 코드를 ECMAScript3 또는 ECMAScript5 와 같은

예전 버전으로 다시 작성한다. 이를 다운레벨링이라고 부르기도 한다.

tsc --target es2015 input.ts

이런 식으로 실행하면 ECMAScript 2015가 지원되는 런타임이기만 하면 해당 코드가 실행될 수 있도록 변환된다는 의미이다.