在基於 typescript 的項目中使用 Vue js 組件

Question

我用谷歌搜索了很多無濟於事，似乎我遺漏了一些明顯的東西，但仍然......我在以下堆棧中創建了一個項目：Vue+TS+Webpack+ASP.NET Core。 現在我面臨一個殘酷的現實——實際上有幾十個優秀的 Vue 組件，但其中很少有附加 *.d.ts 之類的東西。 上面提到的技術棧中是否有一些相對簡單（恕我直言在 TS 中重寫不是一個簡單的解決方案）的方法來使用基於 JS 的 Vue 組件？

PS：如果您知道帶有開箱即用 ts 支持的漂亮模態對話框 Vue 組件，請告訴我 :) 當然，我更喜歡聽聽更通用的解決方案。

Answer 1

我可能不了解整個情況，但我想在 webpack 中啟用 JS 就足夠了。

{
  "compilerOptions": {
    "allowJs": true
  }
}

Answer 2

Vuejs 2.5+ 附帶了 TypeScript 的官方類型聲明。 你必須安裝ts-loader ，更新 webpack 和 ts 配置並編寫像這樣的組件

tsconfig.json

{
  "compilerOptions": {
    // this aligns with Vue's browser support
    "target": "es5",
    // this enables stricter inference for data properties on `this`
    "strict": true,
    // if using webpack 2+ or rollup, to leverage tree shaking:
    "module": "es2015",
    "moduleResolution": "node"
  }
}

一些示例 Vue 組件

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
    ...
});
</script>

如果您使用 webpack 和/或單個組件文件，則還需要其他設置。

webpack.config.js

module.exports = {
  entry: './src/main.ts', //TK a typescript file!
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  resolve: {
    extensions: ['.ts','.js'], //TK can't tell if this is actually necessary but is in all the sample code I found
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  module: {
    rules: [
      // TK THE LOADER: needed to process typescript files. Note the option used. We'll also need sfc.d.ts so that typescript can find the necessary .vue files
      // TK make sure to npm install ts-loader and npm link typscript if its installed globally
      {
        test: /\.ts$/,
        exclude: /node_modules|vue\/src/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/]
         }
      },
...

如果是單個文件組件，您需要將此文件添加到根sfc.d.ts以便 TypeScript 可以將其識別為模塊

declare module "*.vue" {
  import Vue from 'vue'
  export default typeof Vue
}

你可以在這里閱讀更多關於它的信息

Answer 3

據我所見，道具不能用打字稿輸入，而是當你需要它們時，你可以驗證它們，如vue 道具驗證所示，所以只需搜索常見的 vue 組件。

順便說一句，我相信你已經看過vue typescript support了。

關於組件，我認為最好是選擇像vuetify或bootstrap-vue這樣的框架，在那里你會發現一組遵循相同樣式的組件

Answer 4

我使用支持打字稿的Vuetify ，然后如果我需要Vuetify（很少發生）和打字稿不支持的組件； 我使用require例如：

const component = require("module"); // If component does not support TS

import component from "module"; // If component support TS

Answer 5

我通過僅對這些組件禁用 eslint 和 tslint 來設法在 typescript 環境中使用基於 js 的組件：

1. 我將所有基於 js 的組件放入項目的 /js/ 目錄中。

2. 我將ignorePatterns添加到.eslintrc.js ：

  ignorePatterns: [
    "**/js/*.vue",
    "**/js/*.js",
  ],

3. 我將exclude添加到tsconfig.json ：

 "exclude": [
    "node_modules",
    "src/**/js/*.vue",
    "src/**/js/*.js"
  ]

這使它工作。

這是我的完整配置供參考：

.eslintrc.js：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2020,
    project: "./tsconfig.json",
    createDefaultProgram: true,
    async: false,
  },
  ignorePatterns: [
    "**/js/*.vue",
    "**/js/*.js",
  ],
  rules: {
    "no-throw-literal": "error",
    "no-return-await": "error",

    "@typescript-eslint/no-inferrable-types": "off",
    "@typescript-eslint/no-empty-function": "off",

    "@typescript-eslint/ban-ts-ignore": ["error"],
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/explicit-function-return-type": ["error"],
    "@typescript-eslint/explicit-member-accessibility": "off",
    "@typescript-eslint/no-unused-vars": ["error"],
    "@typescript-eslint/restrict-plus-operands": ["error"],
    "@typescript-eslint/restrict-template-expressions": "off",
    "@typescript-eslint/return-await": ["error", "always"],
    "@typescript-eslint/no-unsafe-call": ["error"],
    "@typescript-eslint/no-unsafe-return": ["error"],
    "@typescript-eslint/no-unsafe-member-access": ["error"],
    "@typescript-eslint/no-unused-vars-experimental": ["error"],
    "@typescript-eslint/no-unused-expressions": ["error"],
    "@typescript-eslint/unbound-method": ["error"],
    "@typescript-eslint/strict-boolean-expressions": ["error"],
    "@typescript-eslint/no-throw-literal": ["error"],

    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

tsconfig.json：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "allowJs": false,
    "moduleResolution": "node",
    "strict": true,
    "importHelpers": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noUnusedParameters": true,
    "strictNullChecks": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noErrorTruncation": true,
    "strictBindCallApply": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "emitDecoratorMetadata": true,
    "noEmitOnError": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    "src/**/js/*.vue",
    "src/**/js/*.js"
  ]
}