Question

我正在尝试使用某些方法来创建打字稿vue元素。这是脚本。

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
    methods: {
    check(value: number) {
      console.log(value)
    },
  },
});
</script>

但我总是收到此错误。

Module parse failed: Unexpected token (22:15)
You may need an appropriate loader to handle this file type.
|   },
|   methods: {
>     check(value: number) {
|       console.log(value);
|       this.value = value;

这是由方法中键入的:number arg引起的。当我删除打字错误消失了。

为什么会这样？我应该怎么做才能避免此错误？

这是我的package.json

{
  "name": "rating-form",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.1.3",
    "jquery": "^3.3.1",
    "moment": "^2.22.2",
    "popper.js": "^1.14.4",
    "toastr": "^2.1.4",
    "vue": "^2.5.17",
    "vue-class-component": "^6.0.0",
    "vue-property-decorator": "^7.0.0",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "@types/chai": "^4.1.0",
    "@types/mocha": "^5.2.4",
    "@types/qs": "^6.5.1",
    "@types/toastr": "^2.1.35",
    "@vue/cli-plugin-typescript": "^3.1.1",
    "@vue/cli-plugin-unit-mocha": "^3.1.1",
    "@vue/cli-service": "^3.1.1",
    "@vue/test-utils": "^1.0.0-beta.20",
    "chai": "^4.1.2",
    "typescript": "^3.1.6",
    "vue-template-compiler": "^2.5.17"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "strictNullChecks": false,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack-env", "mocha", "chai"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
  "exclude": ["node_modules"]
}

Answer 1

如果您正在使用vue cli构建项目，则可能是未正确设置配置以使用打字稿。

添加打字稿和@ vue / cli-plugin-typescript

npm install --save-dev typescript @vue/cli-plugin-typescript

还要在项目的根目录中添加一个tsconfig.json。

示例：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

无法将带类型的参数与Typescript和VueJS一起使用

1 个答案: