7장 코드를 작성하고 실행하기

item 53

• js와 ts 사이 다르게 동작하는 기능은 웬만하면 쓰지 말자.
• enum
• 리터럴 타입 |을 사용하자.
• ts의 매개 변수 속성을 쓰지 말자.

class Person {
	name: string; constructor(name: string) {
		this.name = name; 
	}
}

class Person {
	constructor(public name: string) {}
}

• ts가 더 간결하지만 매개 변수 속성과 일반 속성을 사용하면 ts와 js가 이를 받아들이는 것도 다르고, 클래스의 설계가 혼란스러워짐.
• namespace, /// <reference path="other.ts"/> 네임스페이스와 트리플 슬래시 임포트는 호환성을 위해 남아 있을 뿐, ECMAScript의 import, export를 사용하자.
• 앵귤러를 쓰는 게 아니라면 데코레이터를 호환성 문제가 있으니 쓰지 말자.

// 데코레이터 예시
class Greeter {
	greeting: string; constructor(message: string) {
		this.greeting = message; 
	}
	@logged
	greet() {
		return "Hello, " + this.greeting;
	} 
}

function logged(target: any, name: string, descriptor: PropertyDescriptor) { 
	const fn = target[name];
	descriptor.value = function() {
    console.log(`Calling ${name}`);
		return fn.apply(this, arguments); 
	};
}

console.log(new Greeter('Dave').greet()); // Logs:
// Calling greet
// Hello, Dave

item 54

• 타입 에러 없이 객체를 순회하고 싶다면 object.entries를 사용하자.

const obj = {
  one: "uno",
  two: "dos",
  three: "tres",
};
for (const k in obj) {
  const v = obj[k]; // ❌ obj에 인덱스 시그니처가 없기 때문에 엘리먼트는 암시적으로 'any' 타입입니다.
}

let k: keyof typeof obj; // 이렇게 k 값을 정의하는 것도 하나의 방법임.

interface ABC {
  a: string;
  b: string;
  c: number;
}

function foo(abc: ABC) {
  for (const [k, v] of Object.entries(abc)) {
    k; // type : string
    v; // type : any
  }
}

item 55

• dom을 찾을 때 eventTarget이 window나 xmlHttpRequest로 되어 있다면 eventTarget 형식에 classList 속성이 없습니다등의 오류를 볼 수 있음.

• dom 관련해선 ts보다 우리가 더 정확히 타입을 알고 있는 경우가 많기에 단언문을 사용해도 좋음.

• Event타입은 가장 추상화된 이벤트임. Event에 clientY 속성이 없습니다등의 에러를 본다면 더 구체적인 타입을 지정할 필요가 있음.

item 56

• public, protected, private 접근 제어자는 타입 시스템에서만 강제될 뿐임. 런타임에는 소용이 없기에 접근 제어자로 데이터를 감추려고 하지 말자.

• 확실히 데이터를 감추고 싶다면 클로저를 사용해야 함.

class PasswordChecker { 
	#passwordHash: number;
	constructor(passwordHash: number) { 
		this.#passwordHash = passwordHash;
	}

	checkPassword(password: string) {
		return hash(password) === this.#passwordHash;
	} 
}

const checker = new PasswordChecker(hash('s3cret')); 
checker.checkPassword('secret'); // Returns false 
checker.checkPassword('s3cret'); // Returns true

item 57

• 소스맵을 사용해 ts 디버깅 환경을 구축할 수 있음.

• tsconfig에서 컴파일러 옵션에 소스맵 true 속성을 주면 컴파일 실행시 .ts 파일에 대해 .js와 .js.map 두 개의 파일을 생성함. 이때 .js.map 파일이 소스맵임.

• 소스맵이 있으면 디버거에서 생성된 js 대신 원본 ts 소스를 사용할 수 있음.