javascript - 使用 typescript@2.0.3 从 "typings"迁移到 "@types"

Question

我的 Angular 应用程序目前在 4.1.3 和 Typescript@2.0.3。我读到 Typescript 大于 2.0 时，应该使用 @types。

目前我在应用程序中安装了打字。要迁移到使用 @types，我有 3 个问题:

1.我应该简单地从 package.json 和 tsconfig.json 中删除 typings 吗？并安装 @types 包？

1. 我如何决定为我的应用程序安装哪些 @types 包？
2. 我还应该删除 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)

Answer 1

1. 是的，您应该从配置文件、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

希望对你有帮助。