10. 프로젝트에 적용해보기

1. 설정하기

• tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "target": "es5",
    "lib": ["es2015", "dom", "dom.iterable"],
    //밑에 3개 true 및 추가
    "noImplicitAny": true,
    "strict": true,
    "strictFunctionTypes": true,
  },
  "include": ["./src/**/*"]
}

• eslint의 rules 부분 주석처리하기!

 rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: true,
        useTabs: false,
        tabWidth: 2,
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: 'avoid',
      },
    ],
    // '@typescript-eslint/no-explicit-any': 'off',
    // "@typescript-eslint/explicit-function-return-type": 'off',
    'prefer-const': 'off',
  },

2. 프로젝트에 적용해보기

• 적용 전 코드

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

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

// api
// TODO: 아래 함수의 반환 타입을 지정해보세요.
function fetchContacts() {
  // TODO: 아래 변수의 타입을 지정해보세요.
  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);
  });
}

// main
class AddressBook {
  // TODO: 아래 변수의 타입을 지정해보세요.
  contacts = [];

  constructor() {
    this.fetchData();
  }

  fetchData() {
    fetchContacts().then(response => {
      this.contacts = response;
    });
  }

  /* TODO: 아래 함수들의 파라미터 타입과 반환 타입을 지정해보세요 */
  findContactByName(name) {
    return this.contacts.filter(contact => contact.name === name);
  }

  findContactByAddress(address) {
    return this.contacts.filter(contact => contact.address === address);
  }

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

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

  displayListByName() {
    return this.contacts.map(contact => contact.name);
  }

  displayListByAddress() {
    return this.contacts.map(contact => contact.address);
  }
}

new AddressBook();

• 리턴타입을 주지 않을 때 일반 리턴 값은 추론이 가능하기 때문에 실행이 가능합니다.

function fetchItems() {
  let items = ['a', 'b', 'c'];
  return items;
}

function fetchItems(): string[] {
  let items = ['a', 'b', 'c'];
  return items;
}

// 위의 두 함수 둘 다 가능합니다.
let result = fetchItems();
console.log(result);

• Promise를 이용한 API 함수 타입 정의
  • 비동기적인 코드를 실행하게 된다면 리턴타입을 제공해주지 않으면 비동기 코드들에 대해 알 수 없기 때문에(어떤 타입으로 올지 모르기 때문에).. 오류가 발생하게 됩니다.
  • Promise의 resolve 값이 반환 값으로 들어가야 합니다.
  • Promise callback에서 resolve에 대한 타입 정의 : Promise 제네릭 타입을 선언해서 사용하면 resolve 안에 바로 관련 타입이 자동으로 추론되기 떄문에 별도로 타입을 표시하지 않아도 됩니다.

function fetchItems2(): Promise<string[]> {
  let items: string[] = ['a', 'b', 'c'];
  return new Promise(function (resolve) {
    resolve(items);
  });
}

// 에러발생 : 타입이 일치하지 않기 때문입니다.
function fetchItems3(): Promise<number[]> {
  let items: string[] = ['a', 'b', 'c'];
  return new Promise(function (resolve) {
    resolve(items);
  });
}
fetchItems2();

• 타입 스크립트 적용된 프로젝트 소스

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

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

enum PhoneType {
  Home = 'home',
  Office = 'office',
  Studio = 'studio',
}

// api
function fetchContacts(): Promise<Contact[]> {
  const contacts: Contact[] = [
    {
      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);
  });
}

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

  constructor() {
    this.fetchData();
  }

  fetchData(): void {
    // 프로미스를 반환하는 API 함수의 경우에는 이미 함수를 정의할 때 보통 HTTP 응답 타입을 명시하기 때문에 별도로 선언 안해줘도 됩니다.
    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);
  }

  // 이넘 활용해보기 : home. office. studio
    
  // 이넘 사용하기 전 코드
  // findContactByPhone(phoneNumber: number, phoneType: string): Contact[] {
  //   return this.contacts.filter(
  //     contact => contact.phones[phoneType].num === phoneNumber
  //   );
  // }

  // 이런식으로 오타가 날 수 있다. -> 이넘 활용
  //findContactByPhone(1234,'offices');
	
  // 이넘 활용한 코드 ( 상단에 이넘 인터페이스 정의 )
  findContactByPhone(phoneNumber: number, phoneType: PhoneType): Contact[] {
    return this.contacts.filter(
      contact => contact.phones[phoneType].num === phoneNumber
    );
  }
  //이런식으로 이넘을 활용해 강제할 수 있다.
  //findContactByPhone(PhoneType.Home);

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

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

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

new AddressBook();