비도 오고 그래서~ 타스 생각이 났어 ~~

타입스크립트 서버 또한 언어 서비스를 제공한다

타입스크립트 설치 시 실행할 수 있는 것
- 타입스크립트 컴파일러
- 타입스크립트 서버 (tsserver)
코드 자동완성, 명세 검사, 검색, 리팩토링 등의 기능을 제공한다
이들을 적극 활용해보자! 😉

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

타입스크립트에서의 타입은 ‘할당 가능한 값들의 집합' 이다
- 타입스크립트가 오류를 체크하는 순간에는 타입을 가지고 있기 때문에
타입스크립트에서 never 타입은 공집합
- 가장 작은 집합은 아무 값도 포함하지 않는 공집합이다
- 공집합이기 때문에 아무런 값도 할당할 수 없다
유닛타입 = 리터럴 타입
- never 에서 한 단계 커진 것
- 한 가지 값만을 포함한다
```
type A = 'A';
```
유니온 타입
- 리터럴 타입을 두 개 혹은 새개로 묶을 때 사용
```
type AB = 'A' | 'B'
type AB12 = 'A' | 'B' | 12;

type AB = keyof (AB | AB12) -> never 
```
- 값 집합들의 합집합을 의미

인터섹션 타입

타입을 교집합으로 가진다
각 타입 내의 속성을 모두 포함한다

interface Person {
    name: string;
} 

interface Lifespan {
    birth : Date;
    death ?: Date;
}

type PersonSpan = Person & LifeSpan;
-> name, birth, death 모두 사용 가능하다

서브 타입

extends를 활용한 것,
어떤 집합이 다른 집합의 부분 집합이라는 것

interface Person{
    name: string;
} 

interface PersonSpan extends Person {
    birth: Date;
    death ?: Date;
}
-> PersonSpan의 값들은 name과 birth 속성을 가져야 제대로된 서브집합이라고 볼 수 있다

unknown
- 전체 집합

*일단 할 게 많아서 급한 불 좀 끄고 다시 와서 정리 하겠습니당

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

가장 작은 집합은 공집합이며, 타입스크립트에서는 never 타입이다.

그 다음으로 작은 집합은 한 가지 값만 포함하는 타입이다. 타입스크립트에서는 리터럴(literal) 타입이다.

두 개, 새 개로 묶으려면 유니온(union) 타입을 사용한다. 유니온 타입은 값 집합들의 합집합이다.

타입스크립트 오류 중 ‘할당 가능한'아라는 문구는 ~의 원소 또는 ~의 부분 집합 관계를 의미한다.

집합의 관점에서, 타입 체커의 주요 역할은 하나의 집합이 다른 집합의 부분 집합인지 검사하는 것이다.

interface Person {
  name: string;
}

interface Lifespan {
  birth: Date;
  death?: Date;
}

type PersonSpan = Person & Lifespan

& 연산자은 두 타입의 교집합을 계산한다. 결과값이 공집합이 나올 것으로 예상할 수 있지만 타입 연산자는 인터페이스의 속성이 아닌, 값의 집합(타입의 범위)에 적용된다. 그래서 Person과 Lifespan을 둘 다 가지는 값이 인터섹션 타입에 속하게 된다. 인터섹선 타입의 값은 각 타입 내의 속성을 모두 포함하는 것이 일반적인 규칙이다.

keyof (A&B) = (keyof A) | (keyof B)
keyof (A|B) = (keyof A) & (keyof B)

타입이 집합이라는 관점에서 extends의 의미는 ~의 부분 집합이라는 의미로 받아들일 수 있다.

function getKey<K extends string>(val: any, key: K) {

}

K는 string의 부분 집합 범위를 가지는 어떠한 타입. string 리터럴 타입, string 리터럴 타입의 유니온, string 자신을 포함한다.

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

interface Person {name: string};

const alice: Person = {name: 'Alice'};
const bob = {name: 'Bob'} as Person;

