2022.09.04

[moonheekim0118]

아좌잣!!!!!!!!💪💚💛🧡❤️💜💙

[prefer2]

1장: 타입스크립트 알아보기

타입스크립트의 목표 중 하나는 런타임에 오류를 발생시킬 코드를 미리 찾아내는 것.

타입스크립트 설정

ts.config 파일, tsc — init으로 설정을 해준다

• noImplicitAny: 변수들이 미리 정의된 타입을 가져야 하는지 여부를 제어
• strictNullCheck: null과 undefined가 모든 타입에서 허용되는지 확인. null을 사용하고자 한다면, 의도를 명시적으로 드러내야 한다. null을 허용하지 않으려면, 이를 체크하는 코드나 단언문(assertion, !)을 추가해야 한다. 이를 설정하려면 noImplicitAny를 먼저 설정해야 한다.
• 모든 체크를 설정하고 싶다면 strict 설정을 하면 된다.

코드 생성과 타입이 관계없음을 이해하기

타입스크립트 컴파일러

• 최신 타입스크립트/자바스크립트를 브라우저에서 동작할 수 있도록 구버전의 자바스크립트로 트랜스파일 한다
• 코드의 타입 오류를 체크한다

컴파일은 타입 체크와 독립적으로 동작하기 때문에, 타입 오류가 있는 코드도 컴파일이 가능하다

런타임에는 타입 체크가 불가능하다

instanceof 체크는 런타임에 일어나지만, Rectangle은 타입이라 런타임 시점에 아무런 역할을 할 수 없다.

해결 방법

• height 속성이 존재하는지 체크. in 사용하기
• 런타임에 접근 가능한 타입 정보를 명시적으로 저장하기
• 타입을 클래스로 만들어 타입과 값을 둘 다 사용하기

구조적 타이핑에 익숙해지기

자바스크립트는 덕 타이핑 기반이다. 타입스크립트는 이를 모델링하기 위해 구조적 타이핑을 사용한다.

interface Vector2D {
  x: number;
  y: number;
}

interface NamedVector {
  name: string;
  x: number;
  y: number;
}

function calculateLength(v: Vector2D){
  return Math.sqrt(v.x * v.x + v.y * v.y)
}

const v: NamedVector = { x:3, y:4, name:'name' };
console.log(calculateLength(v));

다음 코드는 문제가 발생하지 않는다. NamedVector의 구조가 Vector2D와 호환된다. 여기서 구조적 타이핑이라는 용어가 사용된다.

interface Vector2D {
  x: number;
  y: number;
}

interface Vector3D {
  x: number;
  y: number;
  z: number;
}

function calculateLength(v: Vector2D){
  return Math.sqrt(v.x * v.x + v.y * v.y)
}

function normalize(v: Vector3D){
  const length = calculateLength(v);

  return {
    x: v.x / length,
    y: v.y / length,
    z: v.z / length,
  }
}

다음과 같은 코드에서는 버그로 인해 normalize가 3D 벡터를 기반으로 연산된다. 구조적 타이핑에 있어서 Vector2D와 호환되기 때문이다. 함수를 작성할 때 매개변수들의 속성들이 매개변수의 타입에 선언된 속성만을 가지기만 생각하기 쉽다(이를 sealed, precise 타입이라고 부른다) 타입스크립트 타입 시스템은 이를 표현할 수 없으며 열려(open)있다.

클래스 또한 구조적 타이핑 규칙을 따른다.

라이브러리 간의 의존성을 분리할 수 있다.

any 타입 지양하기

• any 타입에는 타입 안전성이 없다.
• any는 함수 contract를 무시한다. 약속된 타입의 입력을 제공하고, 약속된 타입의 출력을 반환해야한다. 하지만 any를 사용하면 이런 약속이 어겨질 수 있다.
• any를 사용하면 자동완성의 도움을 받지 못한다.
• any 타입은 코드 리팩토링 시 버그를 찾지 못하게 한다.
• any는 타입 설계를 감춘다. 설계가 잘 되었는지, 설계가 어떻게 되어 있는지 알 수 없다.
• 타입시스템의 신뢰도를 떨어뜨린다.

