타입스크립트 핸드북에서 새로 알게된 점 1

The Basics

1. 자바스크립트는 동적타이핑(dynamic typing) 언어이다. 따라서, 코드를 실행해보아야만 타입 에러가 나는지 등을 확인할 수 있다. 타입스크립트는 정적타이핑(static typing)을 함으로써 자바스크립트 코드를 실행하기 전 타입 유추가 가능하게 해준다.

2. tsc는 타입스크립트 컴파일러이다

   tsc hello.ts : 타입스크립트 에러가 있는 경우 에러를 출력하고, hello.ts파일을 js파일로 컴파일한 hello.js 파일을 output으로 만들어낸다.

   tsc --noEmitOnError hello.ts : 오류가 보고된 경우 출력을 내보내지 않는다. 즉, 에러가 없을 경우만 output을 만들어낸다.

   tsc --target es2015 hello.ts : 타입스크립트는 기본적으로 자바스크립트의 ES3문법으로 컴파일을하는데, --target 옵션으로 ECMAScript 버전을 지정할 수 있다.

3. 타입스크립트에서 명백한 타입명시를 해주지 않아도 되는 경우도 있다.

   let msg = "hello there!"; : msg가 string임이 명백함

4. Type annotation은 절대 프로그램 런타임 동작을 변경하지 않으니 주의 (런타임에 전혀 관여 x)

5. noImplicitAny : noImplicitAny옵션은 any 타입으로 암시한 표현식과 선언에 오류를 발생시킨다. 타입스크립트는 any로 지정된 변수의 타입 체크를 하지 않는다. 따라서 any는 가장 관대한 타입이라고도 볼 수 있지만, 종종 any 타입은 타입스크립트의 본 목적을 헛되게 하며 버그를 초래할 수 있다. 따라서 최대한 피해야할 타입이다. (대신 unknown 사용)

6. strictNullChecks : null과 undefined를 더욱 명백히 다룬다. null과 undefined가 명백하지 않으면 걷잡을 수 없는 버그를 초래할 수도 있으니 이 둘을 구분하는 것이 중요하다!

Everyday Types

1. optional 타입(?) 사용을 할 땐, undefined 여부를 체크하는 것이 중요하다. (자바스크립트에서 prop으로 값을 전달하지 않으면 런타임 에러 대신 해당 값이 undefined이 되기 때문)

2. Union Type은 두개 이상의 타입으로 형성된 타입이다. (ex) value: string | number)

3. Type Alias란 타입에 이름을 지정해주는 것이다. (타입을 변수로 선언하는 것과 비슷한 개념)

   (타입스크립트를 사용할 때 맨날 쓰는 형태인데, 이름을 제대로 몰랐다 😂)

4. Interface 선언은 object 타입에 이름을 지정하는 또 다른 방법이라 할 수 있다.

   // Type Alias
   type Point = {
     x: number;
     y: number;
   };
   
   // Interface
   interface Point {
     x: number;
     y: number;
   }

5. Type Aliases과 Interfaces의 차이점?

   • interface는 extends를 사용하여 타입을 확장할 수 있다.

     

   • interface는 다음처럼 존재하는 interface에 새로운 필드를 추가할 수 있다.

     

     하지만 기능이 거의 유사하기 때문에, 개인 취향에 따라 선택해서 사용하면 된다고 한다.

6. Type Assertions은 타입스크립트가 타입을 구체적으로 파악하지 못할때 이를 직접적으로 명시해 줄 때 사용된다. (그러나 타입스크립트 코드는 컴파일 때 지워지므로 런타임에서는 전혀 효용이 없다!)

7. Literal Type은 string의 문장그대로를, number의 특정 수를 그대로 타입으로 보는 것이다.

   (ex) align: "left" | "right" | "center", returnType: -1 | 0 | 1)

   (+ boolean은 원래 true | false union 타입으로 되어있음)

8. as const 는 const와 비슷하지만, 타입시스템에서 object의 모든 속성이 일반적인 string 또는 number 타입 대신 literal 타입이라는것을 보장한다.

const req = { url: "https://example.com", method: "GET" } as const;

1. null / undefined
   • strictNullChecks off: null과 undefined는 어떤 타입에든 할당가능
   • strictNullChecks on: nul이 가능한 변수라면 사용하기 전 null인지 체크해야함
   • Non-null Assertion Operator(!) : null 또는 undefined가 아님이 확실할 때 x!.toString() 이렇게 하면 타입에러가 발생하지 않는다. → 하지만 런타임과는 관련 없으므로 주의해야함
2. bigint : const oneHundred: bigint = BigInt(100) 또는 100n;
3. Symbol() 함수를 통해 전역적으로 고유한 참조를 만들 수 있다.

const firstName = Symbol("name");
const secondName = Symbol("name");
 
if (firstName === secondName) {
 // firstName 과 secondName은 고유한 타입을 갖는다.
 // Can't ever happen
}