[7장] 타입 설계 (아이템 52 ~ 아이템 57)

[dahye1013]

[7장 퀴즈]

타입 설계 (아이템 53 ~ 아이템 57)

아래 마크다운을 복사 붙여넣기해서 코멘트로 퀴즈를 달아주세요 :)
객관식, 주관식에 상관없이 편하게 만들어주세요!

부가 설명을 달고 싶다면, 해설을 정답과 함께 옵션으로 작성하시면 됩니다. ☺️

예시

### 아이템 N

퀴즈 내용 객관식의 정답을 골라보세요!
(퀴즈 내용)

1. 1번
2. 2번
3. 3번

<details>
<summary>퀴즈 정답</summary>
<div markdown="1">    
정답은 1번!
</div>
</details>

[sooooo-an]

아이템 53

퀴즈 내용 객관식의 정답을 골라보세요!
string enum이 사용하는 타이핑은 무엇인가요?

1. 구조적 타이핑
2. 명목적 타이핑

퀴즈 정답

정답은 2번! 명목적 타이핑을 사용하며, 명목적 타이핑은 이름 기반 타이핑이라고도 하며, 내부의 프로퍼티가 모두 동일하더라도 이름이 다르다면 다른 타입이라고 인지하는 타입시스템을 뜻합니다

[sooooo-an]

아이템 55

퀴즈 내용 객관식의 정답을 골라보세요!
DOM 관련 타입스크립트 에러를 제거하는 방법이 아닌 것은 무엇인가요?

1. 타입단언문 사용하기
2. 이벤트 핸들러를 인라인 함수로 만들기
3. type assertion 사용하기

퀴즈 정답

정답은 3번

// Type 'HTMLElement | null' is not assignable to type 'HTMLDivElement'.
// Type 'null' is not assignable to type 'HTMLDivElement'
const div: HTMLDivElement = document.getElementById('my-div');
div.addEventListener('click', () => {
    console.log('1');
});

[sooooo-an]

아이템 56

퀴즈 내용 객관식의 정답을 골라보세요!
정보를 감추기위해 좋지 않은 방법은 무엇인가요? (컴파일 옵션: ES2017이상)

1. 클로저
2. '#' 붙인 프로퍼티 생성
3. private 접근 제어자 이용

퀴즈 정답

정답은 3번! private 접근 제어자는 런타임 때 어떤 코드도 생성되지 않아 런타임 타임에서는 정보가 감춰지지않습니다 또한 컴파일 타임에서도 타입 단언문으로 타입을 강제하여 private 속성에 접근할 수 있습니다.

[junghyeonsu]

아이템 54

객체를 순회할 때는 for - in 구문을 사용하는 것 보다
entries 메서드를 이용해서 순회하는 것이 더 좋습니다.
이유는 뭘까요?

퀴즈 정답

for - in 구문을 사용하면 객체의 정의에 없는 속성이 갑자기 등장할 수 있습니다.

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

const x = {a: 'a', b: 'b', c: 2};

function foo(abc: ABC) {
  for (const k in abc) {
    const v = abc[k];
    // ABC 타입에 인덱스 시그니처가 없어서 any가 돼요
  }
}

그냥 타입 문제 없이 객체의 키와 값을 순회하고 싶다면 Object.entries 를 사용합시다.

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

[junghyeonsu]

아이템 57

브라우저에서는 타입스크립트 파일이 전처리기, 컴파일러, 압축기를 거친 자바스크립트 코드가 실행됩니다. 이러한 자바스크립트 파일은 디버깅이 어려운데 그럼 원래의 타입스크립트 파일을 브라우저에서 보고싶다면 어떻게 하면 될까요?

퀴즈 정답

tsconfig.json 파일에서 sourceMap 옵션을 true로 주면됩니다.
그럼 브라우저에서 실제로 ts 파일을 볼 수 있게 됩니다.

하지만 이 파일이 동작해서 브라우저에서 볼 수 있는 것은 아니고, 디버그에 용이하게끔 브레이크포인트를 설정할 수 있고, 변수를 조사할 수 있습니다.

만약에 실제 타입스크립트 코드에, 중요한 정보나 URL 같은 정보들이 있다면 sourceMap 옵션을 켜서 정보를 노출할 필요는 없습니다.

{
  "sourceMap": true
}

[junghyeonsu]

아이템 53

