Read TypeScript : Document (The Basics)

타입스크립트를 왜 사용해야 할까?

편했던 js에서 더 문법을 많이 요구하는 타입스크립트를 왜 배워야 하는지 잘 모르겠어서 문서를 통해 공부하게 됐다.

타입스크립트는 정적타입 언어, 컴파일 언어, 자바스크립트에 의존적이고, 더 나은 구조와 간결함, 재사용성이 있다는데 내가 코드를 볼 때마다 그러한 느낌을 못 받았다. 프런트엔드를 공부하다면 TS는 "써도 되냐?"가 아닌 "써야 하는 이유"를 많이 말씀해 준다.

타입스크립트를 사용해야 하는 이유는 공부를 하면서 느낀 게

1. 버그 예방

아직까지는 작은 프로젝트를 하지만 큰 프로젝트와 협업을 했을 때 js만 사용했을 때의 오류를 찾는 것이 많이 어렵다. 하지만 타입을 정의해 주고 관리한다면 컴파일 과정에 타입 관련 에러를 막을 수 있다.

java를 과거에 공부했을 때 타입을 다 선언했을 때는 이해가 안 갔지만 타입을 다 선언했기 때문에 같은 숫자여도 문자인지 정수인지 구분을 할 수 있었다. 이러한 잦은 실수들이 버그를 예방해 줄 거 같다.

js는 다양한 동작들을 내장하고 다양한 연산을 실행한다.

2. 협업에 도움이 된다. (견고한 앱 + 인수인계)

찾아봤을 때 타입스크립트를 타입 지정이 다 되어있다면 이것은 결국 주석을 세세하게 단 것과 마찬가지이다. 어떤 타입의 값을 리턴해야 하는지 모든 것이 나와있기 때문에 함수 이름이나 변수명이 이상해도 어느 정도 다른 개발자들의 코드를 받을 때 쉽게 흐름을 파악할 수 있다.

---

Hello TypeScript! 

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

Documentation - Everyday Types

The Basics

js에서 연산의 오류를 찾아보자.

message를 정의한다.

const message = "Hello World!";

실행을 했을 때

// 'message'의 프로퍼티 'toLowerCase'에 접근한 뒤
// 이를 호출합니다
message.toLowerCase();
// 'message'를 호출합니다
message();

typeError가 나온다.

TypeError: message is not a function

다양한 타입과 오류들을 해결해 주기 위해 TS를 사용한다.

tsc, the TypeScript compiler

타입을 검사하기 위해 우선적으로 tsc를 설치해 준다. (전역으로 설치)

npm install -g typescript

빈 폴더에 hello.ts를 만들어 코드를 작성한다. (js에서는 아무런 오류가 없었던 코드를 넣는다.)

검사 : tsc hello.ts

• greet function에 date 값이 추가되어 있지 않는 상태.

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

greet("Brendan");

아래와 같은 error가 발생한다.

5 greet("Brendan");
  ~~~~~~~~~~~~~~~~

  hello.ts:1:24
    1 function greet(person, date) {
                             ~~~~
    An argument for 'date' was not provided.

Found 1 error in hello.ts:5

TS는 greet function에 인자를 전달하는 것을 잊었다고 말해준다. 타입 검사를 통해 코드 상의 문제를 발견해 준다.

Explicit Types

TypeScript의 코드를 수정하여 person 이 string이고 date 가 Date 객체임을 알려줘야 한다.

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

greet("Maddison", new Date()); 
// Date()만 했을 경우에는 string을 반환하기 때문에 
// new Date()를 사용하여 Date Type을 생성해야한다.

noImplicitAny

TS는 값의 타입을 추론하지 않고 가장 관대한 타입인 any로 간주한다.

any를 사용하면 애초에 TS를 사용하는 이유가 무색해지기 때문에 프로그램에서 타입을 더 구체적으로 사용할수록, 더 많은 유효성 검사와 도구 기능을 사용할 수 있으며, 코드 상에서 보다 적은 버그를 만나게 된다.