두 가지 방법은 결과가 같아 보이지만 그렇지 않다. 첫번째 방법은 타입 선언, 두번째 방법은 타입 단언이다. 타입 단언은 타입스크립트가 추론한 타입이 있더라도 Person 타입으로 간주한다. 타입 단언보다 타입 선언을 사용하는게 낫다.

타입 선언은 할당되는 값이 해당 인터페이스를 만족하는지 검사한다. 타입 단언은 강제로 타입을 지정했으니 타입 체커에게 오류를 무시하라고 하는 것이다. 타입 단언이 꼭 필요한 경우가 아니라면, 안전성 체크가 되는 타입 선언을 사용하는 것이 좋다.

const bob = <Person>{} 은 {} as Person과 동일하다. 이런 형식은 리액트에서 컴포넌트 태그로 인식되기 때문에 잘 쓰이지 않는다.

interface Person {name: string};

const people = ['alice', 'bob', 'jan'].map(name => ({name})); // Person[]을 원했지만 결과는 {name: string;}[]

const people2 = ['alice', 'bob', 'jan'].map(name => ({name} as Person)); // 타입 단언

const people3 = ['alice', 'bob', 'jan'].map(name => {
  const person: Person = {name};
  return person
}); // 타입 선언

const people4 = ['alice', 'bob', 'jan'].map((name): Person => ({name})); // 타입 선언

화살표 함수의 타입 선언은 추론된 타입이 모호할 때가 있다. 타입 단언 형식보다는 타입 선언 형식으로 표현해주자

(name): Person은 name의 타입이 없고, 반환 타입이 Person이라고 명시한다. (name: Person)은 name의 타입이 Person임을 명시하고 반환 타입은 없다는 의미이기 때문에 오류가 발생한다.

타입 단언은 타입 체커가 추론한 타입보다 우리가 판단하는 타입이 더 정확할 때 의미가 있다. 모든 타입은 unknown의 서브타입이기 때문에 unknown이 포함된 단언문은 항상 동작한다.

객체 래퍼 타입 피하기

string 기본형에는 메서드가 없지만, 자바스크립트에는 메서드를 가지는 String 객체 타입이 정의되어 있다. 다른 기본형에도 동일하게 객체 래퍼 타입이 존재한다. 이 래퍼 타입들 덕분에 기본형 값에 메서드를 사용할 수 있고, 정적 메서드도 사용할 수 있다. 타입스크립트는 기본형과 객체 래퍼 타입을 별도로 모델링한다.

string은 String에 할당 할 수 있지만 String은 string에 할당할 수 없다.

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

type K = keyof (Person | Lifespan); // 타입이 never

위의 타입이 never 인 이유는 아래와 같다.

keyof (A|B) = (keyof A)& (keyof B)
keyof (A&B) = (keyof A) | (keyof B)

타입 단언보다 타입 선언 사용하기


const people = ['alice', 'bob', 'jan'].map(name => ({name}));
// Person[] 을 원했지만 결과는 { name: string; } [] 

// 타입 단언을 쓰면
const people = ['alice', 'bob', 'jan'].map(name => ({name} as Person));

// 선언하기 1번 
const people = ['alice', 'bob', 'jan'].map(name=> {
    const person: Person = {name};
    return person;
} ); // 타입은 Person[]

// 선언하기 2번 (리팩터링)

const people =  ['alice', 'bob', 'jan'].map((name):Person => ({name}));
// 타입은 Person[]

2번이 어떻게 가능한가.. (name):Person 은 name 의 타입이 없고 반환 타입이 Person 이라고 명시한다.

선언보다 단언이 유리한 경우

타입 체커의 추론보다 나의 판단이 더 정확할 때
DOM element 에 대해서..
타입스크립트는 DOM에 접근 할 수 없기 때문에 DOM 타입을 모른다.

const el = document.body  as Person; // 에러
const el = document.body as unknown as Person; // ㅇㅋ

첫번째의 경우 HTMLElement 와 Person 이 서로의 서브타입이 아니기 때문에 변환이 불가능하다.
unknown 을 사용하면, 동작하는데 그 이유는 unknown이 모든 타입의 서브타입이기 때문이다.