타입스크립트의 Enum (열거형) 기능은 몇 가지 이유때문에 사용을 권장하지 않습니다.
그 이유는 무엇이 있을까요?

퀴즈 정답

1. 숫자 열거형에 0, 1, 2 외의 다른 숫자가 할당되면 위험합니다. (비트 플래그 구조를 표현하기 위해 설계 되어서)
2. 상수 열거형은 보통 열거형과 달리 런타임에 완전히 제거되어서
3. 구조적 타이핑이 아닌 명목적 타이핑을 사용해서
   (구조적 타이핑은 구조가 같으면 할당이 허용되지만, 명목적 타이핑은 타입의 이름이 아예 같아야 허용이됩니다. 유연하지 못한거죠.)

[MINGDY98]

아이템 53

빈칸에 들어갈 수 있는 단어를 1개이상 작성하시오.

일반적으로 타입스크립트 코드에서 모든 타입 정보를 제거하면 자바스크립트가 되지만, _____는 타입 정보를 제거한다고 자바스크립트가 되지는 않습니다.

타입스크립트의 역할을 명확하게 하려면, _____는 사용하지 않는 것이 좋습니다.

퀴즈 정답

열거형, 매개변수 속성, 트리플 슬래시 임포트, 데코레이터 중 작성하면 정답

[MINGDY98]

아이템 55

Element, Node, HTMLElement, EventTarget 타입을 가장 추상화된 타입에서부터 순서대로 작성해라

퀴즈 정답

EventTraget, Node, Element, HTMLElement

[MINGDY98]

아이템 56

private 접근 제어자를 사용하면 데이터를 감출 수 있다.(O/X)

퀴즈 정답

정답은 X

public, protected, private 접근 제어자는 타입 시스템에서만 강제될 뿐이다. 런타임에는 소용이 없으며 단언문을 통해 우회할 수 있다. 확실히 데이터를 감추고 싶다면 클로저를 사용해야한다.

[areumsheep]

아이템 53

아래 코드에서 왜 오류가 발생했을까요?

enum Subject {
  KOREAN = 'korean',
  ENGLISH = 'english',
  JAVA = 'java'
}

let currentSubject = Subject.ENGLISH;
currentSubject = 'java'; //오류 발생!

퀴즈 정답

정답은 문자열 열거형은 구조적 타이핑이 아닌 명목적 타이핑을 사용하기 때문입니다.
구조적 타이핑은 구조가 같다면 할당이 되지만, 명목적 타이핑은 타입의 이름이 같아야 할당이 가능합니다.

[areumsheep]

아이템 55

아래 #### 안에 들어갈 타입은 무엇일까요?

<p>
  제가 가장 좋아하는 언어는 <i>JavaScript</i>
  <!-- 가 아니라 TypeScript입니다 👻 -->
</p>

> p.childNodes
####List(5) [text, i, text, comment, text]

퀴즈 정답

정답은 Node 입니다😺

[areumsheep]

아이템 56

public, protected, private 접근 제어자를 사용하면 공개 규칙을 강제할 수 있다! (O / X)

퀴즈 정답

정답은 X입니다. 타입스크립트의 접근 제어자는 컴파일 후에 제거됩니다.

class Diary {
  private secret = '오늘 시험에서 25점을 맞았다... 😿';
}

const diary = new Diary();
(diary as any).secret; // 에러 없음! 🙀

이렇게 단언문을 사용한다면 타입스크립트 상태에서도 private 속성에 접근할 수 있습니다.

[yeomgahui]

아이템 53

타입스크립트는 초기버전에서 독립적으로 개발한 기능과 자바스크립트와의 호환성 문제가 발생하기 시작했는데요, 이를 위해 채택한 전략을 설명해주세요.

퀴즈 정답

”자바스크립트의 신규 기능을 그대로 채택하고 타입스크립트 초기 버전과 호환성을 포기하는 것” ”TC39(ECMAScript내 위원회)는 런타임 기능 발전에 주력 , 타입스크립트는 타입 기능 발전에만 주력”

[yeomgahui]

아이템 54

다음 계층 구조를 순서 대로 나열하세요.

• Node , HTMLElement, EventTarget, HTMLxxxElement, Element

퀴즈 정답

HTMLxxxElement < HTMLElement < Element < Node < EventTarget

[yeomgahui]

아이템 56

