[2023.8.29] 아이템 16~26장 퀴즈 제출

[suehdn]

데브코스 4기 프롱이들 이펙티브 타입스크립트 완독하기 🤩

아래 템플릿을 복사해서 퀴즈를 만들어주세요. 객관식, 주관식, 단답형 모두 상관없습니다!

Q. 퀴즈 내용
1.  1번
2.  2번
3.  3번

<details>
<summary>퀴즈 정답</summary>
<div markdown="1">    
정답 설명
</div>
</details>

[GBAJS754]

Q. GameUser(user)에서 오류가 발생하지 않도록 코드를 적절하게 변경해주세요.

type UserName = "Kim" | "Lee" | "Jea";
interface UserInfo {
  userName: UserName;
  age: number;
}

function GameUser(userInfo: UserInfo) {
  /* ... */
}

const user = {
  userName: "Kim",
  age: 30,
};

GameUser(user); // 오류

퀴즈 정답

정답은 타입선언 const user : UserInfo를 추가하거나 상수 단언(as const)을 사용하는 것입니다.

[suehdn]

Q. 아래의 코드를 보고 변수에 추론 되는 타입을 작성해주세요.

1. const a:{1:1|2} = {
   1 : 2
   }; 

2. const study1 = {
   language : 'TypeScript',
   total : 6 
   };

3. const study2 = {
   language : 'TypeScript' as const,
   total : 6 as const
   };

4. const study3 = {
   language : 'TypeScript',
   total : 6 
   } as const;

   퀴즈 정답

5. 타입 : { 1:1|2; }
   

6. 타입 : { language: string; total: number;}
   

7. 타입 : {language: "TypeScript";total: 6;}
   

8. 타입 : {readonly language: "TypeScript";readonly total: 6;}
   

[leeminhee119]

Q. frong은 person의 모든 속성을 갖습니다. 아래 코드에서 isProgrammer가 true인 경우 {job: 'programmer'} 속성이 추가되는 새로운 객체 frong을 완성해주세요.

declare let isProgrammer: boolean;
const person = {name: 'Minhee', age: 13};
const frong = ???

참고: frong의 타입은 다음과 같이 추론됩니다.

const frong: {
   name: string;
   age: number;
   job?: string;
}

퀴즈 정답

```typescript const frong = { ...person, ...(isProgrammer ? {job: 'programmer'} : {}) } ```

[jonghyunlee95]

Q. 아래 코드의 의도는 빈 객체인 devcourse객체에 track의 first와 second를 추가 하려는 코드입니다. 아래 코드의 console.log(devcourse)는 에러가 발생하지 않고 정상적으로 객체가 합쳐져 정상작동합니다. 하지만 타입스크립트의 Property 'first', 'second' does not exist on type '{}'. 에러가 발생합니다. 에러가 발생하지 않고 객체를 합칠 수 있는 해결방법을 작성해주세요.

const track = {
  first: 'frong',
  second: 'backdung'
}
const devcourse = {};

devcourse.first = track.first; // Property 'first' does not exist on type '{}'.
devcourse.second = track.second; // Property 'second' does not exist on type '{}'.

console.log(devcourse); // { "first": "frong", "second": "backdung" } 

퀴즈 정답

- 속성을 제각각 추가하지 않고 한꺼번에 객체 전개를 사용하여 선언해주어야 합니다. ```ts const track = { first: 'frong', second: 'backdung' } const devcourse = {...track}; console.log(devcourse); // { "first": "frong", "second": "backdung" } ```

[eeseung]

Q. readonly 접근 제어자에 대한 설명으로 옳은 문장을 모두 고르세요.

1. readonly 배열의 length는 읽을 수 있지만 바꿀 수 없다.
2. readonly 배열을 변경 가능한 배열에 할당할 수 있다.
3. 매개변수를 readonly로 선언하면 호출하는 쪽에서 함수가 매개변수를 변경하지 않는다는 보장을 받는다.
4. 인덱스 시그니처에 readonly를 쓸 수 없다.

퀴즈 정답

