[5장] 타입 설계 (아이템 38 ~ 아이템 44)

[dahye1013]

[5장 퀴즈]

타입 추론 (아이템 38 ~ 아이템 44)

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

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

예시

### 아이템 N

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

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

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

[areumsheep]

아이템 41

다음 out의 반환 타입은?

function range(start: number, limit: number) {
   const out = [];
   for(let i = start; i < limit; i++) {
       out.push(i);
   }
   return out; // ???
}

퀴즈 정답

정답은 number[]!

out의 타입은 any[]에서 number[]로 진화되었다!

[areumsheep]

아이템 38

@ts-ignore보다 any를 사용하는 것이 좋다. (O/X)

퀴즈 정답

정답은 X

강제로 타입 오류를 제거하기 위해서는 any보다 @ts-ignore가 낫다.
하지만 근본적인 타입 에러를 제거하자

[areumsheep]

아이템 39

다음 함수의 반환타입은?

function getLength(array: any[]) {
   return array.length
}

퀴즈 정답

정답은 number

매개변수를 any가 아닌 any[] 로 명시하여 number로 추론된다

[sooooo-an]

아이템 41

이 함수를 정의했을 때 return out에서 컴파일 에러가 생기는데 그 이유는?

function range(start: number, limit: number) {
    const out = []; 
    if (start === limit) {
        return out;  // Error 
    }
    for (let i=start; i<limit; i++) {
        out.push(i);
    }
    return out; 
}

퀴즈 정답

암시적 any상태인 변수에 어떠한 할당도 하지 않고 사용하려고 해서 에러남

[sooooo-an]

아이템 38

이 함수를 좁은 범위의 any로 변경하세요

function getPerson() {
    const age: any = getAge();
    convertInternationalAge(age);
    return age;
}

퀴즈 정답

``` function getPerson() { const age = getAge(); convertInternationalAge(age as any); return age; } ```

[sooooo-an]

아이템 43

document.monkey = 'Tamarin'; 의 코드에서, 인터페이스 보강을 사용하여 아래의 코드로 선언하였을 때 문제점이 아닌 것은?

interface Document {
    monkey: string;
}

(퀴즈 내용)

1. 전역 스코프
2. 애플리케이션이 실행되는 동안 속성을 할당하면 실행 시점에서 보강을 적용할 방법 없음
3. 모듈 영역 스코프

퀴즈 정답

정답은 3번! extends를 이용하여 별도로 확장해야 스코프가 모듈 영역으로 제한된다

[seojihwan]

아이템 41

const a = [] 
a // 1. a의 타입은?
a.push(5) 
a // 2. a의 타입은?
a.push('a') 
a // 3. a의 타입은?

퀴즈 정답

1. any[]
2. number[] 
3. (number | string)[] 
// type이 evolve된다.

[seojihwan]

아이템 42

any와 unknown의 차이점은?

퀴즈 정답

1. any타입은 unknown의 슈퍼타입이다.
2. any타입은 어떤 타입으로든 할당할 수 있지만, unknown은 슈퍼타입인 unknown, any타입만 가능하다.

[jlee0505]

아이템 38

f2() 의 반환값의 타입으로 올바른 것은?
(단, expressionReturningFoo() 는 반환값으로 Foo 타입을 반환한다. processBar() 은 Bar 타입인 인자를 받는다. Foo 와 Bar 타입은 같은 타입이라 가정한다.)

function f1() {
  const x: any = expressionReturningFoo();
  processBar(x);
  return x;
}

function f2() {
  const x = expressionReturningFoo();
  processBar(x as any);
  return x;
}

1. any
2. Foo
3. Bar

퀴즈 정답

정답은 2번!

[seojihwan]

아이템 43

noImplicitAny옵션을 사용하더라도 any타입이 존재할 수 있다. (O, X)

퀴즈 정답

정답: O 명시적으로 any타입을 선언하거나 서드파티에서 any타입을 선언하여 제공하면 코드상에 any타입이 존재할 수 있다.

[tooooo1]

아이템 41

다음 중 타입을 더 안전하게 지키기 위한 방법은?

