首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue中使用TS相关配置

vue项目中如何使用TypeScript相关配置

2023-11-22 11:33:28 作者：妮子果酱

这篇文章主要给大家介绍了关于vue项目中如何使用TypeScript相关配置的相关资料,typescript在开发过程中广泛被应用,在这里总结下项目中ts的应用,文中通过代码介绍的非常详细,需要的朋友可以参考下

一、为什么要用typescript

TypeScript简单介绍：

是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JavaScript，所以 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。
TypeScript 是 JavaScript 的超集，这意味着他支持所有的 JavaScript 语法。并在此之上对 JavaScript 添加了一些扩展，如 class / interface / module 等。这样会大大提升代码的可阅读性。

总结优势：

静态类型检查：类型校验，能够避免许多低级代码错误；
IDE 智能提示：使用一个方法时，能清楚知道方法定义的参数和类型和返回值类型；使用一个对象时，只需要.就可以知道有哪些属性以及属性的类型；
代码重构：经过不停的需求迭代，代码重构避免不了，在重构时，如果前期有清晰和规范的接口定义、类定义等，对于重构帮助很大；
规范性和可读性：类似于强类型语言，有了合理的类型定义、接口定义等，对于代码实现的规范性和可读性都有很大提高，不然搜索整个项目这个方法在哪里调用、怎么定义等。个人认为最有价值点：写代码前，会先构思功能需求的整体代码架构。

二、vue+TpyeScript项目迁移

1.npm下载依赖包

npm install --save-dev typescript webpack webpack-cli ts-loader css-loader vue vue-loader vue-template-compiler

2.创建tsconfig.json

命令：

tsc --init

{
    "compilerOptions": {
        "outDir": "./built/",
        "sourceMap": true,
        "strict": true,
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5",
        "skipLibCheck": true,
        "esModuleInterop": true,
        "experimentalDecorators": true
    },
    "include": [
        "./src/**/*"
    ]
}

3.webpack.base.conf.js 中的配置

resolve: {
      extensions: ['.js', '.vue', '.json', 'ts', 'tsx'], // 新增了'ts', 'tsx'
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
      }
    },
    module: {
      rules: [
        {
          test: /\.ts$/,  // 用于加载项目中的ts文件
          exclude: /node_modules/,
          enforce: 'pre',
          loader: 'tslint-loader'
        },
        {
          test: /\.tsx?$/, // 用于加载项目中的tsx文件
          loader: 'ts-loader',
          exclude: /node_modules/,
          options: {
            appendTsSuffixTo: [/\.vue$/],
          }
        }]

4.配置package.json

"scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

5.重命名main.js

将main.js重命名为main.ts
在webpack.base.conf.js中修改入口的文件名 entry: {app: ‘./src/main.ts’}

6.在main.ts同级目录下添加shims-tsx.d.ts（如果没有用tsx 语法就不用）和 shims-vue.d.ts

 // vue/cli中的shims-tsx.d.ts
  // 作用: 为 JSX 语法的全局命名空间
  // 这是因为基于值的元素会简单的在它所在的作用域里按标识符查找
  // 此处使用的是无状态函数组件的方法来定义, 当在tsconfig内开启了jsx语法支持后, 其会自动识别对应的.tsx结尾的文件
  import Vue, { VNode } from 'vue'
  declare global {
    namespace JSX {
      // tslint:disable no-empty-interface
      interface Element extends VNode {}
      // tslint:disable no-empty-interface
      interface ElementClass extends Vue {}
      interface IntrinsicElements {
        [elem: string]: any
      }
    }
  }

  // vue/cli中的shims-vue.d.ts
  // 作用：为项目内所有的 vue 文件做模块声明, 毕竟 ts 默认只识别 .d.ts、.ts、.tsx 后缀的文件
  import Vue from "vue";
  import VueRouter, { Route } from "vue-router";

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

  declare module "vue/types/vue" {
    interface Vue {
      $router: VueRouter; // 这表示this下有这个东西
      $route: Route;
      $https: any;
      $urls: any;
      $Message: any;
      $Modal: any;
    }
  }

7.改造 .vue文件，将vue中script切换为<script lang="ts">；

8.改造.js文件，修改为ts语法，定义类型等

总结

到此这篇关于vue项目中如何使用TypeScript相关配置的文章就介绍到这了,更多相关vue中使用TS相关配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！