DefinitelyTyped -> React 包 -> tsc 2.2.2 错误 TS1005、TS1128、TS1109 和 TS1136

DefinitelyTyped -> React package -> tsc 2.2.2 error TS1005, TS1128, TS1109 and TS1136

我找到了这个 React 包,它的组件与我需要的完全一样。不幸的是没有可用的类型,所以我决定自己创建它们。

包裹:

https://www.npmjs.com/package/react-tag-input

https://github.com/prakhar1989/react-tags

这是我想出的定义,它们适用于 GitHub https://github.com/prakhar1989/react-tags#usage.

上指定的用法示例
import * as React from "react";

export interface ReactTagsProps {
    tags?: TagItem[];
    suggestions?: string[];
    handleDelete: ((i: number) => void);
    handleAddition: ((tag: string) => void);
    handleDrag?: ((tag: TagItem, currPos: number, newPos: number) => void);
    placeholder?: string;
}

export interface TagItem {
    id: number;
    text: string;
}

export class WithContext extends React.Component<ReactTagsProps, {}> { }

export default WithContext;

然后我想为 https://github.com/DefinitelyTyped/DefinitelyTyped 做贡献,所以我按照他们的指南创建了一个新包。

我从 运行宁 npm install -g dts-gendts-gen --dt --name react-tag-input --template module 开始。

完成此操作后,我只编辑了 index.d.ts 并添加了我知道有效的代码。但是,如果我 运行 tsc 我会收到以下错误。为什么会这样,为什么当我在我的项目中 运行 代码工作时?我知道这可能是由于 import * as React from "react"; 但我在项目中使用的类型定义首先是从 DefinitelyTyped 下载的。

C:\Users\oscar\Documents\DefinitelyTyped\types\react-tag-input>tsc
../react/index.d.ts(195,27): error TS1005: ',' expected.
../react/index.d.ts(195,29): error TS1005: '>' expected.
../react/index.d.ts(195,31): error TS1128: Declaration or statement expected.
../react/index.d.ts(195,41): error TS1109: Expression expected.
../react/index.d.ts(216,27): error TS1005: ',' expected.
../react/index.d.ts(216,29): error TS1005: '>' expected.
../react/index.d.ts(216,31): error TS1128: Declaration or statement expected.
../react/index.d.ts(216,41): error TS1109: Expression expected.
../react/index.d.ts(218,34): error TS1005: ',' expected.
../react/index.d.ts(218,36): error TS1005: '>' expected.
../react/index.d.ts(218,38): error TS1128: Declaration or statement expected.
../react/index.d.ts(218,48): error TS1109: Expression expected.
../react/index.d.ts(220,9): error TS1005: ',' expected.
../react/index.d.ts(221,9): error TS1005: ',' expected.
../react/index.d.ts(232,16): error TS1005: ',' expected.
../react/index.d.ts(232,18): error TS1005: '>' expected.
../react/index.d.ts(232,20): error TS1005: ';' expected.
../react/index.d.ts(232,22): error TS1109: Expression expected.
../react/index.d.ts(232,45): error TS1005: '(' expected.
../react/index.d.ts(233,36): error TS1005: ',' expected.
../react/index.d.ts(233,38): error TS1005: '>' expected.
../react/index.d.ts(233,40): error TS1109: Expression expected.
../react/index.d.ts(234,9): error TS1136: Property assignment expected.
../react/index.d.ts(234,15): error TS1005: ',' expected.
../react/index.d.ts(234,55): error TS1109: Expression expected.
../react/index.d.ts(234,61): error TS1005: ';' expected.
../react/index.d.ts(234,81): error TS1005: '(' expected.
../react/index.d.ts(234,87): error TS1005: ')' expected.
../react/index.d.ts(235,19): error TS1109: Expression expected.
../react/index.d.ts(235,37): error TS1005: '(' expected.
../react/index.d.ts(236,22): error TS1109: Expression expected.
../react/index.d.ts(236,42): error TS1005: '(' expected.
../react/index.d.ts(237,22): error TS1109: Expression expected.
../react/index.d.ts(237,34): error TS1005: '(' expected.
../react/index.d.ts(238,21): error TS1109: Expression expected.
../react/index.d.ts(241,32): error TS1005: ',' expected.
../react/index.d.ts(241,34): error TS1005: '>' expected.
../react/index.d.ts(241,36): error TS1109: Expression expected.
../react/index.d.ts(243,9): error TS1005: ',' expected.
../react/index.d.ts(243,37): error TS1005: '(' expected.
../react/index.d.ts(244,42): error TS1005: '(' expected.
../react/index.d.ts(245,47): error TS1005: '(' expected.
../react/index.d.ts(246,34): error TS1005: '(' expected.
../react/index.d.ts(247,29): error TS1005: ',' expected.
../react/index.d.ts(250,39): error TS1005: ',' expected.
../react/index.d.ts(250,41): error TS1005: '>' expected.
../react/index.d.ts(250,43): error TS1109: Expression expected.
../react/index.d.ts(250,45): error TS1109: Expression expected.
../react/index.d.ts(252,9): error TS1005: ',' expected.
../react/index.d.ts(2746,1): error TS1128: Declaration or statement expected.

tsconfig.json 由 dts-gen 命令自动创建。

{
    "compilerOptions": {
        "module": "commonjs",
        "lib": [
            "es6"
        ],
        "noImplicitAny": true,
        "noImplicitThis": true,
        "strictNullChecks": true,
        "baseUrl": "../",
        "typeRoots": [
            "../"
        ],
        "types": [],
        "noEmit": true,
        "forceConsistentCasingInFileNames": true
    },
    "files": [
        "index.d.ts",
        "react-tag-input-tests.ts"
    ]
}

错误在 tsconfig.json

已添加:

"lib": [
    "dom"
],
"jsx": "react",

完整文件:

tsconfig.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "lib": [
            "es6",
            "dom"
        ],
        "noImplicitAny": true,
        "noImplicitThis": true,
        "strictNullChecks": false,
        "baseUrl": "../",
        "jsx": "react",
        "typeRoots": [
            "../"
        ],
        "types": [],
        "noEmit": true,
        "forceConsistentCasingInFileNames": true
    },
    "files": [
        "index.d.ts",
        "react-tag-input-tests.tsx"
    ]
}

index.d.ts:

// Type definitions for React-Tags (react-tag-input) 4.7
// Project: https://github.com/prakhar1989/react-tags
// Definitions by: Ogglas <https://whosebug.com/users/3850405/ogglas>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.3

import * as React from "react";

export interface ReactTagsProps {
    tags?: Array<{id: number, text: string }>;
    suggestions?: string[];
    handleDelete: ((i: number) => void);
    handleAddition: ((tag: string) => void);
    handleDrag?: ((tag: { id: number; text: string; }, currPos: number, newPos: number) => void);
    placeholder?: string;
}

export class WithContext extends React.Component<ReactTagsProps, {}> { }

export default WithContext;

反应标签输入-tests.tsx:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { WithContext as ReactTags } from "react-tag-input";

let tags = Array({ id: 0, text: "test" }, { id: 1, text: "testing" });

let suggestions = Array("test1", "test2");

ReactDOM.render(
    <ReactTags tags={tags}
        suggestions={suggestions}
        handleDelete={(i: number) => console.log("Delete: " + i)}
        handleAddition={(tag: string) => console.log("Add: " + tag)}
        handleDrag={(tag: { id: number; text: string; }, currPos: number, newPos: number) => console.log("Drag: " + tag.text)} />,
    document.getElementById("app")
);