在基于 typescript 的项目中使用 Vue js 组件

Question

I googled a lot to no avail and it seems I'm missing something obvious but still... I've created a project in a following stack : Vue+TS+Webpack+ASP.NET Core. Now I'm facing a cruel reality - there are literally dozens of good Vue components, but very few of them have something like *.d.ts attached. Is there some relatively easy (rewriting it in TS IMHO is not an easy solution) way to use JS-based Vue components in technology stack mentioned above?

PS: If you know nice modal dialog Vue component with out-of-the-box ts support let me know please :) Though of course I prefer to hear about more general solution.

Answer 1

I may not understand the whole situation but, enabling JS usage in webpack should be enough I guess.

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

Answer 2

Vuejs 2.5+ ships with official type declarations for TypeScript. You would have to install ts-loader , update webpack and ts config and write components like these

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

some sample Vue component

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

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

If you use webpack and/or single component file, you would need additional settings as well.

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

in case of single file component, you would need to add this file at root sfc.d.ts so that TypeScript can recognize this as module

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

You can read more about it here

Answer 3

As far as I have seen, props can't get typed with typescript, instead when you require them you can validate them as shown at vue prop validation so just search for common vue components.

By the way I'm sure you've already seen the vue typescript support .

About components, I think the best is to choose a framework like vuetify or bootstrap-vue where you will find a group of components following the same style

Answer 4

I use Vuetify which supports typescript, and then if I need components which isn't supported by Vuetify(which rarely happens) and by Typescript; I use require for instance:

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

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

Answer 5

I managed to use js-based components in a typescript environment by disabling eslint and tslint just for those components:

1. I put all my js-based components into /js/ directory in my project.

2. I added ignorePatterns to .eslintrc.js :

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

3. I added exclude to tsconfig.json :

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

That made it work.

Here is my full configs for reference:

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