타스로 2행시를 해보겠읍니다.

타 타인을 위해 스 스스로를 희생하자

안 돼 희생하지마 😭 나 자신 먼저 지켜!

아이템 16. number 인덱스 시그니처보다는 Array, 튜플, ArrayLike를 사용하기

인덱스 시그니처가 number로 표현되어 있다면 입력한 값이 number여야 한다는 것을 의미하지만, 이는 순수 타입스크립트 코드다. 배열은 객체이므로 키는 숫자가 아니라 문자열이다. 그래서 실제 런타임에 사용되는 키는 strinig 타입이다.
- 자바스크립트의 객체는 키/값 쌍의 모음이다. 키는 보통 문자열이고(ES2015 이후로는 심벌일 수 있음) 값은 어떤 것이든 될 수 있다.
  - 만약 복잡한 객체를 ‘키’로 사용하려고 하면, toString 메서드가 호출되어 키로 사용하려면 객체가 문자열로 변환된다.
  - 숫자는 키로 사용할 수 없다. 속성 이름으로 숫자를 사용하려하면 런타임은 문자열로 변환한다.
- 타입스크립트는 객체의 숫자 키를 허용하고 문자열 키와 다른 것으로 인식한다. Array 타입 선언은 다음과 같다.
```
interface Array<T> {
    // ...
}
```
만약 숫자를 사용하여 인덱스할 항목을 지정한다면, Array 또는 튜플 타입을 사용한다. 어떤 길이를 가지는 배열과 비슷한 형태의 튜플을 사용하고 싶다면, 타입스크립트의 ArrayLike 타입을 사용한다.

아이템 17. 변경 관련된 오류 방지를 위해 readonly 사용하기

readonly로 선언된 배열
- 특징
  - 배열의 요소를 읽을 수 있지만 쓸 수는 없다.
  - lenght를 읽을 수 있지만 바꿀 수 없다. (배열 변경이 불가능하다)
  - 배열을 변경하는 메소드를 호출할 수 없다. (ex. pop)
- readonly 키워드가 붙지 않은 배열(변경 가능한 배열)은 readonly 키워드가 붙은 배열의 서브타입이다. 따라서 변경 가능한 배열은 readonly 배열에 할당할 수 있다. 그 반대로 readonly 배열은 변경 가능한 배열에 할당할 수 없다.
함수가 매개변수를 수정하지 않는다면 readonly로 선언한다. 매개변수를 readonly로 선언하면 다음과 같은 일이 생긴다.
- 타입스크립트는 매개변수가 함수 내에서 변경이 일어나는지 체크한다.
- 호출하는 쪽에서 함수가 매개변수를 변경하지 않는다는 보장을 받게 된다.
- 호출하는 쪽에서 함수에 readonly 배열을 매개변수로 넣을 수 있다.

const와 readonly의 차이

const arr1: string[] = [];
// arr1 변수가 가리키는 배열을 변경할 수 없고, 
// 배열 자체는 변경할 수 있다. (배열을 변경하는 메소드 호출 가능)

const arr2: readonly string[] = [];
// arr2 변수가 가리키는 배열을 변경할 수 없고, 
// 배열 자체도 변경할 수 없다. (배열을 변경하는 메소드 호출 불가능)

let arr3: readonly string[] = [];
// arr3 변수가 가리키는 배열을 자유롭게 변경 가능. 
// 그러나 배열 자체는 변경하지 못 한다. (배열을 변경하는 메소드 호출 불가능)

readonly는 얕게 동작한다.

어떤 객체를 요소로 하는 readonly 배열이 있을 때, 그 요소인 객체 자체는 readonly가 아니다.
- (readonly string[])[] : readonly string[]의 변경 가능한 배열
- readonly string[][]: 변경가능한 배열의 readonly 배열

아이템 18. 매핑된 타입을 사용하여 값을 동기화하기

매핑된 타입을 사용해서 관련된 값과 타입을 동기화한다.

다른 타입에는 다른 변수를 사용하기

why?

서로 관련이 없는 두 개의 값을 분리한다.
변수명을 더 구체적으로 지을 수 있다.
타입 추론을 향상시키며, 타입 구문이 불필요해진다.
타입이 좀 더 간결해진다.
let 대신 const 로 변수를 선언할 수 있다.

타입이 바뀌는 변수는 되도록 피해야 하며, 목적이 다른 곳에는 별도의 변수명을 사용하자.

타입 넓히기

런타임에 모든 변수는 유일한 값을 가진다.
하지만, 타입스크립트가 작성된 코드를 체크하는 정적 분석 시점에 변수는 (런타임 시 가질 수 있는 ) 가능 한 값들의 집합인 타입을 가진다.
상수를 사용해서 변수를 초기화 할 때, 타입을 명시하지 않으면 타입 체커는 타입을 결정해야 한다.
즉, 지정된 단일 값을 가지고 할당 가능한 값들의 집합을 유추해야 한다는 뜻이다. => 넓히기(widening)


