我的 Angular 应用程序目前在 4.1.3 和 Typescript@2.0.3。我读到 Typescript 大于 2.0 时，应该使用 @types。
目前我在应用程序中安装了打字。要迁移到使用 @types，我有 3 个问题:
1.我应该简单地从 package.json 和 tsconfig.json 中删除 typings 吗？并安装 @types 包？
- 我如何决定为我的应用程序安装哪些
@types包？ - 我还应该删除
typings.json文件吗？
package.json:
{
"homepage": "https://github.com/angularclass/angular2-webpack-starter",
"license": "MIT",
"scripts": {
"rimraf": "rimraf",
"tslint": "tslint",
"typedoc": "typedoc",
"typings": "typings",
"webpack": "webpack",
"webpack-dev-server": "webpack-dev-server",
"webdriver-manager": "webdriver-manager",
"protractor": "protractor",
"clean": "npm cache clean && npm run rimraf -- node_modules doc typings coverage dist",
"clean:dist": "npm run rimraf -- dist",
"preclean:install": "npm run clean",
"clean:install": "npm set progress=false && npm install",
"preclean:start": "npm run clean",
"clean:start": "npm start",
"watch": "npm run watch:local",
"watch:dev": "npm run build:dev -- --watch",
"watch:local": "npm run build:local -- --watch",
"watch:dev:hmr": "npm run watch:dev -- --hot",
"watch:test": "npm run test -- --auto-watch --no-single-run",
"watch:uat": "npm run uat -- --auto-watch --no-single-run",
"watch:prod": "npm run build:prod -- --watch",
"build": "npm run build:local",
"prebuild:dev": "npm run clean:dist",
"build:dev": "webpack --config config/webpack.dev.js --progress --profile --colors --display-error-details --display-cached",
"build:local": "webpack --config config/webpack.local.js --progress --profile --colors --display-error-details --display-cached",
"build:devplus": "webpack --config config/webpack.devplus.js --progress --profile --colors --display-error-details --display-cached",
"build:test": "webpack --config config/webpack.test.js --progress --profile --colors --display-error-details --display-cached --bail",
"build:uat": "webpack --config config/webpack.uat.js --progress --profile --colors --display-error-details --display-cached --bail",
"prebuild:prod": "npm run clean:dist",
"build:prod": "webpack --config config/webpack.prod.js --progress --profile --colors --display-error-details --display-cached --bail",
"server": "npm run server:dev",
"server:dev": "webpack-dev-server --config config/webpack.dev.js --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/",
"server:local": "webpack-dev-server --config config/webpack.local.js --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/",
"server:dev:hmr": "npm run server:dev -- --hot",
"server:prod": "http-server dist --cors",
"webdriver:update": "npm run webdriver-manager update",
"webdriver:start": "npm run webdriver-manager start",
"lint": "npm run tslint 'src/**/*.ts'",
"pree2e": "npm run webdriver:update -- --standalone",
"e2e": "npm run protractor",
"e2e:live": "npm run e2e -- --elementExplorer",
"pretest": "npm run lint",
"test": "node --max-old-space-size=4096 node_modules/karma/bin/karma start",
"ci": "npm run e2e && npm run test",
"docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
"start": "npm run server:local",
"start:hmr": "npm run server:dev:hmr",
"postinstall": "npm run typings -- install",
"preversion": "npm test",
"version": "npm run build",
"postversion": "git push && git push --tags"
},
"dependencies": {
"@angular/common": "~4.1.3",
"@angular/compiler": "~4.1.3",
"@angular/core": "~4.1.3",
"@angular/forms": "~4.1.3",
"@angular/http": "~4.1.3",
"@angular/platform-browser": "~4.1.3",
"@angular/platform-browser-dynamic": "~4.1.3",
"@angular/router": "~4.1.3",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "~4.1.3",
"angular2-toaster": "1.0.1",
"core-js": "^2.4.1",
"css-loader": "0.23.1",
"fullcalendar": "^2.7.1",
"hammerjs": "^2.0.8",
"intl": "1.2.4",
"jquery": "2.2.2",
"jquery-ui": "1.10.5",
"lodash": "^4.17.4",
"ng2-auto-complete": "^0.7.0",
"ng2-cookies": "^0.1.5",
"ng2-file-upload": "^1.0.0-beta.1",
"node-sass": "^3.8.0",
"normalize.css": "^4.1.1",
"path-to-regexp": "^1.5.3",
"postcss": "^5.0.19",
"postcss-loader": "^0.8.2",
"primeng": "1.0.0-beta.15",
"primeui": "4.1.10",
"resolve-url-loader": "^1.6.0",
"rxjs": "^5.0.1",
"sass-loader": "^3.2.3",
"style-loader": "^0.13.1",
"tether": "^1.2.0",
"url-loader": "^0.5.7",
"zone.js": "^0.8.4"
},
"devDependencies": {
"angular2-hmr": "~0.5.5",
"awesome-typescript-loader": "~0.17.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-plugin-transform-es2015-modules-commonjs-simple": "^6.7.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-es2015-webpack": "^6.4.0",
"bootstrap": "4.0.0-alpha.2",
"bootstrap-loader": "1.0.10",
"codelyzer": "0.0.15",
"compression-webpack-plugin": "^0.3.1",
"copy-webpack-plugin": "^2.1.3",
"css-loader": "^0.23.1",
"es6-promise": "^3.1.2",
"es6-promise-loader": "^1.0.1",
"es6-shim": "^0.35.0",
"exports-loader": "^0.6.3",
"expose-loader": "^0.7.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-webpack-plugin": "^2.15.0",
"http-server": "^0.9.0",
"imports-loader": "^0.6.5",
"istanbul-instrumenter-loader": "^0.2.0",
"json-loader": "^0.5.4",
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3",
"karma-coverage": "^0.5.5",
"karma-jasmine": "^0.3.8",
"karma-mocha-reporter": "^2.0.0",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "1.7.0",
"lodash": "^4.6.1",
"moment": "^2.11.2",
"node-sass": "3.7.0",
"npmconf": "2.1.2",
"parse5": "^2.1.5",
"phantomjs-polyfill": "0.0.2",
"phantomjs-prebuilt": "^2.1.7",
"protractor": "^3.2.2",
"raw-loader": "0.5.1",
"reflect-metadata": "^0.1.3",
"remap-istanbul": "^0.6.3",
"resolve-url-loader": "^1.4.3",
"rimraf": "^2.5.2",
"sass-loader": "^3.2.0",
"source-map-loader": "^0.1.5",
"style-loader": "^0.13.1",
"ts-helpers": "1.1.1",
"ts-node": "^0.7.1",
"tslint": "^3.7.1",
"tslint-loader": "^2.1.3",
"typedoc": "^0.3.12",
"typescript": "2.0.3",
"typings": "^1.5.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1",
"webpack-load-plugins": "^0.1.2",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^0.12.0",
"webpack-validator": "^1.0.0-beta.4"
},
"repository": {
"type": "git",
"url": "https://github.com/angularclass/angular2-webpack-starter.git"
},
"bugs": {
"url": "https://github.com/angularclass/angular2-webpack-starter/issues"
},
"engines": {
"node": ">= 4.2.1",
"npm": ">= 3"
}
}
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"lib" : ["es2015", "es6", "es7", "dom", "es2015.iterable"],
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"skipLibCheck": true,
"noEmitHelpers": true,
"allowJs" : true
},
"exclude": [
"node_modules",
"typings/modules",
"typings"
],
"filesGlob": [
"./src/**/*.ts",
"./test/**/*.ts",
"!./node_modules/**/*.ts",
"src/custom_typings.d.ts",
"typings/index.d.ts"
],
"awesomeTypescriptLoaderOptions": {
"resolveGlobs": true,
"forkChecker": true
},
"compileOnSave": false,
"buildOnSave": false,
"atom": { "rewriteTsconfig": false }
}
从 typings 迁移到 @types 后，我在尝试运行我的应用程序时遇到了以下问题:
errors.ts?f2f7:42 ERROR TypeError: directive.ngOnChanges is not a function
at checkAndUpdateDirectiveInline (eval at 3
(http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:10819:19)
at checkAndUpdateNodeInline (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:12245:17)
at checkAndUpdateNode (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:12184:16)
at prodCheckAndUpdateNode (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:12711:5)
at Object.eval [as updateDirectives] (ng:///AppModule/EventContainer.ngfactory.js:83:5)
at Object.updateDirectives (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:12625:72)
at checkAndUpdateView (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:12151:14)
at callViewAction (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:12514:21)
at execEmbeddedViewsAction (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:12472:17)
at checkAndUpdateView (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:12152:5)
at callViewAction (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:12514:21)
at execComponentViewsAction (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:12446:13)
at checkAndUpdateView (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:12157:5)
at callViewAction (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:12514:21)
at execComponentViewsAction (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:12446:13)
at checkAndUpdateView (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:12157:5)
at callViewAction (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:12514:21)
at execEmbeddedViewsAction (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:12472:17)
at checkAndUpdateView (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:12152:5)
at callViewAction (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:12514:21)
at execComponentViewsAction (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:12446:13)
at Object.checkAndUpdateView (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:12157:5)
at ViewRef_.detectChanges (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:10225:63)
at eval (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:5082:63)
at Array.forEach (native)
at ApplicationRef_.tick (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:5082:25)
at eval (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:4962:106)
at ZoneDelegate.invoke (eval at <anonymous> (http://localhost:8000/polyfills.bundle.js:1392:2), <anonymous>:391:26)
at Object.onInvoke (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:4156:37)
at ZoneDelegate.invoke (eval at <anonymous> (http://localhost:8000/polyfills.bundle.js:1392:2), <anonymous>:390:32)
at Zone.run (eval at <anonymous> (http://localhost:8000/polyfills.bundle.js:1392:2), <anonymous>:141:43)
at NgZone.run (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:4024:62)
at Object.next (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:4962:82)
at SafeSubscriber.schedulerFn [as _next] (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:3858:52)
at SafeSubscriber.__tryOrUnsub (eval at <anonymous> (http://localhost:8000/polyfills.bundle.js:128:2), <anonymous>:238:16)
at SafeSubscriber.next (eval at <anonymous> (http://localhost:8000/polyfills.bundle.js:128:2), <anonymous>:185:22)
at Subscriber._next (eval at <anonymous> (http://localhost:8000/polyfills.bundle.js:128:2), <anonymous>:125:26)
at Subscriber.next (eval at <anonymous> (http://localhost:8000/polyfills.bundle.js:128:2), <anonymous>:89:18)
at EventEmitter.Subject.next (eval at 26 (http://localhost:8000/vendor.bundle.js:43:2), <anonymous>:55:25)
at EventEmitter.emit (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:3844:76)
at NgZone.checkStable (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:4121:40)
at NgZone.onLeave (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:4197:14)
at Object.onInvokeTask (eval at 3 (http://localhost:8000/vendor.bundle.js:15:2), <anonymous>:4150:27)
at ZoneDelegate.invokeTask (eval at <anonymous> (http://localhost:8000/polyfills.bundle.js:1392:2), <anonymous>:423:36)
at Zone.runTask (eval at <anonymous> (http://localhost:8000/polyfills.bundle.js:1392:2), <anonymous>:191:47)
at XMLHttpRequest.ZoneTask.invoke (eval at <anonymous> (http://localhost:8000/polyfills.bundle.js:1392:2), <anonymous>:486:38)
最佳答案
- 是的，您应该从配置文件、
typings目录和 3.typings.json 中删除类型。但是，您应该在tsconfig.json中配置@types:
{
"compilerOptions": {
"typeRoots": [ // it should do the job
"node_modules/@types"
],
"types": [ // alternatively here you can list needed typings
"node",
"jasmine",
"webpack",
"lodash"
// ... etc.
]
}
}
2。以前使用 typings 的库现在需要相应的 @types 包。找到它们的最简单方法是 npmjs.com search engine然后像这样安装它们:
npm install @types/webpack --save
希望对你有帮助。
关于javascript - 使用 typescript@2.0.3 从 "typings"迁移到 "@types"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44168660/