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 계층 구조

• 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 디버깅 환경을 구축할 수 있음.