오버로드된 함수라고도 함

아이디어는 다른 인수 또는 인수 유형을 허용하는 함수가 있다는 것입니다. 그리고 전달하는 인수에 따라 다른 반환 유형을 가질 수 있습니다.

예

이것은 모든 것과 마찬가지로 여러 가지 방법으로 사용될 수 있지만 간단하게 유지하겠습니다(예: 단순함). 그리고 typescript가 이해할 수 없는 성가신 것 중 하나를 제거하십시오. 이 기능을 보세요.

function greet(user:IUser | undefined):string | undefined {
  if(!user) return undefined;
  return `Hello ${user.firstName} ${user.lastName}!`
}

우리는 사용자가 정의될 ​​때 문자열을 얻을 것이라는 것을 확실히 알고 있습니다. Typescript에 이것을 말할 수 있습니까? 짧은 대답은 예입니다!

방법은 다음과 같습니다.

말했듯이, 우리는 우리의 함수를 오버로드할 것이고 당신은 more info here in the docs 을 찾을 수 있을 것입니다.

적어도 제 생각에는 구문이 약간 이상하게 보일 수 있습니다. 그러나 우리는 Typescript에게 우리가 함수를 호출할 수 있는 모든 다른 방법과 그들과 관련된 반환 유형을 말할 수 있습니다. 이와 같이:

function greet(user: IUser):string
function greet(user: IUser | undefined):string | undefined

이것은 실제 구현 전에 추가한 함수의 "과부하"입니다. 이제 기능은 다음과 같습니다.

function greet(user: IUser):string
function greet(user: IUser | undefined):string | undefined
function greet(user: IUser | undefined):string | undefined {
  if(!user) return undefined;
  return `Hello ${user.firstName} ${user.lastName}!`
}

또는 any 를 사용하여 실제 함수를 입력할 수도 있습니다.

function greet(user: IUser):string
function greet(user: IUser | undefined):string | undefined
function greet(user: any):any {
  if(!user) return undefined;
  return `Hello ${user.firstName} ${user.lastName}!`
}

이제 Typescript는 사용자가 있을 때 문자열을 얻고 사용자가 있을 수 있음을 알고 있습니다. 글쎄, 우리는 문자열을 얻을 수 있습니다.

그리고 any 메소드 구현 방식으로 간다면 여전히 any 인수로 함수를 호출할 수 없습니다. IUser 또는 undefined 이어야 합니다.

You can check the example here

요약

예, 이 예제는 약간 간단합니다. 그러나 아이디어는 함수를 호출할 때 언제 undefined를 확인해야 하고 언제 건너뛸 수 있는지 알 수 있다는 것입니다.

동료나 미래의 당신이 접근하기 쉬운 코드를 만들 것입니다. "실생활"의 기능은 아마도 더 복잡할 것이며 다른 옵션에 대한 반환 유형을 제공하면 모든 사람이 더 쉽게 사용할 수 있습니다. 언제 유형 x를 얻고 언제 유형 y를 얻는지 이해하기 위해 함수 세부 정보를 읽을 필요가 없습니다.

표지 사진 Juan GomezUnspash