타입스크립트에서 정보를 감추는 방법으로 "private" 접근 제어자가 있습니다. 하지만, 이는 컴파일시에만 유효하며, 런타임동작에서는 아무런 효력이 없는데요. 그렇기 때문에 정보를 감추는 방법으로 "클로저"를 사용한 방법과 "#" 접두사를 사용하는 방법이 있습니다.
이 두 방법의 차이는 무엇이며, 어떤 방법을 채택하는게 좋은지 설명하세요.

퀴즈 정답

'클로저'를 사용하게 되면, 동일한 클래스로부터 생성된 인스턴스라고 하더라도 서로의 비공개 데이터에 접근하는 것이 불가능하기 때문에 철저하게 비공개이면서 동시에 불편함이 따릅니다.
반면, '#'을 사용하면 개별 인스턴스끼리 접근이 가능합니다.
'#'을 사용하는 방식이 더 좋습니다.

[tooooo1]

아이템 56

접근 제어자는 타입 시스템에서 강제되는데요. 런타임에서도 강제되나요?

퀴즈 정답

정답은 타입 시스템에서만 강제된다. 접근 제어자는 public, protected, private가 있습니다.

[tooooo1]

아이템 57

원본 코드가 아닌 변환된 자바스크립트를 디버깅해도될까요?

퀴즈 정답

안 돼요. 소스맵을 사용해서 런타임에 타입스크립트 코드를 디버깅해요!

[tooooo1]

아이템 N

객체 순환 시, 키가 정확히 어떤 타입인지 파악하고 있다면 어떤 방식이 좋을까요?

퀴즈 정답

let k: keyof T와 for-in 루프를 사용해요! 함수의 매개변수로 쓰이는 객체에는 추가적인 키가 존재할 수 있따는 점을 명심합시다!

[dahye1013]

아이템 53장

아래 열거형(enum)의 런타임 결과물은 어떻게 다를까요?

1

enum Flavor {
    VAILLA = 'vanilla',
    CHOCOLATE = 'chocolate',
}

2

enum Flavor {
    VAILLA = 'vanilla',
    CHOCOLATE = 'chocolate',
}

퀴즈 정답

const 가 붙는 경우 상수 열거형은 보통의 열거형과 달리 런타임에 완전히 제거됩니다.

[parksil0]

아이템 53

타입스크립트 코드 중 컴파일 이후에도 제거되지 않는 코드는?

퀴즈 정답

열거형, 매개변수 속성, 트리플 슬래시 임포트, 데코레이터는 제거되지 않는다.

[parksil0]

아이템 55

타입스크립트에서 클래스 작성 시 private 접근 제어자를 선언하면 클래스 외부에서 접근이

1. 가능하다
2. 불가능하다

퀴즈 정답

정답은 1번! 가능하다. 단언문을 통해 우회할 수 있으며, 타입스크립트에서만 강제되기 때문에 런타임에서는 유효하지 않다.

[parksil0]

아이템 57

타입스크립트로 작성된 코드를 브라우저에서 확인할 때 타입스크립트 코드로 디버깅을 할 수 있다

1. O
2. X

퀴즈 정답

정답은 1번! tsconfig.json에서�sourceMap을 true로 설정하면 디버깅이 가능하다.

[dahye1013]

아이템 57장

다음 중 소스맵(sourceMap)에 관한 설명 중 틀린 것은?

1. 타입스크립트는 번들러와 압축기를 함께 사용하여, 각자의 소스맵을 생성합니다.
2. 필요한 시점(런타임)에 타입스크립트가 직접 실행되지 않기 때문에 디버깅 시에 필요합니다.
3. 디버거를 열지않아도 소스맵이 로드되므로 성능 저하가 발생할 수 있습니다.
4. 변환된 코드의 위치와 심벌들을 원래 위치와 심벌로 매핑합니다.
5. NodeJS 프로그램의 디버깅에도 소스맵을 사용할 수 있습니다.
6. 타입 체커는 코드 실행 이전 많은 오류를 잡지만 디버거를 대체할 수는 없습니다.

퀴즈 정답

정답은 3번!

• 상용 환경에 소스맵이 유출되어 있는지만 확인하면 됩니다.
• 디버거를 열지 않으면 소스맵은 로드되지 않습니다.
• 소스맵에 원본코드가 포함되도록 설정되어있는지 여부만 확인하면 됩니다.

[dahye1013]

아이템 54

