타입 스크립트 타입 선언 연습

그동안 배운 타입스트립트의 타입에대한 개념을 아래 연습 문제들을 통해서 점검을 해보는 시간을 가져보았습니다. 강의를 듣기만 해서는 정말 개념에 대한 내용을 듣는것만 하는거이고 실제로는 개념을 체화하여 코드를 작성을 해야하기 때문에 연습문제를 풀어보기로 하였습니다. 

아래 테스트로 작성한 함수의 타입을 지정해보도록 하겠습니다. 

function fetchContacts() {

  const contacts = [
    {
      name: 'Tony',
      address: 'Malibu',
      phones: {
        home: {
          num: 11122223333,
        },
        office: {
          num: 44455556666,
        },
      },
    },
    {
      name: 'Banner',
      address: 'New York',
      phones: {
        home: {
          num: 77788889999,
        },
      },
    },
    {
      name: '마동석',
      address: '서울시 강남구',
      phones: {
        home: {
          num: 213423452,
        },
        studio: {
          num: 314882045,
        },
      },
    },
  ];
  return new Promise(resolve => {
    setTimeout(() => resolve(contacts), 2000);
  });
}

 

fetchContacts() 함수는 비동기 호출인 Promise를 반환하는 함수입니다. 그리고 contract 라는 변수는 배열 타입으로 선언이 되어있습니다. 

{
      name: 'Tony',
      address: 'Malibu',
      phones: {
        home: {
           num: 11122223333,
        },
        office: {
           num: 44455556666,
        },
     },
 },

 

일단 객체를 확인을 해보면 위에 작성된 객체로 선언이 되어있습니다. 여기서 생각을 해야하는 부분은 단순히 배열에 객치타입을 선언하여 object[] 타입을 선언하는것이 아니라 해당 객체의 키값을 인터페이스로 선언하여  타입을 지정하는것이 가독성과 타입 추론에 대한 내용을 높혀줍니다. 그리고 좀더 확인을 해보면 phone이라는 키는 가변적으로 늘어나고 있는것을 확인할수가 있습니다. 따라서 인터페이스로 타입을 지정한다면 아래와 같이 지정을 할수가 있습니다.  

interface PhoneNumberDictionary {
  [phone: string]: {
    num: number;
  };
}

interface Contact {
  name: string;
  address: string;
  phones: PhoneNumberDictionary;
}

 

Contact 라는 인터페이스에 phone에는 [phone:string] 타입을 주어 가변적으로 늘어나게 설정을 하였습니다. 그리고 함수에 타입을 지정한다면 아래와 같이 선언을 할수 있습니다. 

function fetchContacts(): Promise<Contact[]> {
  // TODO: 아래 변수의 타입을 지정해보세요.
  const contacts: Contact[] = [
    {
      name: 'Tony',
      address: 'Malibu',
      phones: {
        home: {
          num: 11122223333,
        },
        office: {
          num: 44455556666,
        },
      },
    },
    <..생략>
  ];
  return new Promise(resolve => {
    setTimeout(() => resolve(contacts), 2000);
  });
}

위에서 Contact 인터페이스에 배열이 선언이 되었고 함수의 반환값에는 Promise에 제너릭으로 Contact[] 이 지정이 되었습니다. 

그리고 아래 AddressBook 클래스의 아래 타입 지정은 강의에서 내주신 연습문제를 풀어 작성한 코드입니다. 

class AddressBook {
  contacts: Contact[] = [];

  constructor() {
    this.fetchData();
  }

  fetchData() {
    fetchContacts().then(response => {
      this.contacts = response;
    });
  }
  
  findContactByName(name: string): Contact[] {
    return this.contacts.filter(contact => contact.name === name);
  }

  findContactByAddress(address: string): Contact[] {
    return this.contacts.filter(contact => contact.address === address);
  }

  findContactByPhone(phoneNumber: number, phoneType: string): Contact[] {
    return this.contacts.filter(
      contact => contact.phones[phoneType].num === phoneNumber
    );
  }

  addContact(contact: Contact) {
    this.contacts.push(contact);
  }

  displayListByName(): string[] {
    return this.contacts.map(contact => contact.name);
  }

  displayListByAddress(): string[] {
    return this.contacts.map(contact => contact.address);
  }
  /* ------------------------------------------------ */
}