[moonheekim0118]

타입스크립트와 자바스크립트의 관계

• 타입스크립트는 자바스크립트의 상위집합 (Superset)
• 즉 모든 자바스크립트는 타입스크립트 (하지만 반대는 성립하지 않음)

타입스크립트를 사용하는 이유

• 타입스크립트의 타입 시스템은 런타임에 오류를 발생시킬 코드를 미리 찾아낸다.

코드 생성과 타입이 관계 없음을 이해하기

• 타입스크립트가 자바스크립트로 변환 될 때, 코드 내의 타입에는 영향을 미치지 않는다.
• 자바스크립트 실행 시점에도 타입은 영향을 미치지 않는다.

  런타임에는 타입 체크가 불가능하다.

  
  interface Rectangle {
  height: number;
  width: number;
  }

if(shape instanceof Rectangle) // 오류!

- 타입은 런타임 시점에 아무런 역할을 할 수 없다.
- 타입스크립트의 타입은 제거 가능하기 때문에, 실제로 자바스크립트로 컴파일 되는 과정에서 모든 인터페이스, 타입, 타입 구문은 그냥 제거되어 버린다.

### 런타임 타입은 선언된 타입과 다를 수 있다.
- 어느경우? API 호출로 받아온 값의 경우

## 구조적 타이핑

