자바스크립트와 타입

• Type: 어떤 값이 전달될 수 있고, 어떤 값은 실행에 실패할 것임을 설명하는 개념
• 자바스크립트는 동적 타입만을 제공 -> 코드를 실행해야 코드의 동작을 확인할 수 있음

const message = "Hello World!";
// ...

message.toLowerCase(); // "hello world"
message(); // TypeError: message is not a function

• 자바스크립트로 다음 코드를 실행할 때 3가지 사실을 생각해야 함
  • message는 호출 가능한가?
  • message가 toLowerCase라는 속성을 가지는가?
  • 두 값이 호출 가능하다면, 각각 무엇을 반환하는가?
• 자바스크립트에서도 string, numeber와 같은 경우는 typeof 연산자를 사용해 실행 시점에 타입을 알 수 있게됨

function fn(x) {
  return x.flip();
}

• 하지만 다음과 같이 타입 검사를 지원하지 않는 값들이 등장하면 코드를 실행하기 전까지 어떤 동작이 발생할지 예측할 수 없음
• 이를 방지하기 위해 정적 타입 시스템을 사용해 코드가 실행되기 전에 코드에 대해 예측할 필요가 있음

정적 타입 검사

• 타입스크립트와 같은 정적 타입 검사기는 코드를 실행하기 전에 프로그램에서 사용된 값들의 형태와 동작을 체크함
• 앞선 예시를 타입스크립트로 컴파일 시도하면 오류를 출력함

const message = "hello!";
 
message();

/*
This expression is not callable.
  Type 'String' has no call signatures.
*/

예외가 아닌 실행 실패

• 앞선 예제에서 봤듯이 자바스크립트에서 호출 가능하지 않은 것에 대해 호출을 시도할 경우 오류가 발생함
• 그렇다면 객체에 존재하지 않는 프로퍼티에 접근을 시도하는 경우는 어떻게 될까?

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; }'.

• 표현의 유연성을 희생하지만 버그로 간주되는 경우를 사전에 확인할 수 있다는 장점이 있음

// 오타
const announcement = "Hello World!";
 
// 의도한 코드: announcement.toLocaleLowerCase();
announcement.toLocaleLowercase();

/*
Property 'toLocaleLowercase' does not exist on type '"Hello World!"'. Did you mean 'toLocaleLowerCase'? */

// 호출되지 않은 함수
function flipCoin() {
  // 의도한 코드: Math.random()
  return Math.random < 0.5;
}
//Operator '<' cannot be applied to types '() => number' and 'number'.

//논리 오류
const value = Math.random() < 0.5 ? "a" : "b";
if (value !== "a") {
  // ...
} else if (value === "b") {
}
/* This condition will always return 'false' since the types '"a"' and '"b"' have no overlap. */

프로그래밍 도구로서의 타입

• 타입 검사기는 변수, 프로퍼티 상에 올바른 프로퍼티에 접근하고 있는지를 검사할 수 있도록 관련 정보들을 가짐
• 타입스크립트는 코드에서 실수했을 때 버그를 잡아주는 것 뿐만이 아니라 사용 가능한 프로퍼티를 제공하고, 코드를 입력하는 과정에서 오류 메시지를 제공할 수 있음
• 또한 타입스크립트는 오류를 자동으로 고쳐주거나, 코드를 리팩토링하는 기능, 정의로 빠르게 이동하거나 변수에 대한 참조를 검색하는 기능 등을 가지고 있음

tsc, TypeScript 컴파일러

hello.ts

//comment
console.log("Hello world!");

• 다음 코드를 tsc컴파일러로 변환하면 자바스크립트 파일이 생성됨

npm i typescript
// ts파일이 있는 폴더로 이동
tsc hello.ts

hello.js

//comment
console.log("Hello world!");

• 타입스크립트가 컴파일 할 때 사람이 작성한 것처럼 일관성 있게 들여쓰기를 하고, 여러줄에 코드가 배치되는 것을 고려하며, 주석도 잘 배치해줌

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

//terminal : Expected 2 arguments, but got 1.

• 컴파일러 상에서 오류가 발생하면 오류를 출력하지만, 자바스크립트 파일로 컴파일 해줌
• 컴파일 오류시 컴파일을 방지하려면 커맨드를 다음과 같이 입력해야함

tsc --noEmitOnError hello.ts

명시적 타입

• 필요한 경우 타입스크립트에 직접 타입을 전달할 수 있음
• 이를 통해 타입스크립트는 지정된 타입을 바탕으로 함수를 잘 사용했는지 사용 가능

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'.

greet("Maddison", new Date()); // Date 객체를 전달하면 오류가 발생하지 않음

• 이를 자바스크립트 코드로 컴파일 하면 다음과 같은 코드가 생성됨

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

• 타입스크립트를 자바스크립트로 컴파일하면서 타입 표기는 완전히 사라지게 됨
• 또한 기본값으로 ES3 버전의 자바스크립트 코드로 컴파일하기 때문에 백틱 연산자 대신 concat을 사용해 문자열을 생성함
  최신 문법의 자바스크립트를 사용하고 싶으면 --target 플래그를 사용해 컴파일할 버전 지정 가능

엄격도

• strict 플래그 설정을 통해 타입스크립트의 타입 검사 엄격도를 설정 가능
• 만약 strict 플래그를 끄면 타입 추론이 가장 관대한 기준에서 이루어지며 null/undefined 값에 대한 검사를 하지 않음
• 필요한 경우 strict 플래그를 통해 제어되는 각각의 플래그를 개별적으로 끄거나 킬 수 있음
  noImplictAny: 타입스크립트가 타입을 추론하지 못하는 경우 any로 간주하는데, 이 때 오류를 발생시킬지 여부
  strictNullChecks: null과 undefined를 다른 타입의 값에 할당하려 할 때 오류를 발생시킬지 여부

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