[TypeScript] 이펙티브 타입스크립트 item 53 ~ 57

item 53

타입스크립트 기능보다 ECMAScript 기능을 사용하기

 

일반적으로 타입스크립트 코드에서 타입정보를 빼면 자바스크립트가 되지만

열거형, 매개변수 속성, 트리플 슬래시 임포트, 데코레이터는 타입정보를 제거한다고 자바스크립트가 되지는 않음

=> 타입스크립트의 역활을 명확하기 위해 위에 말한 것들은 사용하지 않는 것이 좋음

item 54

객체를 순회하는 노하우

객체를 순회하며 키와 값을 얻을 때

 

keyof : 정확한 타입을 원할 때

interface Obj {
    one: string;
    two: string;
    three: number;
}

const A: Obj ={
    one: '1',
    two: '2',
    three: 3
}

let k: keyof Obj
for (k in A){
    const v = A[k];
    console.log(v);
}

// '1'
// '2'
// 3

object.entries 사용 : 키와 값의 타입을 다루기 까다롭지만 일반적으로 사용

for (const [k, v] of Object.entries(A)){
    console.log(k, v);
}

// "one",  "1" 
// "two",  "2" 
// "three",  3

 

item 55

DOM 계층 구조 이해하기

 

item 56

정보를 감추는 목적으로 private 사용하지 않기

public, private, protected 같은 접근 제어자는 타입스크립트 키워드이기에 컴파일 후 제거됨 => 런타임에는 아무런 효력이 없음

고로 정보를 감추는 목적이면

• private가 아닌 closure 를 사용하는 방법

class PasswordChecker {
    checkPassword: (password: string) => boolean;
    constructor(passwordHash: number) {
        this.checkPassword = (password: string) => {
            return hash(password) === passwordHash;
        }
    }
}

const checker = new PasswordChecker(hash('secret'));
// 생성자 밖에서 passwordHash 접근할 수 없음 => 데이터 비공개 지킴
// passwordHash 접근하는 메서드 정의 생성자 내부에 있어야함 => 인스턴스 생성할 때마다 복사본 생성되기에 메모리 낭비
checker.checkPassword('secret'); // true

• 접두사로  #를 붙임으로 비공개 필드 기능을 사용 => 타입체크, 런타임 모두에서 비공개로 만들어줌 

 

 

item 57

소스맵 사용해서 타입스크립트 디버깅하기