1. 암시적 any를 진화시킨다.
2. 명시적 타입 구문을 사용한다.

퀴즈 정답

정답은 1번!

[tooooo1]

아이템 42

unkown은 왜 any보다 더 안전한 타입인지 설명해주세요

퀴즈 정답

any타입은 unknown의 슈퍼타입이라 unknown이 상대적으로 더 안전하고, 단언문을 분리해야하는 리펙터링 때에도 unknown의 경우 즉시 오류를 발생시켜주어서 더 안전하다.

[tooooo1]

아이템 39

우리는 타입이 모를 때 any를 사용하는데요.
모르는 곳이 생길 때마다 any로만 타입을 선언하여 해결하면 될까요?

퀴즈 정답

정답은 아니다. 모르는 타입에 any를 불가피하게 선언해야하더라도 형태를 최대한 구체적으로 사용하는 방식이 더 좋다. 배열이라면 any보다는 any[]를 사용하거나 함수라면 ()=>any 등, any라도 형태를 최대한 구체화하여 사용하자!

[jlee0505]

아이템 41

any 사용시 주의점을 설명할 때 아래의 코드가 가장 적절하게 예시로 쓰일 any 사용 규칙은?

function range(start: number, limit: number) {
 const out = []; // Type is any[]
 for (let i = start; i < limit; i++) {
 out.push(i); // Type of out is any[]
 }
 return out; // Type is number[]
}

1. Use the Narrowest Possible Scope for any Types
2. Hide Unsafe Type Assertions in Well-Typed Functions
3. Understand Evolving any

퀴즈 정답

정답은 3번!

[jlee0505]

아이템 42

타입을 알 수 없는 값의 경우 any 타입보다 unknown 타입을 사용하는 것이 더 안전한 이유를 설명해주세요.

퀴즈 정답

정답: any 타입처럼 unknown 타입에는 어떤 타입의 값도 할당할 수 있다. 이는 둘의 공통점이다. 다른 점은, any 타입의 값은 어느 타입의 변수에도 할당될 수 있으나, unknown 타입의 값은 any와 unknown 타입을 제외한 타입의 변수에는 할당이 불가능하다. unknown 은 any 타입보다 좀 더 보수적이라고 볼 수 있다. 나중에 사용자로부터 입력을 받거나 잘 알려지지 않은 외부 API를 사용하는 등 실제로 어떤 값이 올 지 모를 때, 어떤 값이든 할당할 수 있지만 정작 이후에 그 값을 사용할 때는 타입 체킹을 해서 안전하게 사용하게 하기 위해 쓸 수 있다.

[MINGDY98]

아이템 39

다음중 맞는 설명을 모두 고르시오

1. any는 모든 숫자, 문자열, 배열, 객체, 정규식, 함수, 클래스, DOM 엘리먼트, null, undefined까지 포함하는 타입이다.
2. any는 모든 숫자, 문자열, 배열, 객체, 함수, 클래스, DOM 엘리먼트까지 포함하는 타입이다.
3. any를 작성하기 보다는 더 구체적인 타입으로 서술해 타입 안정성을 높이는 것이 좋다.

퀴즈 정답

정답은 1,3번

[dahye1013]

아이템 39

매개 변수가 객체이지만 값을 알 수 없을 때 표현하는 방식은 어떤 것이 있을까요?

퀴즈 정답

{[key: string] : any}

Object 타입은 객체 열거 할 수 있지만 속성에 접근할 수 없기때문에 다음과 같은 형식으로 표현하는 것이 좋습니다.

[dahye1013]

아이템 38

두가지 해결 방식 중 f2� 방식이 더욱 권장되는 이유는 무엇인가요?

function f1() {
 const x: any = expressionReturningFoo(); // Don't do this
 processBar(x);
}
function f2() {
 const x = expressionReturningFoo();
 processBar(x as any); // Prefer this
}

퀴즈 정답

아래 방식 x as any는 매개변수에서만 사용된 표현식이므로 다른 코드에는 영향을 주지 않습니다.
any로 추론된 것이 반환되면 점염병처럼 퍼지기 때문에 내부에서만 영향을 받는 아래 코드가 더 선호됩니다.

[dahye1013]

아이템 42

모르는 타입에 any 보다 unknown이 권장되는 이유는 무엇인가요?

퀴즈 정답

any의 특징

• 어떠한 타입이든 any에 할당 가능합니다.
• any는 어떠한 타입으로도 할당 가능합니다.

이 두 가지 특성을 상충됩니다. 한 집합은 다른 집합의 부분 집합이며 동시에 상위 집합이 될 수 없습니다. 문제를 일으키는 원인이 되어 타입 체커가 무용지물로 만듭니다.

unknown은 타입인 채로 값을 사용하면 오류가 발생합니다. 적정한 타입으로 변환하도록 강제 할 수 있습니다. 타입을 단언하는 방식으로 사용해야하므로 오류 정보를 정확히 파악하며, 타입체커 기능을 활용할 수 있습니다.

[MINGDY98]

아이템 41

any 타입의 진화는 어떤 상황에 발생하나요?

퀴즈 정답

noImplicityAny가 설정된 상태에서 변수의 타입이 암시적 any 타입인 경우에 어떤 값을 할당할 때 발생

[MINGDY98]

아이템 42

빈 칸에 해당하는 단어를 쓰시오

______은 any 대신 사용할 수 있는 안전한 타입입니다. 어떠한 값이 있지만 그 타입을 알지 못하는 경우라면 ______을 사용하면 됩니다.

퀴즈 정답

정답은 unknown

[yeomgahui]

아이템 44

1. noImplicityAny를 설정해도, any타입이 코드내에 존재할 수 있습니다. 그 경우는 어떤 것인지 설명해주세요.

퀴즈 정답

명시적 any와 서드파티 타입 선언으로 인해 noImplicityAny 설정을 하여도 여전히 any타입은 코드 내에 존재할 수 있습니다.

[yeomgahui]

아이템 42

{}, object, unknown의 차이점에 대해서 설명하세요.

퀴즈 정답

{}타입은 null과 undefined를 제외한 모든 값을 포함합니다. object타입은 모든 비 기본형 타입으로 이루어지고 여기에는, true또는 12 혹은 "foo"가 포함되지 않지만 객체와 배열은 포함됩니다.

[yeomgahui]

아이템 N

다음중 옳지 않은 설명을 고르세요.

1. any 타입은 가능한 한 좁은 범위에만 사용한다.
2. any 타입을 사용할 경우 구체적으로 변형해서 사용하도록 해야한다.
3. 모르는 타입 값에는 any대신 unknown사용한다.
4. noImplicityAny 를 설정하더라도, 계속해서 타입이 잘 선언되었는지 확인해야한다.
5. 강제로 타입 오류를 제거 하려면 @ts-ignore 보다는 any타입을 선언한다.

퀴즈 정답

정답 5번 강제로 타입 오류를 제거하려면 any대신 @ts-ignore를 사용하는 것이 좋다.

[parksil0]

아이템 42

타입을 알 수 없는 경우 any와 unknown 중 어떤 타입을 사용하는 게 더 안전한가?

퀴즈 정답

정답은 unknown! any타입은 타입 체커가 제 역할을 하지 못하기 때문이다. 그에 반해 unknown 타입은 any의 상위호환 타입이기도 하며, unknown 타입인 채로 사용할 수 없기 때문이다.

[parksil0]

아이템 41

any타입을 진화시키는 방식보다 명시적 타입 구분을 사용하는 것이 더 안전한 타입을 유지하는 방법인가?

퀴즈 정답

명시적 타입 구문을 사용하는 것이 더 안전한 타입을 유지하는 방법이다. 코드를 작성하는 개발자의 실수로 진화된 타입이 달라질 수 있기 때문이다.

[parksil0]

아이템 38

any 타입의 범위를 좁히기 위해서는 코드를 어떻게 변경해야하는가?

const config: Config = {
  a: 1,
  b: 2,
  c: {
    key: value // 해당 부분만 any로 설정하고싶음
  }
} as any;

퀴즈 정답

c 안의 key의 value를 any로 타입 단언을 한다.