Question

我google了很多无济于事似乎我错过了一些显而易见的东西但仍然......我已经在下面的堆栈中创建了一个项目：Vue + TS + Webpack + ASP.NET Core。现在我面对一个残酷的现实 - 实际上有几十个很好的Vue组件，但很少有类似* .d.ts的东西。在上面提到的技术堆栈中使用基于JS的Vue组件是否有一些相对容易（在TS中重写它不是一个简单的解决方案）？

P.S。：如果你知道很好的模态对话框Vue组件，请提供开箱即用的ts支持请告诉我:)虽然我当然更喜欢听到更一般的解决方案。

Answer 1

我可能不了解整个情况但是，我猜想在webpack中启用JS应该就足够了。

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

Answer 2

据我所见，道具无法输入打字稿，而是在您需要时，您可以按vue prop validation所示验证它们，以便搜索常见的vue组件。

顺便说一下，我确定你已经看过vue typescript support。

关于组件，我认为最好是选择vuetify或bootstrap-vue这样的框架，在这个框架中你会找到一组遵循相同风格的组件

Answer 3

Vuejs 2.5+附带TypeScript的官方类型声明。你必须安装ts-loader，更新webpack和ts config并编写像这样的组件

<强> 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$/]
         }
      },
...

如果是单个文件组件，则需要在root用户添加此文件 sfc.d.ts ，以便TypeScript可以将其识别为模块

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

您可以阅读更多相关信息here

Answer 4

我使用支持typescript的Vuetify，然后如果我需要Vuetify（很少发生）和Typescript不支持的组件;我使用require例如：

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

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

Answer 5

我通过为这些组件禁用 eslint 和 tslint 设法在打字稿环境中使用基于 js 的组件：

我将所有基于 js 的组件都放到了项目的 /js/ 目录中。
我将 ignorePatterns 添加到 .eslintrc.js：

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

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

在基于打字稿的项目中使用Vue js组件

5 个答案: