[typescript] TypeScript에서 강력한 형식의 함수를 매개 변수로 사용할 수 있습니까?

TypeScript에서는 함수의 매개 변수를 함수 유형으로 선언 할 수 있습니다. 내가 누락 된이 작업을 수행하는 “유형 안전”방법이 있습니까? 예를 들어 다음을 고려하십시오.

class Foo {
    save(callback: Function) : void {
        //Do the save
        var result : number = 42; //We get a number from the save operation
        //Can I at compile-time ensure the callback accepts a single parameter of type number somehow?
        callback(result);
    }
}

var foo = new Foo();
var callback = (result: string) : void => {
    alert(result);
}
foo.save(callback);

저장 콜백은 유형 안전하지 않습니다. 함수의 매개 변수가 문자열 인 콜백 함수를 제공하지만 숫자를 전달하고 오류없이 컴파일합니다. 타입 안전 함수를 저장하기 위해 결과 파라미터를 만들 수 있습니까?

TL; DR 버전 : TypeScript에 .NET 대리자와 동등한 것이 있습니까?

답변

확실한. 함수 타입 은 인자 타입과 반환 타입으로 구성됩니다. 여기서 callback매개 변수의 유형은 “숫자를 받아들이고 유형을 리턴하는 함수”여야 함 을 지정합니다 any.

class Foo {
    save(callback: (n: number) => any) : void {
        callback(42);
    }
}
var foo = new Foo();

var strCallback = (result: string) : void => {
    alert(result);
}
var numCallback = (result: number) : void => {
    alert(result.toString());
}

foo.save(strCallback); // not OK
foo.save(numCallback); // OK

원하는 경우 유형 별명 을 정의하여 이를 캡슐화 할 수 있습니다 .

type NumberCallback = (n: number) => any;

class Foo {
    // Equivalent
    save(callback: NumberCallback) : void {
        callback(42);
    }
}

답변

다음은 일부 일반적인 .NET 대리자와 동등한 TypeScript입니다.

interface Action<T>
{
    (item: T): void;
}

interface Func<T,TResult>
{
    (item: T): TResult;
}

답변

나는이 게시물이 오래되었다는 것을 알고 있지만 요청 된 것과 약간 다른 더 간단한 접근 방식이 있지만 매우 유용한 대안 일 수 있습니다. 메소드를 호출 할 때 본질적으로 함수를 인라인으로 선언 할 수 있습니다 ( 이 경우 Foo‘ save()). 다음과 같이 보일 것입니다.

class Foo {
    save(callback: (n: number) => any) : void {
        callback(42)
    }

    multipleCallbacks(firstCallback: (s: string) => void, secondCallback: (b: boolean) => boolean): void {
        firstCallback("hello world")

        let result: boolean = secondCallback(true)
        console.log("Resulting boolean: " + result)
    }
}

var foo = new Foo()

// Single callback example.
// Just like with @RyanCavanaugh's approach, ensure the parameter(s) and return
// types match the declared types above in the `save()` method definition.
foo.save((newNumber: number) => {
    console.log("Some number: " + newNumber)

    // This is optional, since "any" is the declared return type.
    return newNumber
})

// Multiple callbacks example.
// Each call is on a separate line for clarity.
// Note that `firstCallback()` has a void return type, while the second is boolean.
foo.multipleCallbacks(
    (s: string) => {
         console.log("Some string: " + s)
    },
    (b: boolean) => {
        console.log("Some boolean: " + b)
        let result = b && false

        return result
    }
)

이 multipleCallback()접근 방식은 성공 또는 실패 할 수있는 네트워크 호출과 같은 것들에 매우 유용합니다. 다시 한 번 호출되는 네트워크 호출 예를 가정하면 multipleCallbacks()성공과 실패에 대한 동작을 한 지점에서 정의 할 수 있으며, 이는 미래의 코드 리더에게 더 명확하게 나타납니다.

