전체 글 (157) 썸네일형 리스트형 Effective Typescript - 1 - 타입스크립트와 자바스크립트의 관계 이해하기 타입스크립트는 자바스크립트의 상위 집합이다. 다시 말해서 모든 자바스크립트 프로그램은 타입 스크립트 프로그램입니다. 타입스크립트는 별도의 문법들이 있으므로 유효한 자바스크립트 프로그램은 아닙니다. 타입스크립트는 자바스크립트 런타임 동작을 모델링하는 타입 시스템을 가지고 있기 때문에 런타임 오류를 발생시킬 법한 코드를 미리 찾아내려고 합니다. 하지만, 타입 체커를 통과하면서도 런타임 오류를 발생하는 코드는 존재할수 있습니다. const names = ['Alice', 'Bob']; console.log(names[2].toUpperCase()); // 타입 체커를 통과하지만 런타임 오류가 발생함. 타입스크립트 타입 시스템은 전반적으로 자바스크립트 동작을 모델링합니다. 그러나 잘못된 매개변수 개수로 함수를 .. Effective Typescript - 56 - 정보를 감추는 목적으로 private 사용하지 않기 자바스크립트는 클래스에 비공개 속성을 만들 수 없습니다. 마찬가지로 타입스크립트에서도 public, protected, private 접근 제어자를 사용할 수 있으나 공개 규칙을 강제할 수 없습니다. 타입스크립트 접근 제어자들은 컴파일 이후 사라지는 키워드이며 컴파일 시점에서만 오류를 표현해줍니다. 런타임에는 아무런 효력이 없다는 뜻입니다. 정보를 감추기 위한 목적이라면 타입스크립트 접근 제어자 대신 클로저를 사용하는 것입니다. declare function hash(text: string): number; class PasswordChecker { checkPassword: (password: string) => boolean; constructor(passwordHash: number) { this... Effective Typescript - 54 - 객체를 순회하는 노하우 아래 예제는 정상적으로 실행은 되지만, 편집기에서는 오류가 발생합니다. const obj = { one: 'uno', two: 'dos', three: 'tres', }; for (const k in obj) { const v = obj[k]; //에러) obj에 인덱스 시그니처가 없기 때문에 엘리먼트는 암시적으로 'any' 타입임. } 원인은 obj의 타입은 'one' 'two' 'three' 속성만 허용하는 타입이지만 for 이터레이션의 k 변수의 타입은 string타입으로 추론되었기 때문입니다. k 변수가 string으로 추론되는 원인은 무엇일까요? 왜냐하면 타입스크립트 타입 체커는 'obj' 속성에 언제든 새로운 속성이 추가될 수 있다는 것을 알고 있기 때문입니다. obj 객체에 'four'과 같.. Effective Typescript - 53 - 타입스크립트 기능보다는 ECMAScript 기능을 사용하기 타입스크립트 초창기 시절에 도입된 몇 가지 기능을 사용하면, 타입 공간(타입스크립트) 값 공간(자바스크립트)의 경계를 혼란스럽게 한다고 합니다. 이에 대해서 알아봅시다. 1. 타입스크립트 의 열거형(enum)과 관련된 문제 타입스크립트 열거형은 상황에 따라 다르게 동작한다고 합니다. 아래 예제를 통해 확인할 수 있습니다. enum Flavor { VANILLA = 0, CHOCOLATE = 1, STRAWBERRY = 2, } let flavor = Flavor.CHOCOLATE; // 타입이 Flavor let flavor2 = Flavor[0] // 값이 "VANILLA"; 타입은 string a. Flavor 타입에 0, 1, 2 외 다른 숫자가 할당되면 매우 위험합니다. let flavor3 = .. Effective Typescript - 52 - 테스팅 타입의 함정에 주의하기 프로젝트를 공개하려면 테스크 코드를 작성하는 것은 필수이며, 타입 선언도 테스트를 거쳐야 합니다. 함수 실행만 하는 테스트 코드는 의미가 없는 것은 아니지만, 실제 반환 타입을 체크하는 것이 훨씬 좋은 테스트 코드입니다. declare function map(array: U[], fn: (u : U) => T): T[]; const lengths: number[] = map(['apple', 'banana'], name=> name.length); //이와 같이 변수에 불필요한 타입 선언(아이템 19)에서 하지마라는 것을 하고 있지만, 테스트 코드 관점에서는 중요합니다. 하지만, 테스팅을 위해 할당을 사용하는 방법에는 두 가지 근본적 문제가 있다고 합니다. 첫 번째, 불필요한 변수를 만들어야 합니다. 이.. Effective Typescript - 51 - 의존성 분리를 위해 미러 타입 사용하기 내용 생략 요약 * 공개된 라이브러리를 사용하는 자바스크립트 사용자가 @types 의존성을 가지지 않게 해야한다. 그리고 웹 개발자가 NodeJS 관련된 의존성을 가지지 않게 해야한다. Effective Typescript - 50 - 오버로딩 타입보다는 조건부 타입을 사용하기 여러 종류의 파라메터를 받는 함수 시그니처를 명세할 때에는 함수 오버로딩 대신 조건부 타입을 활용한 함수 시그니처 명세가 더 정교한 타입 추론을 가능하게 할 수 있습니다. //비추 (타입 오버로딩) function double(x: number): number; function double(x: string): string; function double(x: any) { return x + x;}; const x = double(10); const y = double('yy'); const z: string | number = '11'; function zz(z : number | string){ double(z); // 오류 } // //추천 (조건부 타입) function double(x: T): T.. Effective Typescript - 49 - 콜백에서 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(); // 1, 4, 9 const c2 = new C(); const method = c.logSquares; method(); // 오류, vals 속성을 읽을 수 없음. c.logSquares() 가 실제로는 두 가지 작업을 수행한다고 합니다. 1. C.prototype.logSquares를 호출. 2. this의 값을 c로 바인딩. JS에서 this 바인딩을 온전히 제거할 수 있는 방법은 .call.. 이전 1 2 3 4 5 6 ··· 20 다음