[TypeScript] 이펙티브 타입스크립트 item 45 ~ 49

item 45

devDependencies에 typescript 와 @types 추가하기

 

dependencies: 현재 프로젝트를 실행하는데 필수적인 라이브러리들

devDependencies: 현재 프로젝트를 개발하고 테스트하는데 사용되지만 런타임에는 필요없는 라이브러리들

peerDependencies: 런타임에 필요하지만, 의존성 직접 관리하지 않는 라이브러리들 ex) 플러그인

 

공통적으로 고려해야할 의존성 2가지

1. 타입스크립트 자체 의존성을 고려해야 함

시스템 레벨로 설치한다면 팀원들간의 버전 차이로 인한 비용이 발생할 것이기에, 시스템 레벨 보다는 devDependencies에 넣는 것이 좋음

2. 타입 의존성(@type)을 고려해야 함

사용하려는 라이브러리에 타입 선언이 포함되어 있지 않더라도 타입스크립트 커뮤니티에서 유지보수하고 있는 타입 모음에서 정보를 얻을 수 있음 ( 타입 정보만, Not 구현체 )

 

item 46

의존성 관리 어려움 => 라이브러리를 추가해서 사용은 많이 하지만, 라이브러리의 전의적(transitive) 의존성이 호환되는지는 고민X

(실제로 내가 그렇다 ㅎㅎ;; 많이 쓰긴 했지만 어떻게 동작하고 어떻게 호환되는지에 대해 생각을 해본 적이 없는 것 같음)

 

타입 스크립트는

• 라이브러리의 버전
• 타입 선언(@types)의 버전
• 타입스크립트의 버전 

을 추가로 고려하기에 알아서 의존성 문제를 해결해주는 것이 아닌 더 복잡하게 만듬

 

타입 스크립트에서 일반적으로 

특정 라이브러리는 dependencies, 타입 정보는 devDependencies로 설치해서 관리

즉, 실제 라이브러리와 타입 정보의 버전이 별도로 관리되는 방식이라는 것

• 라이브러리를 업데이트했지만, 타입 선언은 업데이트하지 않은 경우 => 타입 오류
• 라이브러리 보다 타입 선언이 최신인 경우 => 타입 체커는 최신 API 기준으로 코드 검사하지만 실제로는 과거 버전이 사용된다
• 프로젝트에서 사용하는 타입스크립트 버전보다 라이브러리에서 필요하는 타입스크립트 버전이 최신인 경우 => @type 선언 자체에서 타입 오류 발생
• @type 의존성이 중복되는 경우 Ex) @types/apple 와 @types/banana 에 의존하는 경우 @types/apple이 현재 프로젝트와 호환되지 않는 @types/banana에 의존한다면 중첩된 폴더에 별도로 해당 버전을 설치하여 해결하려고 시도함 => 런타임에 사용되는 모듈이면 괜찮을 수 있는데 전역 네임스페이스에 있는 타입 선언 모듈이면 대부분 문제 발생, why? 전역 네임 스페이스에 타입 선언이 존재하면 중복된 선언, 또는 선언이 병합될 수 없기에

 

item 47

공개 API에 등장하는 모든 타입을 export하기 

어차피 공개 메서드에 등장하면 사용자가 추출할 수 있기에 export하기 쉽게 만들자 

 

item 48

API 주석에 TS Doc 사용하기 

 

item 49

 

콜백에서 this에 대한 타입 제공하기

let이나 const로 선언된 변수는 lexical scope, 반면 this 는 dynamic scope

=> this 는 호출된 방식에 따라 달라짐

[JS] Lexical Scope, Dynamic Scope — Registro (tistory.com)

[JS] Lexical Scope, Dynamic Scope

 

class ResetButton {
  render() {
    return makeButton({ text: "Reset", onClick: this.onClick });
  }
  onClick = () => {
    alert(`Reset ${this}`); // this가 항상 인스턴스를 참조
  };
}
//onClick 호출시 this 바인딩 문제로 인해 "Reset이 정의되지 않았습니다" 라는 경고 발생

//생성자에서 메서드에 this 바인딩, => 사용시 해결
class ResetButton {
  constructor() {
    this.onClick = this.onClick.bind(this);
  }
  render() {
    return makeButton({ text: "Reset", onClick: this.onClick });
  }
  onClick() {
    alert(`Reset ${this}`);
  }
}

콜백 함수의 매개 변수에 this 추가하고, 콜백 함수를 call로 호출해서 해결가능

콜백 함수의 매개변수에 this추가하면 this 바인딩이 체크되기에 실수 방지 가능

라이브러리 사용자의 콜백 함수에서 this 참조할 수 있고 타입 안정성 확보 가능

콜백 함수에서 this 사용한다면 타입 정보 명시 해야함 

 

(내용이 잘 이해가 안된다...)