객체 래퍼 타입 피하기

string 은 String 타입에 할당 할 수 있지만, String 은 string 타입에 할당 할 수 없다.
기본형 타입은 객체 래퍼에 할당 할 수 있기 때문에, 타입스크립트는 기본형 타입을 객체 래퍼에 할당하는 선언을 허용한다.

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

interface Room {
  numDoors: number;
  ceilingHeightFt: number;
}

const r:Room {
  numDoors:1,
  ceilingHeightFt:10,
  elephant: 'present'
}
// 개체 리터럴은 알려진 속성만 지정할 수 있으며, Room 형식에 elephant 가 없습니다.

구조적 타입시스템에서 발생 할 수 잇는 중요한 종류의 오류(다른 타입이 추가되는 것)를 잡을 수 있도록 '잉여 속성 체크'라는 과정이 수행되었다.
하지만 이러한 잉여속성 체크는 매번 이루어지는 것은 아니다.

잉여 속성 체크가 일어나는 경우

타입이 선언되어 있을 때, 객체 리터럴로 값을 할당 할 때
타입이 선언되어 있는 매개변수에, 객체 리터럴로 매개변수를 전달할 때

잉여 속성 체크가 일어나지 않는 경우

타입 선언대신 타입 단언을 사용 할 때
타입이 선언된 값 혹은 매개변수에 객체 리터럴이 아니라 변수로 값을 할당하는 경우

잉여 속성 체크가 필요한 단적인 예시


interface Option{
  title: string;
  darkMode?:boolean;
}

const o1 : Option = document;
const o2 : Option = new HTMLAnchorElement;
// 에러 없음

왜 o1. 과 o2 의 경우 에러가 없을까?
일단 잉여속성 체크를 하지 못했고 (객체 리터럴로 값을 할당한게 아니므로), 그에 따라서 document 와 HTMLAnchorElement 에는 string 타입인 title 속성이 있기 때문에!
따라서 위의 할당문은 정상이다.
잉여 속성을 체크함으로써, 기본적으로 타입 시스템의 구조적 본질을 해치지 않으면서 객체 리터럴에 알 수 없는 속성을 허용하지 않아서 앞에서 다룬 문제점들을 해결 할 수 있다.

함수 표현식에 타입 적용하기

타입스크립트에서는 함수 표현식을 사용하는 것이 좋다.
왜? 함수의 매개변수 부터 반환값까지 전체를 함수 타입으로 선언하여, 함수 표현식에 재사용 할 수 있기 때문이다.


type BinaryFn = (a: number, b:number)=>number;
const add: BinaryFun =(a,b)=>a+b;

타입과 인터페이스의 차이점 알기

공통점

타입 선언된 변수에 객체리터럴 할당 시 잉여속성을 체크해준다.
인덱스 시그니쳐를 사용 할 수 있다.
함수 타입도 정의 할 수 있다. (그런데 이 경우는 대부분 타입 alias 를 쓰는게 좋다.)
제네릭이 가능하다.
인터페이스는 타입을 확장할 수 있으며, 타입은 인터페이스를 확장 할 수 있다.

// 인터페이스가 타입 확장
interface IStateWithPop extends TState{
    population:number;
}

// 타입이 인터페이스 확장
type TStateWithPop = IState & { population: number;}

클래스 구현(implements) 시, 타입과 인터페이스 둘다 사용 가능

차이점

유니온 타입은 있지만 유니온 인터페이스는 없다.
인터페이스는 타입을 확장(extends) 할 수 있지만 타입은 불가능하다.

유니온 타입을 확장해야하는경우

type Input = { } ;
type Output = {} ;

inteface VariableMap {
    [name:string] : Input | Output;
}

유니온 타입에 name 속성을 붙인 타입 만들기

type NamedVariabel = (Input | Output) & { name: string } ;

튜플과 배열타입도 type 키워드로 더 간결하게 표현 가능

type Pari = [number, number];
type StringList = string[];
type NamedNums = [string, ...number[]];

인터페이스는 보강(agument) 이 가능하다. (선언 병합! declaration merging)

