[이펙티브 타입스크립트] 2장. 타입스크립트의 타입 시스템

6. 편집기를 사용하여 타입 시스템 탐색하기

 

TS 설치시 실행 되는 것 
1. 타입 스크립트 컴파일러 (tsc)

2. 타입 스크립트 서버 (tsserver) 

 

편집기를 통해 타입 추론을 확인 할 수 있는데, 아래와 같이 적혀 있다. 

item 19 (108p)를 보면 타입 추론이 된다면 명시적 타입 구문은 필요하지 않다.
오히려 모든 변수에 타입을 지정하는 것은 비생산적이고 방해가 된다. 

 

 

조건문의 분기, 객체 개별 속성을 확인 할 것 

ex ) 
bannerType은 WebView 와 Screen 둘 중 하나이지만,
if 문 안의 bannerType은 WebView이다 .

 

 

ex) 탐색기에서 오류 1 

// 오류를 일으키는 타입스크립트 코드 예제
type User = {
  name: string;
  age: number;
};

const user: User = {
  name: "John",
  age: "25", // 잘못된 타입
};

console.log(user.name);
//~~~~Type 'string' is not assignable to type 'number'.

 

ex ) 탐색기에서 오류 2

// HTMLElement 변수 선언
const element = document.getElementById('foo')

// 예시 조건문 분기
if (type of element === 'object') {
  element = document.getElementById("myElement");
  //~~~~~ HTMLElement | null 은 'HTMLElement' 형식에 할당할 수 없다!!
 
} else {
  element = null;
}

 

typeof null 도 object이기 때문! 

 

 

7. 타입이 값들의 집합이라고 생각하기 

 

변수에는 'null, undefined, string' 등 다양한 종류의 값에 할당될 수 있다. 
집합은 타입의 범위라고 불린다. 

 

never :
1. 함수의 반환 타입으로 사용: 함수가 항상 예외를 던지거나 절대로 반환되지 않는 경우에 사용됩니다.
2. 주로 예외 처리나 프로그램의 흐름 분석 등 특정 상황에서 사용되는 타입입니다.

예시 ) 

function throwError(message: string): never {
  throw new Error(message);
}

function infiniteLoop(): never {
  while (true) {
    // 실행 흐름이 여기에 도달할 수 없음
  }
}

위 예시에서 throwError 함수는 항상 예외를 던지고, infiniteLoop 함수는 절대로 반환되지 않습니다.

이러한 함수의 반환 타입으로 never를 사용하여 해당 함수의 동작을 명시적으로 표현할 수 있습니다.

 

타입 스크립트의 유닛(Unit), 리터럴 (literal) 타입은 한 가지 값만 포함하는 타입 

ex) 

type minWidth =  18

유니온 타입은 여러개로 묶음 
ex) 

type status: "success" | "error" | "pending";

 

interface와 extends 키워드로 표현한 상속관계 
       +-----------------------+
       |       Animal          |
       +-----------------------+
                 /_\
                  |
   +-------------------------------+
   |                               |
   v                               v
+-------+                     +--------+
|  Dog  |                     |  Cat   |
+-------+                     +--------+

interface Animal {
  name : string
}

class Dog implements Animal {
  leg : 4
}

class Cat implements Animal {
  eye : 'big'
}

예시가 허접하군...ㅎ

 

타입은 엄격한 상속관계가 아니라 겹쳐지는 집합 (벤다이어그램)으로 표현

 

 

8. 타입 공간과 값 공간의 심벌 구분하기 

 

심벌 : 타입 공간이나 값 공간 중의 한 곳에 존재. 
심벌은 이름이 같더라도 속하는 공간에 따라 다른 것을 나타낼 수 있다. 

 

 

심벌 : type, interface 다음
값 : let, const 선언

ex) 
type 명과 변수 명이 같아도 아무 연관이 없다. 

-> 상황에 따라 오류 발생 가능

 

 

9. 타입 단언보다는 타입 선언을 사용하기

 

타입 선언(: Type) 은 할당하는 값이 해당 인터페이스를 만족하는지 검사한다. 
단언(as Type) 은 강제로 타입을 지정했으니 타입 체커에게 오류를 무시하라고 하는 것이다 .

 

// 단언 

const num : number = 3


// 선언 
const bob = { name : 'bob' } as Person

 

10. 객체 래퍼 타입 피하기 

 

string 객체는 오직 자기 자신하고만 동일하다. 
어떤 속성을 기본형에 할당한다면 그 속성이 사라진다. 

 

래퍼 객체는 타입 구문의 첫 글자를 대문자로 표기한다. 