일반적으로 필자의 경험에 따르면이 접근 방식은 전체적으로보다 간결하고 복잡하지 않으며 선명도가 높아집니다.

모두 행운을 빕니다!

답변

type FunctionName = (n: inputType) => any;

class ClassName {
    save(callback: FunctionName) : void {
        callback(data);
    }
}

이것은 분명히 기능적 프로그래밍 패러다임과 일치합니다.

답변

TS에서는 다음과 같은 방식으로 함수를 입력 할 수 있습니다.

함수 타입 / 서명

이것은 함수 / 메소드의 실제 구현에 사용되며 다음 구문을 갖습니다.

(arg1: Arg1type, arg2: Arg2type) : ReturnType

예:

function add(x: number, y: number): number {
    return x + y;
}

class Date {
  setTime(time: number): number {
   // ...
  }

}

함수 타입 리터럴

함수 타입 리터럴은 함수 타입을 선언하는 또 다른 방법입니다. 그것들은 일반적으로 고차 함수의 함수 서명에 적용됩니다. 고차 함수는 함수를 매개 변수로 승인하거나 함수를 리턴하는 함수입니다. 다음과 같은 구문이 있습니다.

(arg1: Arg1type, arg2: Arg2type) => ReturnType

예:

type FunctionType1 = (x: string, y: number) => number;

class Foo {
    save(callback: (str: string) => void) {
       // ...
    }

    doStuff(callback: FunctionType1) {
       // ...
    }

}

답변

함수 유형을 먼저 정의하면 다음과 같이 보입니다.

type Callback = (n: number) => void;

class Foo {
    save(callback: Callback) : void {
        callback(42);
    }
}

var foo = new Foo();
var stringCallback = (result: string) : void => {
    console.log(result);
}

var numberCallback = (result: number) : void => {
    console.log(result);
}

foo.save(stringCallback); //--will be showing error
foo.save(numberCallback);

일반 속성 구문을 사용하여 함수 유형이 없으면 다음과 같습니다.

class Foo {
    save(callback: (n: number) => void) : void {
        callback(42);
    }
}

var foo = new Foo();
var stringCallback = (result: string) : void => {
    console.log(result);
}

var numberCallback = (result: number) : void => {
    console.log(result);
}

foo.save(stringCallback); //--will be showing error
foo.save(numberCallback);

c # generic 대리자와 같은 인터페이스 함수를 사용하여 원하는 경우 다음과 같습니다.

interface CallBackFunc<T, U>
{
    (input:T): U;
};

class Foo {
    save(callback: CallBackFunc<number,void>) : void {
        callback(42);
    }
}

var foo = new Foo();
var stringCallback = (result: string) : void => {
    console.log(result);
}

var numberCallback = (result: number) : void => {
    console.log(result);
}

let strCBObj:CallBackFunc<string,void> = stringCallback;
let numberCBObj:CallBackFunc<number,void> = numberCallback;

foo.save(strCBObj); //--will be showing error
foo.save(numberCBObj);

답변

다른 말과는 달리, 일반적인 문제는 오버로드 된 동일한 함수의 유형을 선언하는 것입니다. 일반적인 경우는 여러 종류의 리스너를 허용하는 EventEmitter on () 메소드입니다. redux 조치로 작업 할 때 이와 유사한 상황이 발생할 수 있으며 조치 유형을 리터럴로 사용하여 과부하를 표시합니다. EventEmitters의 경우 이벤트 이름 리터럴 유형을 사용합니다.

interface MyEmitter extends EventEmitter {
  on(name:'click', l: ClickListener):void
  on(name:'move', l: MoveListener):void
  on(name:'die', l: DieListener):void
  //and a generic one
  on(name:string, l:(...a:any[])=>any):void
}

type ClickListener = (e:ClickEvent)=>void
type MoveListener = (e:MoveEvent)=>void
... etc

// will type check the correct listener when writing something like:
myEmitter.on('click', e=>...<--- autocompletion