```ts

interface Vector2D{
   x:number;
   y:number;
}

interface Vector3D{
   x:number;
   y:number;
   z:number;
}

function calculateLength(v: Vector2D) {
   return Math.sqrt(v.x * v.x + v.y * v.y);
}

• 위에 Vector3D 에는 Vector2D 타입에 있는 x , y 속성이 있기 때문에 calculateLength 함수의 매개변수로 들어갈 수 있다.
• 즉, Vector3D 의 구조가 Vector2D의 구조와 호환되기 때문에, calcuateLength 호출이 가능해진다.

봉인된, 정확한 타입

• 함수를 작성할 때, 호출에 사용되는 매개변수의 속성들이 매개변수의 타입에 선언된 속성만을 가질거라 생각한다. 하지만 위에서 보았듯 , Vector3D 타입이 매개변수로 들어오면 Vector2D 타입에는 없는 x 속성이 추가로 들어온다.
• 이러한 타입을 봉인된,정확한 타입이라고 한다.
• 이는 타입스크립트에서 표현할 수 없다.
• 따라서 아래와 같은 예시가 있다.

  function calculateL1(v:Vector3D){
  let length = 0;
  for(const axis of Object.keys(v)){
    const coord = v[axis]; //  'string' 은 'Vector3D'의 인덱스로 사용할수 없기에 엘리먼트는 암시적으로 'any' 타입입니다.
  }
  }

• 왜 ? x,y,z 중 하나니까 string 타입이 아니지 않은가?
  • 구조적타이핑으로 인해 v 는 x,y,z 외에도 다른 속성을 가질 수 있다. 따라서 axis 타입은 string 이 될 수도 있다.
  • 즉, v[axis] 가 정확히 어떤 속성이 될 지 알 수 없으므로 number 라고 확정할 수 없다.
  • 이러는 경우 루프보다 모든 속성을 각각 참조하는 구현이 더 낫다.

any 타입 지양하기

1. any 타입은 안정성이 없다.
2. any는 함수 시그너쳐를 무시해버린다.
3. any 는 언어 서비스가 적용되지 않는다.
4. any 는 코드 리팩터링 때 버그를 감춘다.
5. any 는 타입 설계를 감춘다.
6. any 는 타입시스템의 신뢰도를 떨어뜨린다.

[liswktjs]

타입스크립트와 자바스크립트의 관계 이해하기

• 타입스크립트는 문법적으로도 자바스크립트의 상위 집합
  • 자바스크립트 코드를 그대로 유지하면서 일부분에만 타입스크립트가 적용이 가능하여 마이그레이션에 이점이 있다.
  • 타입스크립트가 타입을 명시하는 추가적인 문법을 가져서 타입스크립트가 자바스크립트가 아닌 프로그램이 존재한다

• 타입 시스템의 정적 시스템은 런타임에 오류를 발생시킬 코드를 미리 찾아내는 것

  • 자바스크립트의 경우, 의도와 다르게 설계된 코드에 대해서도 유효하게 평가한다 하지만 타입스크립트의 타입 체커는 의도한 코드가 아닌 경우에도 이를 밝혀내고, 타입 구문을 추가하면 해결책도 제시해주어 잠되된 오류에 대해서 알아낼 수 있다.

  const states = [
      {name : 'Alabama', capital: 'Montgomer'},
      {name : 'Alaska', captial :'Juneau'},
      {name : 'Arizona', captial: 'Phoneix},
  ]
  
  for (const state of states){
      console.log(state.capitol); 
  }
  ->JS일 경우 undefined가 출력된다 
  ->TS일 경우 captiol 속성이 없다는 오류를 잡아낸다
  
  interface State {
      name: string;
      captial: string;
  } 
  
  const states:State[] 
  ->타입 구문을 추가할 경우 , 올바른 해결책도 제시해줄 수 있다 
  

타입스크립트 설정 이해하기

• noImplicitAny: true로 설정하여 any의 사용 피하기
  • 타입스크립트는 타입 정보를 가질 때 가장 효과적이기 떄문에 any 사용 피하기

• strictNullChecks

  • null과 undfined가 모든 타입에서 허용되는지 확인하는 설정
  • 만약에 null 허용하려고 한다면, 아래와 같이 명시적으로 타입을 드러내주어야 한다.

  const x : number | null = null; 

코드 생성과 타입이 관계없음을 이해하기

• 타입스크립트 컴파일러의 역할
  • 최신 타입스크립트/자바스크립트를 브라우저에서 동작할 수 있도록 구버전의 자바스크립트로 트랜스파일 한다
  • 코드의 타입 오류를 체크한다.
  • 타입스크립트가 자바스크립트로 변활 할 때에 코드 내의 타입에는 영향이 없다
  • 자바스크립트 실행 시정에도 타입은 영향을 미치지 않는다.

• 타입스크립트가 할 수 있는 일

  • 타입 오류가 있는 코드도 컴파일이 가능하다

    • 컴파일은 타입 체크와 독립적으로 동작가능하기 때문에, 타입 오류가 있는 코드도 컴파일이 가능

  • 런타임에는 타입체크가 불가능하다

    • 타입스크립트의 타입은 컴파일 되는 과정에서 모든 인터페이스,타입, 타입 구문은 제거된다.

  • 타입 연산은 런타임에 영향을 주지 않는다

    • 값을 정제하기 위해서는 런타임의 타입을 체크하고, 타입스크립트 연산을 통해 변환을 수행

    function asNumber(val:number | string): number{
        return typeof(val) === 'string' ? Number(val) : val;

  • 런타임 타입은 선언된 타입과 다를 수 있다.

    • API의 응답값 타입은 언제든지 바뀔 수 있기 때문에, 런타임 시점의 타입과 선언 타입이 불일치하는 경우가 발생한다

  • 타입스크립트 타입으로는 함수를 오버로드 할 수 없다.

    • C++같은 언어는 동일한 이름에 매개변수만 다른 여러 버전의 함수를 사용할 수 있지만, 타입스크립트는 타임과 런타임 동작과 무관하기 때문에 함수 오버로딩이 불가능하다.

  • 타입스크립트 타입은 런타임 성능에 영향을 주지 않는다

    • 타입과 타입 연산자는 자바스크립트 변화 시점에 제거되기 때문에, 런타임의 성능에 아무런 영향을 주지 않는다.

구조적 타이핑에 익숙해지기

• 자바스크립트는 덕 타이핑 기반
  • 함수의 매개변수 값이 모두 제대로 주어진다면, 그 값이 어떻게 만들어졌는지 신경 쓰지 않고 사용한다

any 타입 지양하기

• any 타입에는 타입 안전성이 없다.
• any는 함수 시그니처를 무시한다
  • 호출하는 쪽은 약속된 타입의 입력을 제공하고, 함수는 약속된 타입의 출력을 반환
  • 하지만 any를 사용하게 되면 이를 무시할 수 있음
• any 타입에는 언어 서비스가 적용되지 않는다
  • any로 적용된다면, 타입스크립트는 자동완성기능을 제공하지 않는다.
• any 타입은 코드 리팩토링 할 때에 버그를 감춘다.
• any는 타입 설계를 감추어버린다
• any는 타입 시스템의 신뢰도를 떨어뜨린다.

[soyi47]

아이템 1. 타입스크립트와 자바스크립트의 관계 이해하기

• 타입스크립트는 (타입이 정의된) 자바스크립트의 상위 집합이다.

  반면 모든 자바스크립트 프로그램이 타입스크립트라는 명제는 참이지만, 모든 타입스크립트 프로그램이 자바스크립트 프로그램은 아니다. 타입스크립트는 별도의 문법을 가지기 때문이다.

  function greet(who: string) { ... }
  
  => SyntaxError: Unexpected token :

  : string은 타입스크립트에서 쓰이는 타입 구문이다. 타입 구문을 사용하는 순간 자바스크립트는 타입스크립트의 영역으로 들어간다.

• 타입 시스템의 목표 중 하나는 런타임에 오류를 발생시킬 코드를 미리 찾아내는 것이다. 타입스크립트는 ‘정적’ 타입 시스템이다. 그러나 타입 체커를 통과하면서 런타임 오류를 발생시키는 코드는 충분히 존재할 수 있다.

  • 자바스크립트를 사용할 때, 오류가 발생하지는 않지만 의도와 다르게 동작하는 코드가 있다. 타입스크립트는 이 중 몇가지를 찾아내기도 한다.

    const states = [
        { name: 'Alabama', capital: 'Montgomery' }, 
        ...
    ];
    
    for (const state of states) {
        console.log(state.capitol);
    }
    
    // 실행 결과
    undefined

    루프 내의 state.capitol은 개발자가 의도한 코드가 아니다. 타입 체커는 이때 오류를 찾아내고 해결책을 제시한다.

  • 타입 구문을 추가하여 코드의 ‘의도’가 무엇인지 타입스크립트에게 알려주면 훨씬 더 많은 오류를 찾아낼 수 있다.

    const states = [
        { name: 'Alabama', capitol: 'Montgomery' }, 
        ...
    ];
    
    for (const state of states) {
        console.log(state.capital);
    }
    
    // 실행 결과
    undefined

    이때 타입스크립트는 state에 capital 속성이 없으니 capitol을 사용하겠냐고 해결책을 제시한다. 타입스크립트는 오류를 추측할 수는 있지만 어느 쪽이 오타인지 판단하지 못 한다. 따라서 명시적으로 states를 선언하여 의도를 분명하게 하는 것이 좋다.

• 모든 자바스크립트는 타입스크립트지만, 일부 자바스크립트만이 타입 체크를 통과한다.

• 타입스크립트 타입 시스템은 전반적으로 자바스크립트 동작을 모델링한다. 그러나 자바스크립트에서는 허용되지만 타입스크립트에서는 문제가 되는 경우가 있다. 이런 문법의 엄격함은 온전한 취향의 차이고 우열을 가릴 수 없다.

아이템 2. 타입스크립트 설정 이해하기

• 타입스크립트 설정은 가급적 설정 파일 tsconfig.json을 사용하는 것이 좋다. 그래야 타입스크립트 사용 계획을 동료와 다른 도구들이 알 수 있다.

  • tsc —init으로 간단히 생성할 수 있다.

• noImplicitAny

  • 변수들이 미리 정의된 타입을 가져야하는가
  • 되도록 true로 설정한다. 설정 해제는 타입스크립트 마이그레이션에서만 필요하다.

  • true인 경우 - any 타입을 사용할 때는 명시적으로 any라고 선언해야한다.

    false인 경우 - any 타입으로 지정하지 않아도, 즉 암시적으로 any 타입으로 간주되는 것을 허용한다.

• strictNullChecks

  • null과 undefined가 모든 타입에서 허용되는가

    • true인 경우

      const x: number = null;
      
      // 오류! 'null' 형식은 'number' 형식에 할당할 수 없습니다.
      
      // 아래와 같이 의도를 명시하여 오류를 고칠 수 있다.
      const x: number | null = null;

    • false인 경우

      const x: number = null;
      
      // 정상! null은 유효한 값

  • null과 undefined 관련된 오류를 잡아 내는 데 많은 도움이 된다.

    “undefined는 객체가 아닙니다” 같은 런타임 오류를 방지하기 위해 설정하는 것이 좋다.

• strict

  엄격한 체크를 하고 싶다면 strict 설정을 고려한다.

아이템 3. 코드 생성과 타입이 관계없음을 이해하기

• 타입스크립트 컴파일러의 두 가지 역할

  1. 타입스크립트/자바스크립트를 브라우저에서 동작할 수 있도록 구버전 자바스크립트로 트랜스파일(transpile) 한다.
     • 트랜스파일(transpile): 번역(translate) + 컴파일(compile). 소스코드를 동일한 동작을 하는 다른 형태의 소스코드로 변환하는 행위. 결과물은 여전히 컴파일되어야 하는 소스코드이기 때문에 컴파일과는 구분된다.
  2. 코드의 타입 오류를 체크한다.

  이때 컴파일과 타입 체크는 독립적으로 동작한다.

• 타입 오류가 있는 코드도 컴파일이 가능하다.

  타입스크립트 오류는 경고(warning)와 비슷하다. 작성한 타입스크립트가 유효한 자바스크립트라면 타입스크립트 컴파일러는 컴파일을 해낸다. 따라서 “타입 체크에 문제가 있다”고 말하는 것이 정확한 표현이다.

  만약 오류가 있을 때 컴파일하지 않으려면, tsconfig.json에 noEmitOnError를 설정한다.

• 런타임에는 타입 체크가 불가능하다.

  • 자바스크립트로 컴파일되는 과정에서 모든 인터페이스, 타입, 타입 구문은 그냥 제거된다.
  • 따라서 런타임에 타입 체크를 하려면, 런타임에 타입 정보를 유지하는 방법이 필요하다.
    1. 속성이 존재하는지 체크
    2. 태그 기법
    3. 클래스로 타입 만들기

• 타입 연산은 런타임에 영향을 주지 않는다.

  값을 정제하기 위해서는 런타임의 타입을 체크해야 하고 자바스크립트 연산을 통해 변환을 수행해야 한다.

• 런타임 타입은 선언된 타입과 다를 수 있다.

  API 응답과 같이 런타임에 결정되는 값의 경우 선언된 타임이 언제든 달라질 수 있음을 명심해야 한다.

• 타입스크립트 타입으로는 함수를 오버로드할 수 없다.

• 타입스크립트 타입은 런타임 성능에 영향을 주지 않는다.

아이템 4. 구조적 타이핑에 익숙해지기

• 자바스크립트는 덕 타이핑 기반이다. 따라서 타입스크립트 또한 덕 타이핑 동작을 그대로 모델링하기 위해 구조적 타이핑을 사용한다.
  • 덕 타이핑이란, 객체가 어떤 타입에 부합하는 변수와 메서드를 가질 경우 객체를 해당 타입에 속하는 것으로 간주하는 방식

• 타입스크립트는 구조적 타이핑을 사용하기 때문에, 서로 다른 타입이라도 구조가 호환되는 경우, 타입 체커가 오류를 잡지 않는다.

  • A 타입과 B 타입의 구조가 호환되는 경우, 매개변수가 둘 중 하나의 타입인 함수에, 다른 타입의 인자를 주면서 호출이 가능하다.

    interface Vector2D {
        x: number;
        y: number;
    }
    
    interface NamedVector {
        name: string;
        x: number;
        y: number;
    }
    
    function calculateLength(v: Vector2D) {
        return Math.sqrt(v.x * v.x + v.y * v.y);
    }
    
    const v: NamedVector = { x: 3, y: 4, name: 'Zee' };
    calculateLength(v);

  • 함수를 작성할 때, 매개변수의 속성들이 매개변수의 타입에 선언된 속성만을 가질 거라 생각하기 쉽다. 이러한 타입은 봉인된(sealed), 정확한(precise) 타입이라 불리고 타입스크립트 타입 시스템에서는 표현할 수 없다. 타입은 열려(open) 있다.

    타입 시스템은 타입이 열려있음을 알고 타입을 확인한다.

    interface Vector3D {
        x: number;
        y: number;
        z: number;
    }
    
    function calculateLengthL1(v: Vector3D) {
        let length = 0;
        for (const axis of Object.keys(v)) {
            const coord = v[axis];
            // 'string'은 'Vector3D'의 인덱스로 사용할 수 없기에 엘리먼트는 암시적으로 'any' 타입입니다.
            length += Math.abs(coord);
        }
        return length;
    }

    위에서 Vector3D는 다른 속성이 없다고 가정했지만, 함수의 인자로 주어지는 v는 어떤 속성이든 가질 수 있다.

    const vec3D = { x: 3, y: 4, z: 1, address: '123 Broadway' };
    calculateLengthL1(vec3D); // 정상

    따라서 위 코드의 경우 v[axis]가 어떤 속성이 될지 알 수 없다. 타입스크립트가 오류를 정확히 찾아낸 것이다.

  • 구조적으로 필요한 속성과 생성자가 존재한다면, 클래스 역시 구조적 타이핑으로 타입으로 할당할 수 있다.

  • 구조적 타이핑을 활용하여 구체적인 인터페이스를 정의하면 유닛 테스트를 더 손쉽게 할 수 있다.

    구조적 타이핑 덕분에 mocking이 필요한 부분(DB, API)의 실제 인터페이스를 구현하는지 명확히 선언할 필요가 없다. 타입에 맞는 더 간단한 객체를 매개변수로 사용할 수 있다.

아이템 5. any 타입 지양하기

• any 타입에는 타입 안전성이 없다.

  as any를 통해 선언된 타입과 다른 타입을 할당할 수 있게 된다.

• any는 함수 시그니처를 무시해 버린다.

  any 타입으로 선언된 변수는 모든 타입의 매개변수에 들어갈 수 있다. 즉 any 타입을 사용하면 함수의 약속된 타입 입력과 출력을 무시하게 된다.

• any 타입에는 언어 서비스가 적용되지 않는다.

  • 타입스크립트는 타입이 있는 심벌에 자동완성을 해준다. any 타입인 심벌은 자동완성으로 속성이 나타나지 않는다.
  • ‘Rename Symbol’을 통해 프로젝트 내 어떤 타입의 심벌 이름을 한번에 바꿀 때, any 타입의 심벌은 바뀌지 않는다.

• any 타입은 코드 리팩터링 때 버그를 감춘다.

  any 타입의 매개 변수를 가지는 함수는, 매개 변수의 타입이 지정된 함수 시그니처가 타입으로 지정된 자리에 값으로 들어갈 수 있다.

  이 경우 타입 체커를 통과함에도 런타임에는 오류가 발생하게 된다. any가 아닌 구체적인 타입을 사용한다면 타입 체커가 오류를 발견했을 것이다.

• any는 타입 설계를 감춰버린다.

• any는 타입 시스템의 신뢰도를 떨어뜨린다.