interface IState { name: string; capital: string; }

interface IState{ population:number; }

const newyork : IState{ name: 'NewYork', capital: 'NewYork', population: 500_00 }


- 위와 같은 선언 병합은 주로 타입 선언 파일에서 사용된다.
- 따라서 선언 합을 지원하기 위해서는 무조건 inteface 를 사용해야한다.
- 타입스크립트는 여러 버전의 자바스크립트 표준 라이브러리에서 여러 타입을 모아 병합한다. 병합을 통해서 Array 인터페이스에 여러 메서드가 추가된다.
- 따라서 프로퍼티가 추가되는 것을 원치 않는다면, 인터페이스 대신 타입을 사용해야한다.
- 

## 몰랐던 지식

```ts
inteface Example{
  [key:string] : string;
}

이거를 인덱스 시그니처라고 한다.

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

편집기의 타입스크립트 언어 서비스를 적극 활용해야 한다. 언어 서비스는 보통 편집기를 통해서 제공된다. 자동 완성 같은 서비스를 사용하면 코드 작성이 간편해진다. 보통의 경우 심벌 위에 마우스 커서를 대면 타입스크립트가 그 타입을 어떻게 판단하고 있는지 확인할 수 있다.

이를 활용하면 타입 시스템이 어떻게 동작하는지, 타입스크립트가 어떻게 타입을 추론하는지 개념을 잡을 수 있다.
- 특정 시점에 타입 스크립트가 값의 타입을 어떻게 이해하고 있는지 살펴보는 것은 타입 넓히기(아이템 21)와 타입 좁히기(아이템 22)의 개념을 잡기 위해 필요하다.
- 조건문 분기에서 타입이 어떻게 변하는지 살펴보는 것은 타입 시스템을 익히는 좋은 방법이다.
편집기는 ‘Go to Definition’ 옵션을 제공한다. 타입스크립트가 동작을 어떻게 모델링하는지 알기 위해 타입 선언 파일을 찾아보는 방법을 알아야 한다.

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

변수에는 다양한 종류의 값을 할당할 수 있다. 타입은 ’할당 가능한 값들의 집합’이고, 이 집합은 타입의 ‘범위’라고 부르기도 한다.
never: 가장 작은 집합. 아무 값도 포함하지 않는 공집합. never 타입으로 선언된 변수에는 아무런 값도 할당할 수 없다.
유닛(unit) 또는 리터럴(literal): 한 가지 값만 포함하는 타입
```
type A = 'A';
type B = 'B';
type Twelve = 12;
```
유니온(union): 두 개 이상의 값을 가지는 타입
```
type AB = 'A' | 'B';
type AB12 = 'A' | 'B' | 12;
```
집합의 관점에서 타입 체커의 주요 역할은 하나의 집합이 다른 집합의 부분 집합인지 검사하는 것이다.
타입 연산자는 인터페이스의 속성이 아닌, 값의 집합(타입의 범위)에 적용된다.
- & 연산자는 두 타입의 인터섹션(intersection, 교집합)을 계산한다.
  
  아래의 경우 두 인터페이스가 공통으로 가지는 속성이 없으니 아래의 PersonSpan을 공집합(never 타입)으로 예상하기 쉽다.
```
interface Person {
  name: string;
}

interface Lifespan {
  birth: Date;
  death?: Date;
}

type PersonSpan = Person & Lifespan;
```
  그러나 타입은 ‘할당 가능한 값들의 집합’임을 명심해야한다. Person과 Lifespan의 교집합은 Person 타입이 될 수도 있고, Lifespan 타입이 될 수도 있는 값들의 집합이다. 두 타입 모두에 해당하는 값의 집합이다.
```
const ps: PersonSpan = {
  name: 'Alan Turing',
  birth: new Date('1912/06/23'),
  death: new Date('1954/06/07'),
} // 정상
```
- 예를 들어 string | number 와 string | Date 간의 교집합은 string 이다.
- extends 또한 비슷하게 값의 집합 관점에서 해석해보자. 아래의 경우, ‘B의 부분 집합인 A’로 해석할 수 있다.
```
interface A extends B {
    ...
}
```
  extends 키워드는 제너릭 타입에서 한정자로 쓰이는데, 이 문맥에서도 ‘~의 부분집합`을 의미한다.
  
  아래의 경우 K는 string의 부분 집합 범위를 가지는 어떤 타입이 된다. 즉 K는 string 리터럴 타입, string 리터럴 타입의 유니온, string 자신이 될 수 있다.
