0

I found this package for React that has a component exactly like the one I need. Unfortunately no typings were available so I decided to create them myself.

Package:

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

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

This is the definitions I came up with and they work with the usage example that is specified on 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;

I would then like to contribute to https://github.com/DefinitelyTyped/DefinitelyTyped so I followed their guide for create a new package.

I started out by running npm install -g dts-gen and dts-gen --dt --name react-tag-input --template module.

After doing this I only edited index.d.ts and added my code that I know is working. However If I run tsc I get the following error. Why is this and why does the code work when I run it in my project? I understand that it is probably due to the import * as React from "react"; but my type definitions that I use in my project are downloaded from DefinitelyTyped in the first place.

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 that is automatically created with dts-gen command.

{
    "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"
    ]
}
Ogglas
  • 62,132
  • 37
  • 328
  • 418

1 Answers1

0

The error was in tsconfig.json.

Added:

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

Complete files:

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-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")
);
Ogglas
  • 62,132
  • 37
  • 328
  • 418