deep-dive-everything / typescript-with-react

우아한 타입스크립트 with 리액트 스터디
0 stars 0 forks source link

speak 함수에서 타입 좁히기를 활용하여 각 동물에 맞는 소리를 반환하는 로직을 작성하세요. #16

Closed samseburn closed 1 month ago

samseburn commented 1 month ago

📚 139p - 145p 📌

  1. Animal 타입에서 식별할 수 있는 유니온이 무엇인지 설명해주세요.
  2. speak 함수에서 타입 좁히기를 활용하여 각 동물에 맞는 소리를 반환하는 로직을 작성하세요.
    
    type Animal = 
    | { type: 'dog'; bark: () => string }
    | { type: 'cat'; meow: () => string }
    | { type: 'bird'; chirp: () => string };

function speak(animal: Animal): string { // 여기에 타입 좁히기를 활용하여 각 동물에 맞는 소리를 반환하는 코드를 작성하세요. }


<!-- 💡Assignees(본인), Labels, Milestone 지정해주세요! -->
kwonhygge commented 1 month ago
  1. 식별할 수 있는 유니온이랑 타입간의 구조 호환을 막기 위해 구분할 수 있는 판별자를 달아주어 포함관계를 제거하는 것입니다. Animal 타입에서는 type 속성이 판별자가 될 수 있습니다.
  2. function speak(animal: Animal): string {
    switch (animal.type) {
    case 'dog':
      return animal.bark();
    case 'cat':
      return animal.meow();
    case 'bird':
      return animal.chirp();
    default:
      return '';
    }
    }
frogk commented 1 month ago
  1. 식별할 수 있는 유니온은 타입 간의 구조 호환을 막기 위해 타입마다 구분할 수 있는 판별자를 달아 포함 관계를 제거하는 것입니다. 이 경우 type속성이 식별할 수 있는 유니온입니다.
  2. function speak(animal: Animal): string {
    if ('bark' in animal) {
    return animal.bark();
    } else if ('meow' in animal) {
    return animal.meow();
    } else if ('chirp' in animal) {
    return animal.chirp();
    }
    return 'Unknown animal sound';
    }
hotdog1004 commented 1 month ago
  1. 식별할 수 잇는 유니온이란 타입 간의 구조호환을 막기 위해 타입마다 구분할 수 있는 판별자를 달아주어 포함관계를 제거하는 것을 뜻합니다. Animal타입의 경우 type 속성을 판별자로 사용할 수 있습니다.
  2. function speak(animal: Animal): string {
    switch (animal.type) {
      case 'dog':
        return animal.bark();
      case 'cat':
        return animal.meow();
      case 'bird':
        return animal.chirp();
      default:
        return '';
    }
    }
limejin commented 1 month ago
  1. type 속성으로 판별할 수 있습니다. 오직 하나의 정확한 값을 가지기 때문입니다.
    
    type Animal = 
    | { type: 'dog'; bark: () => string }
    | { type: 'cat'; meow: () => string }
    | { type: 'bird'; chirp: () => string };

function speak(animal: Animal): string { //2. if(animal.type === 'dog') return animal.bark(); if(animal.type === 'cat') return animal.meow(); if(animal.type === 'bird') return animal.chirp(); }