[2023.8.25] 아이템 6~15장 퀴즈 제출

[suehdn]

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

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

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

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

[suehdn]

Q. 다음 코드의 타입을 맞춰주세요.

interface Person{
  name: string;
  death: Date;
}
interface Lifespan{
  birth: Date;
  death?:Date;
}
type k1 = keyof(Person|Lifespan); -(1)
type k2 = keyof(Person&Lifespan); -(2)

퀴즈 정답

(1) type k1 = "death"
(2) type k2 = "name" | "death" | "birth"

[jonghyunlee95]

Q. 다음 코드에서 객체인 devcorse에서 에러가 발생합니다. 에러가 발생하지 않도록 코드를 적절하게 변경해보세요.

interface DevcorseWeb {
  frong: string;
  backdung: string;
}

interface Devcorse extends DevcorseWeb {
  autonomousDriving: string;
}

const devcorse: Devcorse = {   <- 문제
  frong: 'good',
  backdung: 'good'
};

퀴즈 정답

```ts const devcorse: Devcorse = { frong: 'good', backdung: 'good', autonomousDriving: 'good' }; ``` - interface DevcorseWeb를 상속받은 interface Devcorse에서 autonomousDriving이 추가되어 devcorse객체에는 키값 autonomousDriving이 존재해야 합니다.

[ghost]

Q. 다음 코드에서 화살표함수의 타입을 정의하고 타입을 부여해주세요 number 인자를 받고 number를 반환합니다.

type DiceRollFn = ???
const rollDice = sides => {  /*....*/  } // sides는 number 타입이고 rollDice는 number를 반환해야 합니다.

퀴즈 정답

```ts type DiceRollFn = (sides: number) => number const rollDice: DiceRollFn = sides => { /*...*/ } ``` 타입 스크립트는 위와 같이 화살표 함수로 함수를 정의하면 함수의 타입을 간단하게 정의할 수 있습니다. 함수 구현부와 타입 구문이 분리되어 로직이 좀 더 분명해진다고 합니다.

[juyeon-park]

Q. 다음 코드로 타입스크립트에서 구조 분해 할당을 하면 오류가 발생합니다. 구조분해 할당이 제대로 이루어지도록 코드를 변경해주세요

interface Person {
    first: string;
    last: string;
}

// 이 함수의 인자 부분만 변경하면 됩니다!
function devcourse({person: Person, course: string, manager: string}){
    console.log(person, course, manager);
}

devcourse({
    person: {first: '롱이', last: '프'},
    course: 'Frontend',
    manager: 'Sophia'
})

퀴즈 정답

값의 관점에서 Person과 string이 식별자로 해석되기 때문에 string이라는 2개의 변수가 생성돼 오류가 발생한다. 그래서 타입과 값을 구분하여 아래 코드와 같이 수정하면 오류가 해결된다. ```typescript function devcourse({person, course, manager}:{person: Person, course: string, manager: string}){ console.error(person, course, manager); } ```

[GBAJS754]

Q. 다음 코드가 정상적으로 동작할지 맞춰주세요 (오류 or 정상)

interface Room {
  title: string;
  numDoors: number;
  ceilingHeightFt?: number;
}

const Option1 = {
  title: "suite-room",
  numDoors: 2,
  elephant: "present",
};

const Option2 = {
  title: "single-room",
  numdoors: 1,
};

const A: Room = Option1; -(1)
const B: Room = Option2; -(2)
const C: Room = document; -(3)

퀴즈 정답

1. A는 Room타입의 부분집합을 포함하기 때문에 정상적으로 동작합니다.
2. B는 numdoors이 아닌 numDoors이어야 하기때문에 오류가 발생합니다.
3. C는 numDoors 형식이 Room타입에 필수이기때문에 오류가 발생합니다.

[eeseung]

Q. 프롱이는 Person 인터페이스를 사용해 화살표 함수의 반환 타입을 선언하고자 아래 코드를 작성했으나 오류가 발생했습니다. 오류가 발생한 이유를 적고 코드를 고쳐주세요.

interface Person {name: string};

const students = ['frong', 'backdung', 'musseuk'].map(
  (name: Person) => ({name})
);

퀴즈 정답

`(name: Person)` 은 name의 타입이 Person임을 명시하고 반환 타입은 없기 때문에 오류가 발생한다. 소괄호의 위치를 옮겨 반환 타입이 Person임을 명시해야 한다. ```typescript const students = ['frong', 'backdung', 'musseuk'].map( (name): Person => ({name}) ); ```

[leeminhee119]

Q. Frong 인터페이스는 Student의 name, skills, team 타입만 표현합니다. 아래 코드에서 타입에 대한 중복을 제거하여 Frong 타입을 정의하는 코드를 작성해주세요. (힌트: 방법 1 - Student를 인덱싱하고, 매핑된 타입을 사용한다. 방법 2 - 표준 라이브러리의 Pick 제너릭 타입을 사용한다.)

interface Student {
  name: string;
  stack: "front" | "back";
  skills: string[];
  team: string;
}

interface Frong {
  name: string;
  skills: string[];
  team: string;
}

퀴즈 정답