기본 타입	래퍼 객체
string	String
number	Number
bigint	BigInt
boolean	Boolean
symbol	Symbol

 

기본형(Primitive Types): 기본형은 JavaScript의 원시 데이터 타입과 동일합니다.

 

종류: boolean, number, string, null, undefined, symbol, bigint. 

 

래퍼 객체(Wrapper Objects): 래퍼 객체는 기본형 값을 감싸는 래퍼(Wrapper) 역할을 합니다. TypeScript에서는 기본형 값에 대한 프로퍼티와 메서드에 접근하기 위해 래퍼 객체를 사용할 수 있습니다. 

 

종류 : Boolean, Number, String. 

 

차이점: 기본형은 기본적으로 각각의 기본형 타입을 나타내는 타입을 갖습니다. 예를 들어, boolean은 기본형 타입으로 사용될 때 boolean 타입을 갖습니다. 래퍼 객체는 각각의 기본형 타입을 감싼 객체 타입을 갖습니다. 예를 들어, Boolean은 Boolean 타입을 갖습니다.

 

값 할당: 기본형은 값이 복사됩니다. 즉, 기본형 변수를 다른 변수에 할당하면 값이 복사되어 전달됩니다. 래퍼 객체는 값이 참조됩니다. 즉, 래퍼 객체 변수를 다른 변수에 할당하면 같은 객체를 참조하게 됩니다.

 

메서드와 프로퍼티: 기본형은 메서드와 프로퍼티를 직접 호출할 수 없습니다. 예를 들어, 기본형 number에는 toFixed()와 같은 메서드를 직접 호출할 수 없습니다. 래퍼 객체는 기본형 값을 감싸고 있으므로 해당 타입의 메서드와 프로퍼티에 접근할 수 있습니다. 예를 들어, Number 객체에는 toFixed()와 같은 메서드를 사용할 수 있습니다.

 

 

 

객체 래퍼를 사용해야 하는 주요 이유는 다음과 같습니다: 

1. 메서드와 프로퍼티 접근: 객체 래퍼는 해당 기본형 값에 대한 메서드와 프로퍼티에 접근할 수 있도록 해줍니다. 예를 들어, Number 객체의 toFixed() 메서드를 사용하여 숫자를 소수점 이하로 제한할 수 있습니다. 이러한 기능은 특정 연산이나 포맷팅 작업을 수행할 때 유용합니다.

 

2. 객체 기능 확장: 객체 래퍼는 JavaScript의 프로토타입 체인 메커니즘을 활용하여 해당 기본형의 기능을 확장할 수 있습니다. 즉, 기본형에 새로운 메서드나 프로퍼티를 추가할 수 있습니다. 이는 개발자가 기본형에 원하는 기능을 직접 추가하여 사용할 수 있도록 합니다.

 

3. 다형성 지원: 객체 래퍼를 사용하면 다른 타입의 값들과 상호작용할 때 일관된 방식으로 다형성을 지원할 수 있습니다. 예를 들어, Number 객체를 사용하여 숫자 값을 처리하면 문자열 값을 처리하는 데 사용되는 String 객체와 일관성 있는 코드를 작성할 수 있습니다. 그러나 객체 래퍼를 사용하는 것은 항상 필요한 것은 아닙니다.

 

객체 래퍼를 사용하면 불필요한 메모리 사용과 성능 저하가 발생할 수 있습니다. 따라서 객체 래퍼를 사용해야 할 때는 해당 기능을 사용해야 하는 명확한 이점이 있을 때에만 사용하는 것이 좋습니다. 그렇지 않은 경우에는 기본형을 사용하는 것이 바람직합니다.

 

 

ex) 

x = 'string'
x.a = 's'
console.log(x.a) // undefined

 

타입스크립트는 기본형과 객체 래퍼 타입을 별도로 모델링한다. 
string과 String은 잘못 타이핑하기 쉽다. 

 

래퍼 객체 : 타입 구문의 첫 글자를 대문자로 표기할 것 

런타임의 값은 객체가 아니라 기본형, 
기본형의 타입은 객체 레퍼에 할당할 수 있기 때문에 ts는 기본형 타입을 객체 래퍼에 할당하는 선언을 허용한다. 

 

객체 래퍼 타입은 지양하고, 대신 기본형 타입을 사용해야 한다. 
String 보다는 string!! 

 

 

11. 잉여 속성 체크의 한계 인지하기 

 

잉여 속성 체크는 타입 단언문을 사용할 때에도 적용되지 않는다. 

(정확하게 이해 어려움...)