interface Vector3 { x: number; y: number; z: number; };
function getComponent(vector: Vector3, axis: 'x' | 'y' | 'z') {
    return vector[axis];
}

let x = 'x';
let vec = { x: 10, y: 20, z: 30 };
getComponent(vec, x) ;
// 런타임시 동작은 잘 되는데 편집기에서 아래와 같은 오류 나옴
// ~ 'string' 형식의 인수는 "x" | "y" | "z" 형식의 매개변수에 할당될 수 없습니다.

getComponent 함수는 두번째 매개변수에 "x" | "y" | "z" 타입을 기대했지만 x 의 타입은 할당 시점에 넓히기가 동작해서 string 으로 추론되었다.
따라서 string 타입은 "x" | "y" | "z" 타입에 할당이 불가능하므로 오류가 난다.

넓히기의 과정 제어하기

const 사용하기. (let 대신 const 를 사용하면 더 좁은 타입이 된다.)
하지만 const 역시 참조형의 경우 ..특히 배열의 경우 배열에 튜플 타입을 추론해야 할지, 요소들은 어떤 타입을 추론할지 알수없다. 객체도 마가지.
객체의 경우 타입스크립트의 넓히기 알고리즘은 각 요소를 let 으로 할당 된 것 처럼 다룬다.

타입스크립트의 기본 동작(추론)을 재정의 하기

명시적 타입 구문 제공하기
타입 체커에 추가적인 문맥을 제공하는 것. (함수의 매개변수로 값을 전달하기.)
const 단언문 사용하기.

const v2 = {
   x: 1 as const,
   y: 2
}
// 타입은 { x: 1 ; y: number; }

const v3 = {
   x: 1,
   y: 2
} as const

// 타입은 { readonly x:1, readonly y:2 };

타입 좁히기

타입 넓히기의 반대
타입스크립트가 넓은 타입으로부터 좁은 타입으로 진행하는 과정

const el = document.getElementById('foo');
if(el){
    el
    el.innerHTML = ' wow '.blikc();
} else {
   el
   alert('No Element');
}

만약 el 이 null 이면 분기문의 첫 번째 블록이 실행되지 않는다. 즉, 첫번째 블록에서 HTMLElement | null 타입의 null 타입을 제외하므로 더 좁은 타입이 되어 작업이 훨씬 쉬워진다.
타입 체커는 일반적으로 이러한 조건문에서 타입 좁히기를 잘해내지만, 타입 별칭이 존재한다면 그러지 않을 수 있다. -> 왜일까?! 타입별칭에 대한건 나중에 다룬다.

타입 좁히는 방법

분기문에서 예외를 던지거나 함수를 반환하여 블록의 나머지 부분에서 변수의 타입을 좁힐 수도 있다.
instanceof 를 통해서 타입을 좁힌다. (분기문)
속성 체크로 타입 체크한다. a in ab
Array.isArray 같은 내장함수로 타입 좁힌다.
태그 붙여서 '태그된 유니온 or 구별된 유니온 or 서로소 유니온' 만들기
- 서로소 유니온 타입을 사용하면, 서로 겹치지 않는 여러 경우 중 하나인 타입을 표현할 수 있다.
- 언제 유용할까..??
```
네트워크 요청: 요청은 성공하거나 실패하겠지만, 성공한 동시에 실패할 수는 없다.
데이터베이스에서 특정 아이디를 갖는 컬럼을 쿼리: 해당 컬럼이 있거나 없지만, 있으면서 없을 수는 없다.
어떤 파일명을 갖는 파일 내용을 읽어오는 경우: 해당 파일이 있거나 없지만, 있으면서 없을 수는 없다.
```
- 서로소 유니온 타입에서는 서로 겹치는게 없다. 따라서 switch 문을 사용해서 특정 타입이면 ~ 어떤 동작을 하도록 유도할 수 있다. https://ahnheejong.gitbook.io/ts-for-jsdev/06-type-system-deepdive/disjoint-union-type

// 사용자 정의 타입가드!

function isInputElement (el: HTMLElement): el is HTMLInputElement {
    return 'value' in el;
} 

