Typescript：傳遞函數的類型在接口

我想弄清楚如何從現有的Typescript函數中獲取類型並使用它來定義接口。我正在研究React項目，並且我想將action creator（函數）傳遞給Props接口，然後將其作爲Component<Props, State>傳遞到React組件。Typescript：傳遞函數的類型在接口

例行動的創建者：

export function myFunction(foo: string = "bar") { 
    return { 
     type: "EXAMPLE_ACTION", 
     payload: foo, 
    } 
}

例成分：

import React, { Component } from 'react' 
import { connect } from "react-redux" 
import { myFunction } from "actions" 

export interface Props { 
    // This is what I'm trying to and and it ends up in ts error 
    myFunc: myFunction 
} 

class SomeComponent extends Component<Props, {}> { 
    render() { 
     return (
      <div> 
       Example: 
       <button onClick={this.props.myFunc("baz")}>Click to dispatch</button> 
      </div> 
     ) 
    } 
} 

export default connect(null, { 
    myFunction 
})(SomeComponent)

我想這可能是工作，但坦率地說這是一個打字稿錯誤：

[ts] Cannot find name 'myFunction'

我想知道我是否必須定義一個單獨的type將它傳遞給我的組件，這樣的事情：

export type myFuncType = (foo: string) => { type: string, payload: string } 
export const myFunction: myFuncType = (foo: string) => { 
    return { 
     type: "EXAMPLE_ACTION", 
     payload: foo, 
    } 
}

，但似乎過於冗長和冗餘，並且需要導入另一個出口。有沒有其他解決方法？

來源

2017-04-24 Samuel Hudec

您可以使用類型位置中的typeof關鍵字來獲取指定值的類型。

在這種情況下，你會寫

import { myFunction } from "actions"; 

export interface Props { 
    myFunc: typeof myFunction; 
}

您目前收到錯誤的原因是打字稿有兩個不同的聲明空間，一個值和一個類型。 function定義了一個值，但不是一個類型。

來源

2017-04-24 11:56:58

啊謝謝，效果很好。不知何故，我甚至沒有想到這一點 –

Typescript：傳遞函數的類型在接口

回答

相關問題