DefinitelyTyped - ＆gt;反应包 - ＆gt; 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.

使用dts-gen命令自动创建的

tsconfig.json。

{
    "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

错误发生在Morris.Donut.prototype.setData = function (data, redraw) { if (redraw == null) { redraw = true; } this.data = data; this.values = (function () { var _i, _len, _ref, _results; _ref = this.data; _results = []; for (_i = 0, _len = _ref.length; _i < _len; _i++) { row = _ref[_i]; _results.push(parseFloat(row.value)); } return _results; }).call(this); this.dirty = true; if (redraw) { return this.redraw(); } } //create graph var colors_array = ["#9CC4E4", "#3A89C9"]; var graph_data_arr = [ { label: "- ive Points", value: neg_pts }, { label: "+ ive Points", value: pos_pts } ]; if (neg_pts> 70) { colors_array[0] = "#ff0a0a"; colors_array[1] = "#3A89C9"; } var morris_donut = Morris.Donut({ element: 'donut_div_graph', colors: colors_array, data: graph_data_arr }); //update call $('#selected_option').on('click', 'a', function () { neg_pts = 190; pos_pts = 45; if (neg_pts> 70) { colors_array[0] = "#ff0a0a"; colors_array[1] = "#3A89C9"; } morris_donut.setData( [ { label: "- ive Points", value: neg_pts }, { label: "+ ive Points", value: pos_pts }, ]); } 。

添加了：

tsconfig.json

完整文件：

tsconfig.json：

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

index.d.ts：

{
    "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"
    ]
}

反应标签的输入tests.tsx：

// 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;