DefinitelyTyped -> Reagieren Paket -> tsc 2.2.2 Fehler TS1005, TS1128, TS1109 und TS1136

Question

ich dieses Paket gefunden für React, dass eine Komponente genau, wie ich sie brauche. Leider waren keine Typisierungen vorhanden und so habe ich mich entschlossen, sie selbst zu erstellen.

Paket:

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

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

Dies ist die Definitionen kam ich mit, und sie arbeiten mit dem Anwendungsbeispiel, das auf GitHub https://github.com/prakhar1989/react-tags#usage angegeben ist.

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; 

ich dann zu https://github.com/DefinitelyTyped/DefinitelyTyped beitragen möchte, so folgte ich ihren Führer für ein neues Paket erstellen.

Ich begann mit npm install -g dts-gen und dts-gen --dt --name react-tag-input --template module ausgeführt.

Nachdem Sie das getan Ich habe lediglich index.d.ts und fügte hinzu, mein Code, ich weiß, funktioniert. Wenn ich jedoch tsc ausführen bekomme ich den folgenden Fehler. Warum funktioniert das und warum funktioniert der Code, wenn ich ihn in meinem Projekt verwende? Ich verstehe, dass es wahrscheinlich auf die import * as React from "react"; zurückzuführen ist, aber meine Typdefinitionen, die ich in meinem Projekt verwende, werden von DefinitelyTyped an erster Stelle heruntergeladen.

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 dass automatisch mit dts-gen Befehl erstellt.

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

Der Fehler war in tsconfig.json.

Hinzugefügt:

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

komplette Dateien:

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; 

r EACT-tag-input-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") 
);