Book/이펙티브 타입스크립트 (完)

13. 타입스크립트로 마이그레이션하기 | 이펙티브 타입스크립트 8장 (END)

자바스크립트 프로젝트에서 발견된 버그의 상당수는 타입스크립트를 사용했다면 컴파일 시점에서 미리 방지했을 수 있었을 것이다. 58. 모던 자바스크립트로 작성하기 타입스크립트는 특정 버전의 자바스크립트로 컴파일하는 기능도 갖고 있다. (즉, 트랜스파일러) 마이그레이션을 어디서부터 시작해야 할지 모르겠다면 최신 버전의 자바스크립트로 바꾸는 것부터 시작하자. 1. ECMAScript 모듈 사용하기 es6 버전부터 모던 자바스크립트라고 부른다. es6부터는 import/export를 사용하는 ECMAScript 모듈이 표준이 되었다. ES 모듈 시스템은 모듈 단휘로 전화할 수 있게 해주기 때문에 점진적 마이그레이션이 원활해진다. // CommonJS // a.js const b = require("./b"); c..

12. 코드를 작성하고 실행하기 | 이펙티브 타입스크립트 7장

53. 타입스크립트 기능보다는 ECMAScript 기능을 사용하기 TC39(자바스크립트 표준 기구)는 내장 기능을 추가해왔다. 그러면서 타입스크립트 초기 버전과의 호환성 문제가 발생했다. 타입스크립트는 자바스크립트의 신규 기능을 그대로 채택하고 타입스크립트 초기 버전과의 호환성을 포기했다. 그렇게 TC39는 런타임 기능을 발전시키고, 타입스크립트 팀은 타입 기능만 발전시킨다는 원칙을 세우고 지켜오고 있다. 이 원칙이 세워지기 전에 이미 사용되고 있던, 타입 공간과 값 공간의 경계를 혼란스럽게 만드는, 피해야 하는 기능을 살펴보자. 다음 기능들으 ㅣ경우에는 타입 정보를 제거한다고 자바스크립트가 되지는 않는다. 1. 열거형(enum) enum Flavor { VANILLA = 0, CHOCOLATE = 1,..

11. 타입 선언과 @types(2/2) | 이펙티브 타입스크립트 6장

49. 콜백에서 this에 대한 타입 제공하기 let/const로 선언된 변수가 렉시컬 스코프인 반면, this는 다이나믹 스코프입니다. 다이나믹 스코프의 값은 정의된 방식이 아닌 호출된 방식에 따라 달라진다. this는 객체의 현재 인스턴스를 참조하는 클래스에서 가장 많이 쓰인다. class C { vals = [1, 2, 3]; logSquares() { for (const val of this.vals) { console.log(val * val); } } } const c = new C(); c.logSquares(); const method = c.logSquares(); method(); // undefined의 'vals' 속성을 읽을 수 없습니다. 내부 메서드를 외부 변수에 넣고 호출하면 ..

10. 타입 선언과 @types(1/2) | 이펙티브 타입스크립트 6장

45. devDependencies에 typescript와 @types 추가하기 npm은 세 가지 종류의 의존성을 구분해서 관리하며, 각각의 의존성은 package.json 파일 내 별도 영역에 들어 있다. dependencies 현재 프로젝트를 실행하는 데 필수적인 라이브러리들이 포함된다. lodash 같이 프로젝트의 런타임에 사용되는 라이브러리들이 포함되어야 한다. npm에 공개하여 다른 사용자가 설치할 경우, dependencies에 들어 있는 라이브러리도 함께 설치된다. (전이 의존성) devDependencies 현재 프로젝트를 개발하고 테스트하는 데 사용되지만, 런타임에는 필요 없는 라이브러리들이 포함된다. 트스트 프레임워크 같은 라이브러리들이 포함될 수 있다. npm에 공개하여 다른 사용자가..

9. any 다루기(2/2) | 이펙티브 타입스크립트 5장

42. 모르는 타입의 값에는 any 대신 unknown을 사용하기 1. 함수의 반환값과 관련된 unknown 함수의 반환 타입으로 any를 사용하는 것은 좋지 않은 설계다. function parseYAML(yaml: string): any {} interface Book { name: string; author: string; } const book = parseYAML( `name: Jane Eyre author: CharlotteBronte` ); console.log(book.title); // 오류 없음. 런타임에 "undefined" 경고 book("read"); // 오류 없음. 런타임에 타입 에러 발생 대신 함수가 unknown 타입을 반환하게 만드는 것이 더 안전하다. function s..

8. any 다루기(1/2) | 이펙티브 타입스크립트 5장

38. any 타입은 가능한 한 좁은 범위에서만 사용하기 function processBar(b: Bar) {} function expressionReturningFoo(): Foo {} function f() { const x = expressionReturningFoo(); processBar(x); // 'Foo' 형식의 인수는 'Bar' 형식의 매개변수에 할당될 수 없습니다. } x가 foo 타입과 Bar 타입에 동시에 할당 가능하다면, 오류를 제거하는 방법은 두 가지다. function f1() { const x: any = expressionReturningFoo(); // 나쁜 방법 processBar(x); } function g() { const foo = f1(); // 타입이 any ..

7. 타입 설계(2/2) | 이펙티브 타입스크립트 4장

33. string 타입보다 더 구체적인 타입 사용하기 문자열을 남발하여 선언된(stringly typed) 코드를 비하자. 모든 문자열을 할당할 수 있는 string보다 더 구체적인 타입을 사용하자. // 좋지 않은 예 interface Album { artist: string; title: string; releaseDate: string; recordingType: string; } // 개선한 코드 type RecordingType = "studio" | "live"; interface Album { artist: string; title: string; releaseDate: Date; recordingType: RecordingType; } 장점 1. 타입을 명시적으로 정의함으로써 다른 곳으로..

6. 타입 설계(1/2) | 이펙티브 타입스크립트 4장

28. 유효한 상태만 표현하는 타입을 지향하기 유효한 상태와 무효한 상태를 둘 다 표현하는 타입은 혼란을 초래하기 쉽고 오류를 유발하게 된다. interface State { pageText: string; isLoading: boolean; error?: string; } function renderPage(state: State) { if (state.error) { return "Error"; } else if (state.isLoading) { return "Loading"; } return "page"; } async function changePage(state: State, newPage: string) { state.isLoading = true; try { const response = ..