[LAB-12] 'No overload matches this call' 에러가 왜 해결되었는지에 대해

문제 상황(현재 해결된 상태입니다)

요약) 폰트 스타일들을 객체로 내보내는 유틸함수를 만들어 styled-components안에서 사용하고있었는데, TS 마이그레이션 과정에서 'No overload matches this call' 에러가 발생했습니다.

상황1) 아래이미지 참고: 폰트 스타일 tokens의 interface를 지정해주었습니다. (파일명 tokens.ts)

상황2) 아래이미지 참고: 19번 라인에 함수 리턴값의 type을 object로 하였습니다. (파일명 utils.ts)

상황3) 아래이미지 참고: 47번 라인과 같이 함수 실행결과를 임의로 콘솔에 찍어봤을 때, 콘솔에는 object로 잘 나오고 있습니다. 스크린샷 2023-04-12 오전 8 46 19

상황4) 아래이미지 참고: 위 사항들을 기반으로 함수를 사용했을 때, 'overload' 에러가 발생합니다.

🐮 뒷걸음질치다 문제 해결... 근데 왜 되는걸까요

질문 작성 중 더 찾아보다가 해당 글을 참고해서 문제를 해결했습니다.

함수 리턴값의 type설정을 지워보니, 에러가 해결되었습니다.

interface에서 tokens를 object 형태로 지정해줬기 때문에, 함수 리턴값을 타입지정 하는것이 불필요했던 걸까요? 아니면 참고한 링크에서와 같이 매개변수 갯수 문제였던걸까요? 😮‍💨 스크린샷 2023-04-12 오전 10 11 48

문제 원인

getFontStyle 함수에 지정된 return 타입이 잘못되었기 때문에 TypeScript는 오류 메시지를 출력한 것입니다. ITokens 타입인 tokens 객체의 fonts 속성의 하위 타입과 같은 타입을 명시해야 TypeScript는 오류라고 인식하지 않습니다.

문제 해결

@sykang013 님께서 "함수 리턴 값의 type 설정을 지워보니, 에러가 해결되었습니다."고 말씀주셨는데 그건 TypeScript가 함수의 반환 값을 추론(inference)할 수 있기 때문입니다.

TypeScript는 ITokens 타입을 통해 함수가 반환하는 값의 타입을 아래와 같이 추론 했고 그것이 올바른 타입입니다.

{
  [key: string]: string;
}

만약 함수의 반환 값 타입을 명시하고자 한다면 아래와 같이 작성 해보세요. 그러면 TypeScript는 오류를 출력하지 않고, 함수의 반환 값을 명시적으로 작성할 수 있을 것입니다. 😊

tokens.ts

export interface IFontTokens {
  [key: string]: string;
}

interface ITokens {
  fonts: {
    [key: string]: IFontTokens;
  };
}

utils.ts

import { tokens, IFontTokens } from './tokens';

export const getFontStyle = (fontStyleAndVariant: string): IFontTokens => {
  const fontStyles = fontStyleAndVariant;
  return tokens.fonts[fontStyles];
};

yamoo9 / likelion-FEQA