function getElementContent(el: HTMLElement){
     if(isInputElement(el){
          return el.value;
     }
}

function isDefined<T>(x: T | undefined) : x is T {
     return x !== undefined;
}

주의해야할것... 자바스크립트에서 typeof null === 'object'

타: 타입스크립트를 위해 스: 스스로를 희생하자

추론 가능한 타입을 사용해 장황한 코드 방지하기

타입스크립트의 맣은 타입 구문은 사실 불필요하다.

비구조화 할당문은 모든 지역 변수의 타입이 추론되도록 한다.

타입스크립트의 변수의 타입은 일반적으로 처음 등장할 때 결정된다.

객체 리터럴을 정의할 때

const elmo: Product = {
  name: 'Elmo',
  id: '123abc',
  price: 28.99
}

타입을 명시하면, 잉여 속성 체크가 동작한다
변수가 사용되는 순간이 아닌 할당하는 시점에 오류가 표시되도록 해준다. 타입을 명시 하지 않으면 객체가 사용되는 곳에서 타입 오류가 발생한다.

함수의 반환에 타입을 명시하여 오류 방지하기

타입 추론이 가능하더라도 구현상의 오류가 함수를 호출한 곳까지 영향을 미치지 않도록 하기 위해 타입 구문을 명시하는 것이 좋다.
구현상의 오류가 사용자 코드의 오류로 표시되지 않는다.
함수에 대해 더욱 명확하게 알 수 잇다. 함수의 시그니처는 잘 변하지 않기 때문에 이를 먼저 설정하고 구현하면 원하는 형식으로 작성이 가능하다.

interface Vector2D { x: number, y: number }
function add(a: Vector2D, b: Vector2D){
  return {x: a.x + b.x, y: a.y+ b.y}
}

// { x:number, y: number}로 추론되어 Vector2D와 호환된다
// 입력 타입은 Vector2D인데 반환 타입은 number라 당황스러울 수 있다

명명된 타입을 사용할 수 있다. 반환 타입을 명시하면 직관적인 표현이 된다.
반환 값을 별도의 타입으로 정의하면 타입에 대한 주석을 작성할 수 있다.

다른 타입에는 다른 변수 사용하기

변수의 값은 바뀔 수 있지만 그 타입은 보통 바뀌지 않는다.

유니온 타입으로 범위를 좁힐 수는 있지만 값을 사용할 때마다 타입을 확인하는 것보다는 별도의 변수를 도입하는 것이 좋다.

타입 넓히기

상수를 사용해서 변수를 초기화할 때 타입을 명시하지 않으면 타입 체커가 타입을 결정해야 한다. 즉, 정해진 값을 가지고 할당 가능한 값들의 집합을 유추해야 한다는 뜻이다. 이러한 과정을 넓히기(winding)이라고 부른다.

interface Vector2D { x: number, y: number }

function getComponent(vector: Vector2D, axis: 'x' | 'y'){
  return vector[axis]
}

let x = 'x'; 
let vec = { x: 10, y: 20 };
getComponent(vec, x); 
// string 형식의 인수는 'x' | 'y' 형식의 매개변수에 할당될 수 없습니다.

x의 타입은 할당 시점에 넓히기가 동작하여 string으로 추론되었다.

넓히기 과정 제어하기

const x = 'x' // 타입이 'x'

const. let 대신 const로 변수를 선언하면 더 좁은 타입이 된다.
단, 객체나 배열의 경우에는 여전히 문제가 된다
객체의 경우 const로 선언해도 타입스크립트가 각 요소를 let으로 할당한 것처럼 다룬다

타입 추론의 강도를 제어

const v: { x: 1|3|5 } = { x:1 }

명시적 타입 구문 제공
타입 체커에 추가적인 문잭을 제공(함수의 매개변수로 값을 전달)

const v = { x: 1, y: 2 } as const
// 타입 { readonly x: 1, readonly y: 2 }

const 단언문 사용

타입 좁히기

const el = document.getElementById('foo');

if(el) { console.log('not null') }
else { console.log('null') }

instanceof 사용
속성 체크(in)
명시적 태그 붙이기. interface 생성시 구분할 수 있는 필드 추가. tagged union, discriminated union이라고 불린다.

function isInputElement(el: HTMLElement): el is HTMLInputElement {
  return 'value' in el;
}

사용자 정의 타입 가드
- el is HTMLInputElement의 반환이 true인 경우 좁힐 수 있다고 알려주는 식

실수 할 수 있는 것들

typeof null은 ‘object’
기본형이 잘못되어 있을 때(string|number|null 이면 0, ‘’, null 모두 같은 결과가 나올 수 있음)

- Pick
    - 제너릭 타입
    - 중복된 코드를 없앤다는 관점으로, Pick을 사용하는 것은 함수를 호출하는 것에 비유할 수 있다
    - T, K 두 가지 타입을 받아서 타입을 반환한다

        ```jsx
        type Pick<T,K> = { [k in k]: T[k]};

        K는 인덱스로 사용될 수 있는 값 , 실제 T의 키의 부분집합 
        ```

    - 중복되는 것을 피하는 방법

        ```jsx
        interface SaveAction {
            type: 'save';
        }
        interface LoadAction {
            type: 'load';
        }

        type Action = SaveAction | LoadiAction;
        type ActionType = 'save' | 'load';

        -> 인덱싱을 통해서 중복 피하기 
        type ActionType = Action['type'];

        -> Pick 활용하기 
        type ActionRec = Pick<Action, 'type'>; // {type: 'save' |'load'}
        ```

- 제너릭 타입은 타입을 위한 함수와 같다
- 제너릭 타입에서 매개변수를 제한할 수 있는 방법
    - extends 이용 하면, 제너릭 매개변수가 특정 타입을 확장한다고 선언할 수 있다

    ```jsx
    interface Name {
        first: string;
        last :string;
    }

    type DancingDuo<T extends Name> = [T,T];

    const couple : DancingDuo<Name> = [
        {first 'Fred', last: 'Astaire'}
    ]
    ```

동적 데이터에 인덱스 시그니처 사용하기

자바스크립트 객체는 문자열 키를 타입의 값과 관계없이 매핑한다
- 타입스크립트에서는 타입에 인덱스 시그니처를 명시하여 유현하게 매핑이 가능
```
type Rocket = {[prototype:string] : string};
const rocekt : Rocket = {
    name : 'Falcon 9',
    variant: 'v1.0',
}
```
- 인덱스 시그니처
  - 키의 이름
    - 키의 위치를 표시하는 용도
  - 키의 타입
  - 값의 타입
  - 단점
    - 잘못된 키를 포함해 모든 키를 허용한다
    - 특정 키가 필요하지 않다
    - 키마다 다른 타입을 가질 수 없다
    - 자동 완성 기능이 동작 하지 않는다
  - 사용할 때
    - 동적 데이터를 표현할 때 사용한다
- 가능하다면 인덱스 시그니처 보다 인터페이스, Record, 매핑된 타입을 사용하기

number 인덱스 시그니처 보다는 Array, 튜플, ArrayLike 사용하기

자바스크립트의 암시적 타입 강제
- “0” == 0 // true
  - 해당 부분은 === 나 ! == 를 활용해서 해결이 가능하다
객체란 키 / 값 쌍의 모임
- 키는 보통 문자열이고, 값은 어떤 것도 될 수 있다
- 자바스크립트에서 복잡한 객체를 키로 사용 하려고 하면, toString이 호출되어 객체가 문자열로 반환된다
- 숫자는 키로 사용할 수 없다
타입스크립트는 숫자 키를 허용한다
- Object.keys는 여전히 문자열로 반환된다
- 인덱시 시그니처가 number로 표현되어 있다면 입력한 값이 number여야 한다는 것을 의미하지만 실제 런타임에 사용되는 키는 string 타입이다

변경 관련된 오류 방지를 위해 readonly 사용하기

readonly number [ ] 타입의 특징
- 배열의 요소를 읽을 수 있지만 쓸 수 없다
- length를 읽을 수 있지만 , 바꿀 수 없다
- 배열을 변경하는 pop을 비롯한 메서드를 호출 할 수 없다
- number[]는 readonly number[]보다 기능이 많기 때문에 readonly number[]의 서브 타입이다
  - 변경 가능한 배열은 readonly에 할당할 수 있지만 그 반대는 불가능하기 때문!
매개변수로 readonly를 선언하면 발생하는 일
- 타입스크립트는 배개변수가 함수 내에서 변경이 일어나는 체크한다
- 호출하는 쪽에서는 함수가 매개변수를 변경하지 않는다는 보장을 받게 된다
- 호출하는 쪽에서 함수에 readonly 배열을 매개변수로 넣을 수도 있다.

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

2022.09.08 #5

아이템 16. number 인덱스 시그니처보다는 Array, 튜플, ArrayLike를 사용하기

아이템 17. 변경 관련된 오류 방지를 위해 readonly 사용하기

아이템 18. 매핑된 타입을 사용하여 값을 동기화하기

다른 타입에는 다른 변수를 사용하기

타입 넓히기

넓히기의 과정 제어하기

타입스크립트의 기본 동작(추론)을 재정의 하기

타입 좁히기

타입 좁히는 방법

추론 가능한 타입을 사용해 장황한 코드 방지하기

객체 리터럴을 정의할 때

함수의 반환에 타입을 명시하여 오류 방지하기

다른 타입에는 다른 변수 사용하기

타입 넓히기

넓히기 과정 제어하기

타입 추론의 강도를 제어

타입 좁히기

실수 할 수 있는 것들

동적 데이터에 인덱스 시그니처 사용하기

number 인덱스 시그니처 보다는 Array, 튜플, ArrayLike 사용하기

변경 관련된 오류 방지를 위해 readonly 사용하기