메서드 파라미터에서 사용되는 함수 콜백의 유형(유니버설타입이 아닌 임의의 함수타입)을 정의하는 방법
현재 유형 정의는 다음과 같습니다.
interface Param {
title: string;
callback: any;
}
다음과 같은 것이 필요합니다.
interface Param {
title: string;
callback: function;
}
두 번째는 안 받아주고 있어요.
글로벌 타입Function
이 목적을 달성합니다.
또한 0 인수를 사용하여 이 콜백을 호출하고 반환값을 무시하는 경우,() => void
는 인수를 사용하지 않는 모든 함수와 일치합니다.
v1.4의 타이프스크립트에는type
타입 에일리어스를 선언하는 키워드(에일리어스)typedef
(C/C++)로 설정합니다.콜백 타입은 다음과 같이 선언할 수 있습니다.
type CallbackFunction = () => void;
인수를 받지 않고 아무것도 반환하지 않는 함수를 선언합니다.모든 유형의 인수를 0개 이상 사용하고 아무것도 반환하지 않는 함수는 다음과 같습니다.
type CallbackFunctionVariadic = (...args: any[]) => void;
그러면 예를 들어 이렇게 말할 수 있습니다.
let callback: CallbackFunctionVariadic = function(...args: any[]) {
// do some stuff
};
임의의 수의 인수를 사용하여 임의의 값(void 포함)을 반환하는 함수를 원하는 경우:
type CallbackFunctionVariadicAnyReturn = (...args: any[]) => any;
다음과 같이 몇 가지 필수 인수와 추가 인수 세트(문자열, 숫자, 추가 arg 세트 등)를 지정할 수 있습니다.
type CallbackFunctionSomeVariadic =
(arg1: string, arg2: number, ...args: any[]) => void;
이것은 EventEmitter 핸들러 등에 도움이 됩니다.
타입 에일리어스로 모든 것을 정리하려고 하면, 흥분해 조합의 문제에 부딪힐 수 있지만, 이 방법으로 함수를 원하는 만큼 강하게 입력할 수 있습니다.
Ryan의 답변에 따라 당신이 찾고 있는 인터페이스는 다음과 같이 정의되어 있다고 생각합니다.
interface Param {
title: string;
callback: () => void;
}
인터페이스에서는 다양한 방법으로 기능 타입을 정의할 수 있습니다.
- 일반적인 방법:
export interface IParam {
title: string;
callback(arg1: number, arg2: number): number;
}
- 속성 구문을 사용하는 경우,
export interface IParam {
title: string;
callback: (arg1: number, arg2: number) => number;
}
- 먼저 함수 유형을 선언하면
type MyFnType = (arg1: number, arg2: number) => number;
export interface IParam {
title: string;
callback: MyFnType;
}
사용은 매우 간단합니다.
function callingFn(paramInfo: IParam):number {
let needToCall = true;
let result = 0;
if(needToCall){
result = paramInfo.callback(1,2);
}
return result;
}
- 함수 유형 리터럴도 선언할 수 있습니다.즉, 함수는 다른 함수를 파라미터로 받아들일 수 있습니다.파라미터화 함수는 콜백이라고도 불립니다.
export interface IParam{
title: string;
callback(lateCallFn?:
(arg1:number,arg2:number)=>number):number;
}
콜백을 받아들이는 함수의 예를 다음에 나타냅니다.
const sqk = (x: number, callback: ((_: number) => number)): number => {
// callback will receive a number and expected to return a number
return callback (x * x);
}
// here our callback will receive a number
sqk(5, function(x) {
console.log(x); // 25
return x; // we must return a number here
});
콜백의 수익률에 관심이 없는 경우(대부분의 사람들은 콜백의 유효 활용 방법을 모른다),void
const sqk = (x: number, callback: ((_: number) => void)): void => {
// callback will receive a number, we don't care what it returns
callback (x * x);
}
// here our callback will receive a number
sqk(5, function(x) {
console.log(x); // 25
// void
});
주의: 이 시그니처는callback
파라미터...
const sqk = (x: number, callback: ((_: number) => number)): number
콜백 파라미터의 이름을 지정해야 하기 때문에 이것은 TypeScript의 결함이라고 생각합니다.이 경우,_
내부에서는 사용할 수 없기 때문에sqk
★★★★★★ 。
하지만 이렇게 하면
// danger!! don't do this
const sqk = (x: number, callback: ((number) => number)): number
유효한 TypeScript이지만 다음과 같이 해석됩니다.
// watch out! typescript will think it means ...
const sqk = (x: number, callback: ((number: any) => number)): number
즉, TypeScript는 파라미터 이름을 다음과 같이 간주합니다.number
은 ""입니다.any
이것은 분명히 우리가 의도한 것이 아닙니다만, 유감스럽게도 TypeScript는 그렇게 동작합니다.
따라서 함수 매개 변수를 입력할 때 매개 변수 이름을 제공하는 것을 잊지 마십시오.바보같이 보일지 모르지만
추상 함수 유형에는 4가지가 있으며, 함수가 인수를 받는지, 받지 않는지, 데이터를 반환할지 여부를 알고 있을 때 별도로 사용할 수 있습니다.
export declare type fEmptyVoid = () => void;
export declare type fEmptyReturn = () => any;
export declare type fArgVoid = (...args: any[]) => void;
export declare type fArgReturn = (...args: any[]) => any;
다음과 같습니다.
public isValid: fEmptyReturn = (): boolean => true;
public setStatus: fArgVoid = (status: boolean): void => this.status = status;
모든 함수 유형으로 한 가지 유형만 사용하려면 다음과 같이 모든 추상 유형을 함께 결합할 수 있습니다.
export declare type fFunction = fEmptyVoid | fEmptyReturn | fArgVoid | fArgReturn;
그 후 다음과 같이 사용합니다.
public isValid: fFunction = (): boolean => true;
public setStatus: fFunction = (status: boolean): void => this.status = status;
위의 예에서는 모든 것이 정확합니다.그러나 아래의 사용 예는 대부분의 코드 에디터의 관점에서 올바르지 않습니다.
// you can call this function with any type of function as argument
public callArgument(callback: fFunction) {
// but you will get editor error if call callback argument like this
callback();
}
편집자에 대한 올바른 문의는 다음과 같습니다.
public callArgument(callback: fFunction) {
// pay attention in this part, for fix editor(s) error
(callback as fFunction)();
}
TypeScript ESLint 플러그인에는 권장되는 규칙 ban-type(오류) 및 no-explicit-any(warn)가 있습니다.
Function
이 거의
이러한 규칙에 따라 최선의 해결책은 다음과 같습니다.
callback: (...args: unknown[]) => unknown
이게 도움이 됐으면 좋겠는데...
interface Param {
title: string;
callback: (error: Error, data: string) => void;
}
또는 기능 중
let myfunction = (title: string, callback: (error: Error, data: string) => void): string => {
callback(new Error(`Error Message Here.`), "This is callback data.");
return title;
}
타이프스크립트:메서드 파라미터에서 사용되는 함수 콜백의 유형을 정의하려면 어떻게 해야 합니까?
콜백을 1) 함수 속성 또는 2) 메서드로 선언할 수 있습니다.
interface ParamFnProp {
callback: (a: Animal) => void; // function property
}
interface ParamMethod {
callback(a: Animal): void; // method
}
보다 강력한("사운드") 타입을--strict
★★★★★★★★★★★★★★★★★」--strictFunctionTypes
모드(함수 속성이 선언된 경우).예를 들어 보겠습니다.
const animalCallback = (a: Animal): void => { } // Animal is the base type for Dog
const dogCallback = (d: Dog): void => { }
// function property variant
const param11: ParamFnProp = { callback: dogCallback } // error: not assignable
const param12: ParamFnProp = { callback: animalCallback } // works
// method variant
const param2: ParamMethod = { callback: dogCallback } // now it works again ...
기술적으로 말하면, 메서드는 이변수이며 함수 속성은 그 논거에 반한다.strictFunctionTypes
메서드는 다음과 같은 빌트인 타입과 조합하여 좀 더 실용적이기 위해 (음향적이지 않더라도) 보다 광범위하게 체크됩니다.Array
.
요약
- 함수 속성과 메서드 선언 사이에 유형 차이가 있습니다.
- 가능한 경우 더 강력한 유형에 대한 함수 특성 선택
막 타이프스크립트에 타이프스크립트를 것을 에 알 수 같은 하기 위해 타이프스크립트interface
.
Stack Overflow와 Git Hub 문제에 대한 몇 가지 답변을 살펴본 후, 저는 마침내 같은 문제에 대해 누구에게나 도움이 될 수 있는 해결책을 찾았습니다.
은 ' 종류'로 할 수 .(arg0: type0) => returnType
다른 함수의 매개 변수 목록에서 이 유형 정의를 사용할 수 있습니다.
function runCallback(callback: (sum: number) => void, a: number, b: number): void {
callback(a + b);
}
// Another way of writing the function would be:
// let logSum: (sum: number) => void = function(sum: number): void {
// console.log(sum);
// };
function logSum(sum: number): void {
console.log(`The sum is ${sum}.`);
}
runCallback(logSum, 2, 2);
언급URL : https://stackoverflow.com/questions/29689966/how-to-define-type-for-a-function-callback-as-any-function-type-not-universal
'programing' 카테고리의 다른 글
Vuex - API 호출 전후에 상태 변경을 커밋하시겠습니까? (0) | 2022.10.21 |
---|---|
jQuery를 사용하여 입력에 포커스가 있는지 테스트 (0) | 2022.10.21 |
HTML을 IPython 출력에 삽입하려면 어떻게 해야 합니까? (0) | 2022.10.21 |
JSON 구조에서 반복하려면 어떻게 해야 하나요? (0) | 2022.10.21 |
오브젝트 범위와Object.assign(Object.assign) (0) | 2022.10.21 |