1, 3
2) 변경 가능한 배열을 readonly 배열에 할당할 수 있지만, 반대로 readonly 배열을 변경 가능한 배열에 할당할 수는 없다.
4) 인덱스 시그니처에 reaonly를 쓸 수 있으며 읽기는 허용하되 쓰기를 방지하는 효과가 있다.

[juyeon-park]

Q. 다음 코드가 에러가 나는 이유는 무엇일까요? 그 이유와 오류를 고칠 수 있는 방법을 작성해주세요

type Restaurant = '대낚식당' | '육품' | '딘타이펑';

interface HotPlace {
   restaurant: Restaurant;
   location: string;
}

function search( restaurant: HotPlace ) { /* ... */ }

search( { restaurant: '육품', location: 'Gangnam' } );

const food = {
   restaurant: '대낚식당',
   location: 'Gangnam',
};
search( food ); //오류 발생

퀴즈 정답

문맥 상 ts 객체의 restaurant의 타입이 string으로 추론되어 `HotPlace` 형식의 매개변수에 할당이 불가능해 오류가 발생합니다.

해결방법 2가지 ```typescript // 1. 타입 선언 추가 const food: HotPlace = { restaurant: '대낚식당', location: 'Gangnam', }; // 2. 상수 단언 const food = { restaurant: '대낚식당', location: 'Gangnam', } as const; ```

[suehdn]

다은님

const user: UserInfo  = {
  userName: "Kim",
  age: 30,
};

민희님

{...person,...(isProgrammer?{job: 'programmer'}:{})}

종현님

const devcourse = {...track}

승희님

1,3

주연님

restaurant에 string이 들어갈 수 없기 때문에

const food = {
   restaurant: '대낚식당',
   location: 'Gangnam',
} as const;

[juyeon-park]

다은님 퀴즈

const user: UserInfo = {
  userName: "Kim",
  age: 30,
};

혜수님 퀴즈

1. { 1: 1|2}
2. { language: string, language: number}
3. { language, total}
4. { readonly language, readonly total }

민희님 퀴즈

{...person, ...(isProgrammer ? {job: 'programmer'} : null)

종현님 퀴즈

const devcourse = {...track}

승희님 퀴즈

1

[leeminhee119]

다은님 문제

const user: UserInfo = { ... }

혜수님 문제

1. {1: 1 | 2}
2. {language: string; total: number;}
3. {language: 'TypeScript'; total: 6}
4. {language: 'TypeScript'; total: 6}

종현님 문제 const devcourse = { ...track }

승희님 문제 1, 2, 3

주연님 문제

const food: HotPlace = { ... }

또는

const food = {
   restaurant: '대낚식당' as const,
   location: 'Gangnam'
}

[eeseung]

다은님 퀴즈 user as UserInfo

혜수님 퀴즈

1. {1:1|2}
2. {language: string, total: number}
3. {language: 'TypeScript', total: 6}
4. {readonly language: 'TypeScript', readonly total: 6}

민희님 퀴즈

const frong = {
  …person,
  …(isProgrammer ? {job: 'programmer'} : {})
}

종현님 퀴즈 객체 전개를 통해 한번에 객체로 만든다.

const devcourse = {...track};

주연님 퀴즈 restaurant가 string으로 추론되어 food가 HotPlace로 할당되지 못하기 때문. 타입 선언을 추가한다.

[jonghyunlee95]

다은님 문제

const user: UserInfo = {
  userName: "Kim",
  age: 30,
};

혜수님 문제

1. {1:1|2;}
2. {language: string; total: number;}
3. {language: 'TypeScript'; total: 6;}
4. {readonly language: "TypeScript"; readonly total: 6;}

민희님 문제

const frong = { 
  ...person, 
  ...(isProgrammer ? { job: 'programmer' } : {}) 
}

승희님 문제

1, 3

주연님 문제

const food: HotPlace = {
   restaurant: '대낚식당',
   location: 'Gangnam',
};

[GBAJS754]

혜수님

1. 1 : 2

2. language : string,
   total : number

3. language :"TypeScript",
   total : 6

4. language :"TypeScript",
   total : 6

   민희님 ????어케해요..? isProgrammer && person..?ㅋㅋㅋㅎㅅㅎ 종현님

   type Check = typeof track
   const devcourse = {} as Check

   승희님 1,2번 주연님 as const