```
function getKey<K extends string>(val: any, key: K) {
  // ...
}
```
타입이 값의 집합이라는 관점에서 배열과 튜플의 관계가 명확해진다.
- number[]는 [number, number]의 부분 집합이 아니기 때문에 할당할 수 없다.
- 반면 [number, number]는 number[]의 부분 집합이기 때문에 할당할 수 있다.
- 구조적 타이핑 관점에서 트리플은 페어에 할당 가능할 것으로 보인다.
  
  그러나 [number, number, number]는 [number, number]에 할당할 수 없다. 타입스크립트는 숫자 쌍에 length 속성을 가지고 있고, 이 length의 값이 맞지 않기 때문에 트리플을 페어에 할당할 수 없다.

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

타입스크립트 코드를 읽으면서 타입인지 값인지 구분하는 방법을 터득해야 한다.
type과 interface 같은 키워드는 타입 공간에만 존재한다.
“foo”는 문자열 리터럴이거나, 문자열 리터럴 ‘타입’일 수 있다.
typeof, this 그리고 많은 연산자와 키워드들은 타입 공간과 값 공간에서 다른 목적으로 사용될 수 있다.
- class나 enum 같은 키워드는 타입과 값 두 가지로 사용될 수 있다.
- 속성 접근자인 []는 타입으로 쓰일 때에도 동일하게 동작한다. 객체 값의 속성을 확인하는 obj[’field’]와 obj.field는 ‘값’이 동일하더라도, 타입의 속성은 다를 수 있다. 타입의 속성을 얻을 때는 반드시 첫 번째 방법(obj[’field’])을 사용해야 한다.
- 타입의 관점에서 typeof는 타입 스크립트 타입을 반환한다. 반환된 타입을 이용하여 type 구문으로 이름을 붙이거나, 더 큰 타입의 일부로 사용할 수 있다.
  
  값의 관점에서 typeof는 자바스크립트 런타임의 typeof 연산자다. 대상 심벌의 런타임 타입을 가리키는 문자열을 반환한다.

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

타입스크립트에서 변수에 값을 할당하고 타입을 부여하는 방법은 두 가지다.

타입 단언(as Type)보다 타입 선언(: Type)을 사용해야 한다.

interface Person { name: string };

const alice: Person = { name: 'Alice' };  // 타입 선언
const bob = { name: 'Bob' } as Person;    // 타입 단언

const bob = <Person>{ name: 'Bob' };    // 타입 단언의 원래 문법. tsx 컴포넌트 태그로 인식되어 현재는 잘 쓰이지 않음

타입 단언은 타입 체커가 추론한 타입보다 개발자가 판단하는 타입이 더 정확할 때 의미가 있다.
- 접미사로 쓰인 !는 값이 null이 아니라는 단언문이다.

아이템 10. 객체 래퍼 타입 피하기

자바스크립트는 기본형과 객체 타입을 서로 자유롭게 변환한다.

string 기본 형에 charAt 같은 메서드를 사용할 때, 자바스크립트는 기본형을 String 객체로 래핑(wrap)하고, 메서드를 호출하고, 마지막에 래핑한 객체를 버린다.

