时间戳

首页 > 解决方案 > 打字稿。如果 props 对未定义的属性发誓怎么办？反应

reactjs - 打字稿。如果 props 对未定义的属性发誓怎么办？反应

问题描述

我使用各种库。而且这些库没有 TypeScript。如何在界面中定义它们？我的意思是这个。

Interface IProps {
somelibrary: // What type should I write here?
}

我知道存在类型定义。但是如何理解使用哪种类型。例如

Interface IProps {
i18n: // What type should I write here?
}

标签： reactjstypescript

解决方案

因此，如果我对您的理解正确，您希望定义不一定具有 .d.ts 文件的库的类型。

我确实开始为我之前使用的名为 rethinkdb 的数据库执行此操作。（https://www.npmjs.com/package/rethinkdbdash）

作为一个警告，这里有一些any参考资料，但这纯粹是因为当时这是 POC，但你应该希望能大致了解我试图实现的目标。

declare module 'rethinkdbdash' {
export default function RethinkDBDash(config: ConnectionConfig): RethinkConnection

interface ConnectionConfig {
    host?: string;
    port?: number;
    db?: string;
}

export interface RethinkConnection {
    table(document: string): Term;

    asc(columnName: string): Term;

    desc(columnName: string): Term;
}

interface filterQueryParams {
    [key: string]: string;
}

interface Row {
    (fieldName: string): Term;
}

interface Term {
    insert(documents: any, options?: any): void;

    filter(filterParams: filterQueryParams): any; //@todo change the return type

    update(callback: (row: Row) => void): Term;

    append(document: any): Term;

    pluck(...columnNames: string[]): Term;

    limit(amount: number): Term;

    orderBy(fieldName: string): Term;

    orderBy(obj: any): Term;

    run(): any;
}}

上面是一个名为typings 的文件夹中名为rethink.d.ts 的文件。

您基本上可以将其视为我期望如何与底层库交互的合同。

你必须做的另一件事是告诉 TypeScript 编译器你已经为库定义了这些类型，你可以通过在tsconfig.jsoncompilerOptions 块中指定以下内容来做到这一点

    "typeRoots": ["./node_modules/@types", "./src/**/typings"],

这告诉编译器 - 仍然尊重 node_modules 中的类型，但还包括我在项目中创建的任何自定义定义。

完成此设置后，您应该会在 IDE 中找到 intellisense 为您选择这些定义。

我希望这能够解锁你

推荐阅读