Невозможно использовать типизированные аргументы с Typescript и VueJS

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. Когда я удаляю набор текста, ошибка исчезает.

Почему это происходит? Что я должен сделать, чтобы избежать этой ошибки?

вот мой пакет. 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 build, возможно, что конфигурация неправильно настроена для использования машинописи.

Добавить машинопись и @ vue / cli-plugin-typcript

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