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"
]
}
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")
);