TypeScript에서 함수의 유형 또는 함수 유형 표현식을 설정하는 방법은 무엇입니까?

Originally posted here!

함수에 대한 유형 또는 함수 유형 표현식을 설정하려면 변수 이름 다음에 : 기호(콜론 기호)를 쓸 수 있습니다. 그 후에 여는 괄호와 닫는 괄호 () 을 쓸 수 있습니다. 대괄호 안에는 매개변수 이름 뒤에 :(콜론) 기호와 매개변수 유형을 쓸 수 있습니다. 중괄호 다음에 대입 연산자와 보다 큼 기호( => ), 함수 호출에서 반환하려는 값의 유형을 작성해야 합니다.

함수 유형 표현식의 구문

(parameterName: parameterType) => returnType;

TL; DR

// a variable that accepts a function
// where it needs to have a parameter called name of type string
// and should return a value of type string
let sayGreeting: (name: string) => string;

// make a function which satisfies the
// `sayGreeting` function type expression
// Thus the below assignment of a function
// is allowed ✅.
sayGreeting = (name: string) => {
  return `Hello ${name}`;
};

// call the function
const greeting = sayGreeting("John Doe");

// log the output
console.log(greeting); // Hello John Doe

예를 들어, function type expression이라는 매개변수가 name 유형이고 함수의 반환 값도 string 유형이어야 하는 string(전체 함수에 대한 유형 선언)을 만들어야 한다고 가정해 보겠습니다.

따라서 위의 정의에 따라 function type expression을 작성하면 됩니다.

다음과 같이 보일 수 있습니다.

// A simple function type expression
// where the function first parameter is name of type string
// and the return value should be of string type
(name: string) => string;

이것은 함수가 아니라 단지 구조일 뿐입니다.

위의 function type expression의 목적은 함수의 논리가 아니라 매개 변수 유형과 반환 유형을 적용하는 것입니다.

이제 위의 함수 타입 표현식을 변수의 타입으로 사용해보자.

다음과 같이 할 수 있습니다.

// a variable that accepts a function
// where it needs to have a parameter called name of type string
// and should return a value of type string
let sayGreeting: (name: string) => string;

이제 sayGreeting 변수에 대한 함수 유형 표현식을 정의했으므로 위에서 정의한 함수 유형 표현식의 구조를 받아들이는 함수를 만들어 보겠습니다.

다음과 같이 할 수 있습니다.

// a variable that accepts a function
// where it needs to have a parameter called name of type string
// and should return a value of type string
let sayGreeting: (name: string) => string;

// make a function which satisfies the
// `sayGreeting` function type expression
// Thus the below assignment of a function
// is allowed ✅.
sayGreeting = (name: string) => {
  return `Hello ${name}`;
};

우리는 함수를 만들었고 함수 유형 표현도 만족했습니다.

이제 sayGreeting 함수를 호출하고 John Doe 값을 함수의 인수로 전달하고 출력을 살펴보겠습니다.

다음과 같이 할 수 있습니다.

// a variable that accepts a function
// where it needs to have a parameter called name of type string
// and should return a value of type string
let sayGreeting: (name: string) => string;

// make a function which satisfies the
// `sayGreeting` function type expression
// Thus the below assignment of a function
// is allowed ✅.
sayGreeting = (name: string) => {
  return `Hello ${name}`;
};

// call the function
const greeting = sayGreeting("John Doe");

// log the output
console.log(greeting); // Hello John Doe

예이 🥳!. 함수에 대한 함수 유형 표현식을 성공적으로 만들었습니다.

codesandbox에 있는 위의 코드를 참조하십시오.

그게 다야 😃!

이 정보가 유용하다고 생각되면 자유롭게 공유하세요 😃.