1. daji_key가 추론되는 타입은 무엇인가요?
2. (1), (2) 중 어느 곳에서 타입 에러가 발생할까요?

const daji = {
	name : 'Shin daji',
	age : '5',
}

for (const daji_key in daji) {
    console.log(daji); // (1)
    console.log(daji[daji_key]); // (2)
}

퀴즈 정답

1. daji_key는 string 타입으로 추론됩니다.
2. (2)에서 에러가 발생합니다.
3. daji키가 string이기 때문에 daji 인덱스 시그니처가 맞지 않아서 발생하는 오류입니다.
   daji는다음과 같은 인덱스 시그니처를 가집니다. '{ name: string; age: string; }'.
   daji 객체에 접근하기 위한 daji_key에 대한 타입을 다음과 같이 좁혀 해결 할 수 있습니다.

let daji_key : keyof typeof daji_key;

[jlee0505]

아이템 53

타입스크립트 기능보다는 ECMAScript 기능을 사용하는 것이 권장되는 이유는 무엇일까요?

퀴즈 정답

정답: 초기에 타입스크립트(2010)는 '타입' + 자바스크립트의 부족한 '기능'(모듈,클래스,데코레이터 등)을 보충하기 위한 언어였습니다. 시간이 흐르며 부족했던 기능들이 자바스크립트에도 추가가 되었습니다(2015) 이 자바스크립트에 추가된 '기능'들과 기존 타입스크립트의 '기능'들과 호환성 문제를 발생합니다. 타입스크립트는 '타입'만을, '기능'에 있어서는 자바스크립트르 따르기로 결정했고, 따라서 이전에 개발된 타입스크립트의 '기능'들은 호환성 문제 때문에 사용이 지양됩니다.

[jlee0505]

아이템 56

클래스에 비공개 속성을 주기 위해 타입스크립트에서 권장되는 방법은 무엇인가요?

1. 클로저
2. private 접근 연산자
3. # 비공개 필드 기능

퀴즈 정답

정답은 1번,3번

[jlee0505]

아이템 57

// tsconfig.json
{
  "complierOptions": {
    "sourceMap": true,
   }
}

위와 같은 설정은 왜 필요한가요?

퀴즈 정답

정답: 위 설정은 이상적인 타입스크립트 디버깅 환경을 설정해주는 것으로, 소스맵을 설치합니다. 위와 같이 설정을 하면 타입스크립트 컴파일 시 .js 뿐 아니라 .js.map(소스맵)을 함께 생성하게 됩니다. 소스맵이 있으면 브라우저의 디버거에 나타나는 가상의 파일 _.ts_ 파일이 추가됩니다. 이 파일은 디버거를 통해 생성된 복잡한 자바스크립트 대신 원본 타입스크립트 소스를 사용해 보다 편리하게 디버깅을 할 수 있게 해줍니다.

[seojihwan]

아이템 53

명목적 타이핑과 구조적 타이핑의 차이는?

퀴즈 정답

구조적 타이핑은 구조가 같으면 할당 허용되지만, 명목적 타이핑은 타입의 이름이 같아야함.

예시: 명목적 타이핑을 사용하는 문자열 열거형

enum Flavor {
  VANILLA = 'vanllia',
  STRAWBERRY = 'strawberry'
}

const flavor: Flavor = 'strawberry';  // "strawberry"형식은 'Flavor' 형식에 할당될 수 없습니다.

문자열 열거형 대신, 리터럴 타입의 유니온을 사용하자. (자바스크립트와 타입스크립트에서 동작이 같기 때문에)

[seojihwan]

아이템 56

public, protected, private 접근 제어자를 통해 캡슐화를 처리할 수 있다. (O / X)

퀴즈 정답

O 캡슐화를 통해, 타입시스템을 강제할 수 있다.
하지만 런타임에서는 접근가능하므로 보안에 신경써야한다면 클로저를 사용해야한다.

[seojihwan]

아이템 54

interface AB {
  a: string;
  b: string;
}


function foo(ab: AB){
  for (const k in ab){ // k의 타입이 keyof AB가 아니라 string으로 타입이 잡히는 이유는?
    ...
  }
}

퀴즈 정답

매개변수에는 할당가능한 값을 타입적으로 전달해 줄 수 있기 때문에 다른 잉여속성이 매개변수에 존재할 수 있다.
따라서 a | b 가 아닌 string으로 타입이 잡힌다.