```typescript type Frong = { [k in 'name' | 'skills' | 'team']: Student[k] } ``` 또는 ```typescript type Frong = Pick ``` 참고: Pick 제너릭 타입은 아래와 같은 형식으로 사용합니다. ```typescript type Pick = { [k in K]: T[k] } ```

[juyeon-park]

혜수님 퀴즈

1. "death"
2. "name" | "death" | "birth"

종현님 퀴즈

const devcorse: Devorse = {
  frong: 'good',
  backdung: 'good',
  autonomousDriving: 'hi'
};

건우님 퀴즈

type DiceRollFn = (sides:number) => number
const rollDice: DiceRollFn = sides => {  /*....*/  }

다은님 퀴즈

1. 정상
2. 정상
3. ?

승희님 퀴즈

(name)의 반환타입이 없다!

(name): Person => ({name})

민희님 퀴즈

잘 모르겠어요..key라고 써도 되겠죠..?

type Frong = {
  [key in "name" | "skills" | "team"] : Student[key]
}

[ghost]

혜수님

(1): 'death' | never (2): 'name' | 'death' | 'birth'

---

종현님

const devcorse: DevcorseWeb = {
  frong: 'good',
  backdung: 'good'
}

---

주연님

function devcourse({person, course, manager}: {person: Person course: string manager: string}) {
  console.log(person, course, manager)
}

---

다은님

(1): 정상 (2): 오류 (3): 오류

---

승희님

(name: person)은 name의 타입을 Person으로 지정? 하기 때문이라고 생각합니다

const students = ['frong', 'backdung', 'musseuk'].map(
  (name):Person => ({name})

---

민희님

interface Student {
  name: string;
  stack: 'front' | 'back'
  skills: string[];
  team: string;
}

interface Frong {
  name: string;
  skills: string[];
  team: string;
}

모르겠습니다..

[jonghyunlee95]

혜수님 문제

1. k1 - death
2. k2 - name | birth | death

건우님 문제

type DiceRollFn = (sides: number) => number

주연님 문제

function devcourse({person, course, manager}:{person: Person, course: string, manager: string}) {
...
}

다은님 문제

1. 정상
2. 오류
3. 오류

승희님 문제

• name의 소괄호위치??때문에 반환타입이 없어서

  const students = ['frong', 'backdung', 'musseuk'].map(
  (name): Person => ({name})
  );

민희님 문제

type Frong = {
  [k in 'name' | 'skills' | 'team']: Student[k]
}

이게 제 최선입니다...

[eeseung]

혜수님 퀴즈 (1) death (2) name | death | birth

종현님 퀴즈

const devcorse: Devcorse = {
  frong: 'good',
  backdung: 'good',
  autonomousDriving: 'good',
};

건우님 퀴즈 (sides: number) => number

주연님 퀴즈

function devcourse({person, course, manager}: {person: Person, course: string, manager: string}){
    console.log(person, course, manager);
}

다은님 퀴즈 (1) 정상 (2) 정상 오류 numdoors가 아닌 numDoors (3) 오류

민희님 퀴즈

type Frong = {
  [key in 'name' | 'skills' | 'team']: Student[key]
}

[suehdn]

종현님

const devcorse: Devcorse = {   <- 문제
  frong: 'good',
  backdung: 'good',
 autonomousDriving:''
};

건우님

(sides:number) => number

주연님

function devcourse({person,course,manager}:{person: Person, course: string, manager: string})

다은님

(1) 정상 (2) 오류 (3) 오류

승희님

name:Person => ({name})

민희님

type Frong = Pick<Student,'name' | 'skills' | 'team'>

[GBAJS754]

퀴즈 정답

1번
1) death (2) name| birth | death
2번
const devcorse: Devcorse = { <- 문제 frong: 'good', backdung: 'good', autonomousDriving : 'good', };
3번
(sides : number ) => number
4번
{person, course, manager}:{person: Person, course: string, manager: string}
5번
6번

[leeminhee119]

혜수님 문제 (1) death (2) name | death | birth

종현님 문제

const devcourse: Devcourse = {
  frong: 'good',
  backdung: 'good',
  autonomousDriving: 'good'
}

건우님 문제

type DiceRollFn = (sides: number) => number
const rollDice: DiceRollFn = sidex => { /* ... */ }

주연님 문제

interface Devcourse {
  person: Person;
  course: string;
  manager: string;
}

function devcourse({person, course, manager}: Devcourse) {
  console.log(person, course, manager)
}

다은님 문제 (1) 오류 -> 정상 (구조적 타이핑 관점에서 오류가 나지 않는다. 잉여 속성 체크를 생각하고 오류가 난다고 생각했는데, 잉여 속성 체크는 객체 '리터럴'에만 적용됨!) (2) 정상 -> 오류 (numDoors가 없음!) (3) 정상 -> (numDoors가 없음!)

승희님 문제

const students: Student = ['frong', 'backdung', musseuk'].map((name: string) => ({name}));

리턴타입이 Student의 배열이니까 Student[]로 수정해야 합니다.

const students: Student[] = ['frong', 'backdung', musseuk'].map((name: string) => ({name}));