타입스크립트 프로그래밍 - 1~3장

 

타입스크립트를 가볍게 접한 후에 프로젝트를 진행하며 사용을 해보니

조금 더 깊게 알아야겠다는 생각이 들어서 구매했다.

 

알고 있던 부분은 넘어가고 알게된 부분이나 기억해야될 부분을 정리해서 작성해보기로 했다.

 

 

1장~2장

 

동적 타입의 자바스크립트는 프로그램 실행 전에는 타입을 알 수 없다.

또한 암묵적 타입 변환을 통해 원하지 않는 값으로 타입 변환이 되는 문제가 생겼을 경우

런타임 시점에 알게되니 추적하기에 어려움이 있다.

 

타입스크립트는 정적으로 코드를 분석해서 코드를 실행하기 전인 컴파일 시점에서 에러를 띄운다.

 

타입스크립트는 그저 동적으로 타입을 지정하는 자바스크립트에 정적인 타입을 붙여준 것이니

점진적으로 마이그레이션이 가능하다.

 

---

 

3장. 타입의 모든 것

 

- 어노테이션은 생략할 수 있다면 생략하자

: 코드를 줄이고 타입을 좁혀서 타입스크립트가 추론하도록 하자.

 

- 알 수 없는 값이 있을 때 any 대신 unknown을 사용하자

: unkown은 타입을 검사하여 정제하기 전까지는 nuknown의 값을 사용할 수 없게 강제한다.

let a: unknown = 30;
let b = a + 10; // Object is of type 'unknown'.ts(2571)

어떤 값일지 모르기 때문에 에러를 반환한다.

let a: unknown = 30;
if(typeof a === 'number'){
  let b = a + 10;
}

number인 것을 확인하게되면 에러 없이 사용할 수 있다.

 

 

- const로 변수 선언 시 타입 리터럴로 추론한다.

: 변하지 않는 값이기 때문에 변수가 가질 수 있는 가장 좁은 타입으로 추론하기 때문

* 객체와 배열은 const로 만들어도 더 좁게 추론하지 않는다.

 

 

- object 타입만으로는 내부 프로퍼티를 구분할 수 없다.

: 아래의 코드는 hello의 내부 프로퍼티를 추론할 수 없다.

let hello: object = {
  greet: "hello"
}

let b = hello.greet; //Property 'greet' does not exist on type 'object'.ts(2339)

 

명시적으로 정의하지 말고 타입스크립트가 추론하거나 중괄호 안에서 타입을 묘사하자.

let hello = {
  greet: "hello"
}

// or

let hello: {greet: string} = {
  greet: "hello"
}

 

 

- 인덱스 시그니처(index signature)

: [key: T]: U와 같은 문법을 의미한다.

인덱스 시그니처를 이용하면 명시적으로 정의한 키 외에 다양한 키를 추가할 수 있다.

let a: {
  b: number,
  c?: string,
  [key: number]: boolean
}

* 키(T)는 반드시 number나 string 타입에 할당할 수 있는 타입이어야 한다.

 

 

- 객체 리터럴을 사용할 땐 빈 객체는 피하자

: 빈 객체({})는 null과 undefined를 제외한 모든 타입이 할당될 수 있다.

let object = {}

object = 2;
object = "안녕";

 

 

- 타입별칭은 블록 영역에 적용된다.

: 모든 블록과 함수는 자신만의 영역을 가지고, 내부에 정의한 타입별칭이 외부의 정의를 덮어쓴다.

type Color = "red";

let num = 5;

if (num) {
  type Color = "blue"; // 덮어씀
  let selectColor: Color = "blue"; 
} else {
  let selectColor: Color = "red";
}

 

 

- 빈 배열([])로 초기화 시 any로 추론한다.

let a = [];
a.push("1");
a.push(1);

하지만 함수 안에서 배열을 선언하고 반환 시 최종 타입을 할당한다.

const test = () => { // test: () => (string | number)[]로 추론
  let a = [];
  a.push("1");
  a.push(1);
  return a;
};

 

- 튜플은 선언할 때 타입을 명시해야 한다.

: 자바스크립트에서 배열과 튜플에 같은 대괄호를 사용하기 때문에

  타입스크립트에서는 대괄호를 배열 타입으로 추론하기 때문

 

 

- 열거형(Enum)을 멀리하자.

: enum의 경우 값으로 열거형에 접근할 수 있는데 존재하지 않는 값이더라도 에러를 발생시키지 않는다.

enum Color {
  Red,
  Blue,
  Green,
}

let a = Color.Blue;

let b = Color[5]; // 에러가 발생하지 않음

const enum을 사용하여 문자열 리터럴로만 접근하게 할 수는 있다.

const enum Color {
  Red,
  Blue,
  Green,
}

let a = Color.Blue;

let b = Color[5]; // A const enum member can only be accessed using a string literal.ts(2476)

const enum은 아무 자바스크립트도 생성하지 않는다.

typescript에서 javascript로 변환되는 과정에서 const enum은 아무 자바스크립트도 생성하지 않고

대신 필요한 곳에 열거형의 멤버의 값을 채워넣는다.

=> 이렇게 채워넣는 기능으로 인해 문제가 발생할 수 있기 때문에 사용을 멀리 해야한다.

=> 안전하게 사용하는 방법이 조금 까다롭다.

=> 열거형 자체를 멀리 하자.