DefinitelyTyped ->响应软件包-> tsc 2.2.2错误TS1005，TS1128，TS1109和TS1136

Question

我找到了这个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-gen和dts-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"
    ]
}

Answer 1

错误出现在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://stackoverflow.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;

react标记-输入-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")
);