我不是JS和整个生态系统中最好的，所以如果我想念，请耐心等待。我会尽力描述这个问题。
我正在使用TypeScript和ReactJS。根据我的有限知识，似乎TypeScript定义不适用于构建。我不明白为什么。
我的堆栈是babel，gulp，webpack，TypeScript，React。
错误：
ERROR in [at-loader] ./app/scripts/chromereload.ts:22:7
TS2304: Cannot find name 'chrome'.
ERROR in [at-loader] ./app/scripts/chromereload.ts:22:67
TS7006: Parameter 'tabs' implicitly has an 'any' type.
ERROR in [at-loader] ./app/scripts/chromereload.ts:25:11
TS2304: Cannot find name 'chrome'.
ERROR in [at-loader] ./app/scripts/chromereload.ts:27:9
TS2304: Cannot find name 'chrome'.
ERROR in [at-loader] ./app/scripts/contentscript.tsx:18:12
TS2345: Argument of type 'Element' is not assignable to parameter of type 'ReactElement<any>'.
Types of property 'type' are incompatible.
Type 'string | ComponentClass<any> | StatelessComponent<any>' is not assignable to type 'string | StatelessComponent<any> | ComponentClass<any>'.
Type 'ComponentClass<any>' is not assignable to type 'string | StatelessComponent<any> | ComponentClass<any>'.
Type 'React.ComponentClass<any>' is not assignable to type 'React.ComponentClass<any>'. Two different types with this name exist, but they are unrelated.
Type 'React.Component<any, React.ComponentState>' is not assignable to type 'React.Component<any, React.ComponentState>'. Two different types with this name exist, but they are unrelated.
Types of property 'render' are incompatible.
Type '() => string | number | false | Element | Element[] | ReactPortal' is not assignable to type '() => false | Element'.
Type 'string | number | false | Element | Element[] | ReactPortal' is not assignable to type 'false | Element'.
Type 'string' is not assignable to type 'false | Element'.
ERROR in [at-loader] ./app/scripts/contentscript.tsx:18:12
TS2605: JSX element type 'App' is not a constructor function for JSX elements.
Property 'setState' is missing in type 'App'.
ERROR in [at-loader] ./app/scripts/lib/utils.ts:49:5
TS2304: Cannot find name 'chrome'.
ERROR in [at-loader] ./app/scripts/lib/utils.ts:49:63
TS7006: Parameter 'tabs' implicitly has an 'any' type.
ERROR in [at-loader] ./app/scripts/react/app.tsx:26:19
TS2552: Cannot find name 'ReactElement'. Did you mean 'SVGRectElement'?
ERROR in [at-loader] ./app/scripts/react/app.tsx:36:10
TS2339: Property 'state' does not exist on type 'App'.
ERROR in [at-loader] ./app/scripts/react/app.tsx:39:15
TS2339: Property 'state' does not exist on type 'App'.
ERROR in [at-loader] ./app/scripts/react/app.tsx:43:31
TS2339: Property 'state' does not exist on type 'App'.
ERROR in [at-loader] ./app/scripts/react/app.tsx:48:44
TS2339: Property 'state' does not exist on type 'App'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3420:13
TS2403: Subsequent variable declarations must have the same type. Variable 'a' must be of type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>', but here has type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3421:13
TS2403: Subsequent variable declarations must have the same type. Variable 'abbr' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3422:13
TS2403: Subsequent variable declarations must have the same type. Variable 'address' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3423:13
TS2403: Subsequent variable declarations must have the same type. Variable 'area' must be of type 'DetailedHTMLProps<AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>', but here has type 'DetailedHTMLProps<AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3424:13
TS2403: Subsequent variable declarations must have the same type. Variable 'article' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3425:13
TS2403: Subsequent variable declarations must have the same type. Variable 'aside' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3426:13
TS2403: Subsequent variable declarations must have the same type. Variable 'audio' must be of type 'DetailedHTMLProps<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>', but here has type 'DetailedHTMLProps<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3427:13
TS2403: Subsequent variable declarations must have the same type. Variable 'b' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3428:13
TS2403: Subsequent variable declarations must have the same type. Variable 'base' must be of type 'DetailedHTMLProps<BaseHTMLAttributes<HTMLBaseElement>, HTMLBaseElement>', but here has type 'DetailedHTMLProps<BaseHTMLAttributes<HTMLBaseElement>, HTMLBaseElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3429:13
TS2403: Subsequent variable declarations must have the same type. Variable 'bdi' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3430:13
TS2403: Subsequent variable declarations must have the same type. Variable 'bdo' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3431:13
TS2403: Subsequent variable declarations must have the same type. Variable 'big' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3432:13
TS2403: Subsequent variable declarations must have the same type. Variable 'blockquote' must be of type 'DetailedHTMLProps<BlockquoteHTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<BlockquoteHTMLAttributes<HTMLElement>, HTMLElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3433:13
TS2403: Subsequent variable declarations must have the same type. Variable 'body' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3434:13
TS2403: Subsequent variable declarations must have the same type. Variable 'br' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLBRElement>, HTMLBRElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLBRElement>, HTMLBRElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3435:13
TS2403: Subsequent variable declarations must have the same type. Variable 'button' must be of type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>', but here has type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3436:13
TS2403: Subsequent variable declarations must have the same type. Variable 'canvas' must be of type 'DetailedHTMLProps<CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>', but here has type 'DetailedHTMLProps<CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3437:13
TS2403: Subsequent variable declarations must have the same type. Variable 'caption' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3438:13
TS2403: Subsequent variable declarations must have the same type. Variable 'cite' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3439:13
TS2403: Subsequent variable declarations must have the same type. Variable 'code' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3440:13
TS2403: Subsequent variable declarations must have the same type. Variable 'col' must be of type 'DetailedHTMLProps<ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>', but here has type 'DetailedHTMLProps<ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3441:13
TS2403: Subsequent variable declarations must have the same type. Variable 'colgroup' must be of type 'DetailedHTMLProps<ColgroupHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>', but here has type 'DetailedHTMLProps<ColgroupHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3442:13
TS2403: Subsequent variable declarations must have the same type. Variable 'data' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3443:13
TS2403: Subsequent variable declarations must have the same type. Variable 'datalist' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLDataListElement>, HTMLDataListElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLDataListElement>, HTMLDataListElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3444:13
TS2403: Subsequent variable declarations must have the same type. Variable 'dd' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3445:13
TS2403: Subsequent variable declarations must have the same type. Variable 'del' must be of type 'DetailedHTMLProps<DelHTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<DelHTMLAttributes<HTMLElement>, HTMLElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3446:13
TS2403: Subsequent variable declarations must have the same type. Variable 'details' must be of type 'DetailedHTMLProps<DetailsHTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<DetailsHTMLAttributes<HTMLElement>, HTMLElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3447:13
TS2403: Subsequent variable declarations must have the same type. Variable 'dfn' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3448:13
TS2403: Subsequent variable declarations must have the same type. Variable 'dialog' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3449:13
TS2403: Subsequent variable declarations must have the same type. Variable 'div' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3450:13
TS2403: Subsequent variable declarations must have the same type. Variable 'dl' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLDListElement>, HTMLDListElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLDListElement>, HTMLDListElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3451:13
TS2403: Subsequent variable declarations must have the same type. Variable 'dt' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3452:13
TS2403: Subsequent variable declarations must have the same type. Variable 'em' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3453:13
TS2403: Subsequent variable declarations must have the same type. Variable 'embed' must be of type 'DetailedHTMLProps<EmbedHTMLAttributes<HTMLEmbedElement>, HTMLEmbedElement>', but here has type 'DetailedHTMLProps<EmbedHTMLAttributes<HTMLEmbedElement>, HTMLEmbedElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3454:13
TS2403: Subsequent variable declarations must have the same type. Variable 'fieldset' must be of type 'DetailedHTMLProps<FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>', but here has type 'DetailedHTMLProps<FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3455:13
TS2403: Subsequent variable declarations must have the same type. Variable 'figcaption' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3456:13
TS2403: Subsequent variable declarations must have the same type. Variable 'figure' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3457:13
TS2403: Subsequent variable declarations must have the same type. Variable 'footer' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3458:13
TS2403: Subsequent variable declarations must have the same type. Variable 'form' must be of type 'DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>', but here has type 'DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3459:13
TS2403: Subsequent variable declarations must have the same type. Variable 'h1' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3460:13
TS2403: Subsequent variable declarations must have the same type. Variable 'h2' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>'.
ERROR in [at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3461:13
TS2403: Subsequent variable declarations must have the same type. Variable 'h3' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>'.
的package.json
{
"name": "app",
"private": true,
"engines": {
"node": ">=0.8.0"
},
"scripts": {
"precommit-msg": "echo 'Pre-commit checks...' && exit 0",
"lint": "node node_modules/eslint/bin/eslint.js app/scripts.babel/**/*.js"
},
"pre-commit": [
"precommit-msg",
"lint"
],
"devDependencies": {
"awesome-typescript-loader": "^3.2.3",
"babel-core": "^6.7.2",
"babel-preset-es2015": "^6.6.0",
"babelify": "^7.3.0",
"browserify": "^14.4.0",
"del": "^2.2.0",
"eslint": "^4.4.1",
"eslint-config-airbnb-base": "^11.3.1",
"eslint-plugin-import": "^2.7.0",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-cache": "^0.4.3",
"gulp-chrome-manifest": "0.0.13",
"gulp-clean-css": "^2.0.3",
"gulp-eslint": "^4.0.0",
"gulp-htmlmin": "^1.3.0",
"gulp-if": "^2.0.0",
"gulp-imagemin": "^2.4.0",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.2.0",
"gulp-sass": "^3.1.0",
"gulp-size": "^2.1.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-tslint": "^8.1.2",
"gulp-uglify": "^1.5.3",
"gulp-useref": "^3.0.8",
"gulp-zip": "^3.2.0",
"main-bower-files": "^2.11.1",
"pre-commit": "^1.2.2",
"run-sequence": "^1.1.5",
"tslint": "^5.7.0",
"typescript": "^2.4.2",
"uglifyjs-webpack-plugin": "^1.0.0-beta.2",
"vinyl-source-stream": "^1.1.0",
"wiredep": "^4.0.0"
},
"eslintConfig": {
"env": {
"node": true,
"browser": true
},
"globals": {
"chrome": true
},
"rules": {
"eol-last": 0,
"quotes": [
2,
"single"
]
}
},
"dependencies": {
"@types/chrome": "0.0.48",
"@types/jquery": "^3.2.12",
"@types/react": "^16.0.5",
"@types/react-dom": "^15.5.4",
"@webcomponents/webcomponentsjs": "github:webcomponents/webcomponentsjs#v1.0.1",
"babel-es6-polyfill": "^1.1.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"ejsx": "^1.0.0-b2",
"gulp-javascript-obfuscator": "^1.1.2",
"jquery": "^3.2.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-shadow": "^2.0.2",
"source-map-loader": "^0.2.1",
"ts-deferred": "^1.0.4",
"webpack": "^3.5.5"
}
}
* tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/scripts/",
"sourceMap": false,
"noImplicitAny": true,
"module": "commonjs",
"moduleResolution": "node",
"target": "es6",
"allowJs": true,
"allowSyntheticDefaultImports": true,
"jsx": "react",
"types": []
},
"filesGlob": [
"./app/scripts/**/*.{ts,tsx}"
]
}
webpack.config.js
import path from 'path';
import webpack from 'webpack';
import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
var BUILD_DIR = path.resolve(__dirname, 'dist/scripts');
var APP_DIR = path.resolve(__dirname, 'app/scripts');
var config = {
entry: {
'contentscript': APP_DIR + '/contentscript.tsx',
'background': APP_DIR + '/background.ts',
'chromereload': APP_DIR + '/chromereload.ts'
},
devtool: 'inline-source-map',
//devtool: 'cheap-module-eval-source-map',
output: {
path: BUILD_DIR,
filename: '[name].js'
},
resolve: {
extensions: [
'.js',
'.ts',
'.tsx'
]
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new UglifyJsPlugin()
],
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
]
},
};
module.exports = config;