String.prototype을 몽키-패치(monkey-patch)하면 이 내부 동작을 관찰할 수 있다. 내장 메서드가 호출될 때 this를 출력하도록 몽키-패치하면 메서드 내의 this는 string 기본형이 아닌 String 객체 래퍼임을 확인할 수 있다. 이 래퍼 타입 덕분에 기본형 값에 메서드를 사용할 수 있다.
- 몽키-패치란 런타임에 프로그램의 어떤 기능을 수정해서 사용하는 기법이다. 자바스크립트에서는 주로 프로토타입을 변경하는 것이 해당된다.
기본형과 객체 래퍼가 항상 동일하게 동작하는 것은 아니다. 직접 객체 래퍼를 사용하거나 인스턴스를 생성하는 것은 피해야 한다.
타입스크립트는 기본형과 객체 래퍼 타입을 별도로 모델링한다. 객체 래퍼 타입은 지양하고 기본형 타입을 사용해야 한다.

둘을 잘못 사용하지 않도록 주의하자. string(기본형)은 String(객체 래퍼 타입)에 할당할 수 있지만 String은 string에 할당할 수 없다.

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

interface Options {
  title: string;
  darkMode?: boolean;
}

const o1: Options = {
  title: 'Spider Solitaire';
  darkMode: true;
  elephant: 'present',
} // 에러! 개체 리터럴은 알려진 속성만 지정할 수 있으며 'Options ' 형식에 'elephant'가 없습니다.
// => 잉여 속성 체크

const o2: Options = { title: 'Ski Free', darkmode: true };
// 'Options' 형식에 'darkmode'이(가) 없습니다.
// => 잉여 속성 체크

const o3: Options = document; // 정상 <= string 타입인 title 속성을 가지기 때문
const o4: Options = new HTMLAnchorElement; // 정상 <= string 타입인 title 속성을 가지기 때문

const intermediate = { title: 'Ski Free', darkmode: true };
const o5: Options = intermediate; 
// 정상! 
// intermediate이 객체 리터럴이 아니기 때문에 잉여 속성 체크가 적용되지 않는다.

const o6 = { title: 'Ski Free', darkmode: true } as Options;
// 정상!
// 타입 단언문을 사용할 때 잉여 속성 체크가 적용되지 않는다.

타입스크립트는 단순히 런타임의 오류 코드를 잡아내는 것 뿐만 아니라, 의도와 다르게 작성된 코드를 찾으려고 한다. 이를 위한 기능 중 하나가 바로 잉여 속성 체크다.

타입이 명시된 변수에 객체 리터럴을 할당할 때 타입스크립트는 해당 타입의 속성이 있는지, 그리고 ‘그 외의 속성은 없는지’ 확인한다. 이를 잉여 속성 체크라고 한다.

위의 Options 타입은 범위가 매우 넓기 때문에, 순수한 구조적 타입 체커는 의도와 다르게 작성된 코드와 같은 오류를 찾아내지 못 한다. 이때 잉여 속성 체크를 통해 타입 시스템의 구조적 본질을 해치지 않으면서 알 수 없는 속성을 허용하지 않음으로써 위와 같은 문제를 방지할 수 있다.
잉여 속성 체크는 조건에 맞을 때 동작한다는 한계가 있다.

객체 리터럴을 할당할 때 동작하며, 중간에 임시 변수를 도입하여 변수에 변수를 할당하면 동작하지 않는다.
구조적 타이핑에 기반을 둔 할당 가능 검사와 함께 쓰이나, 잉여 속성 체크와 할당 가능 검사는 별도의 과정이다.
잉여 속성 체크를 원치 않는다면, 인덱스 시그니처를 사용하여 타입스크립트가 추가적인 속성을 예상하도록 할 수 있다.

아이템 12. 함수 표현식에 타입 적용하기

매개변수나 반환 값에 타입을 명시하기보다 함수 표현식 전체에 타입 구문을 적용하는 것이 좋다. 함수의 매개변수부터 반환값까지 함수 전체를 타입으로 선언하여 함수 표현식에 재사용할 수 있다는 장점이 있기 때문이다.

반복되는 함수의 시그니처를 하나의 함수 타입으로 통합하면, 타입 구문이 적어지고 구현부와 타입을 분리하여 로직이 보다 분명해진다.
다른 함수의 시그니처를 참조하려면 typeof fn을 사용하면 된다.

woowacourse-study / 2022-thanks-giving-effective-typescript

2022.09.05 #2

타입스크립트 서버 또한 언어 서비스를 제공한다