键入错误不在编译时，不能使我的方法类型在Typescript代码中安全

Question

我是打字稿的新手，如果将错误的类型传递给方法的参数，我的代码不显示编译错误。我的代码是这样的： -

export interface empData {
   empName:string;
}
export class Employee implements empData
{
empName:string;
constructor(empName:string){
this.empName=empName;
}

现在我想使用Employee类作为数据类型，我在单独的文件和write方法中创建了一个函数： -

export function showName(empName:Employee){
return empName;
}

现在在我的组件中，我使用redux和connect方法将showName作为道具传递

export default class EmployeeDetail extends React.Component{
//now I am trying to call the function
showEmp(){
this.props.showName('');
} 
}

this.props.showName（''）此调用没有显示任何类型错误，理想情况下它应该作为this.props.showName传递（新员工（{empName ='someName'}）;请帮助我我做错了什么。我可以使我的代码类型安全。在上面的例子中，我希望方法参数应该是Employee对象的类型安全。

Answer 1

React.Component是通用的，它的第一个通用参数是props的类型。您可以使用匿名接口或命名接口作为参数，这将触发编译器执行适当的检查：

 class EmployeeDetail extends React.Component<{ showName: (empName: Employee) => Employee}> {
    //now I am trying to call the function
    showEmp() {
        this.props.showName(''); //error
    }
}

//OR 
interface EmployeeDetailProps { showName: (empName: Employee) => Employee}
class EmployeeDetail extends React.Component<EmployeeDetailProps> {
    //now I am trying to call the function
    showEmp() {
        this.props.showName(''); //error
    }
}

// Usage
let d = <EmployeeDetail showName={showName} />