您好,欢迎来到二三娱乐。
搜索
您的当前位置:首页在Vue中使用TypeScript

在Vue中使用TypeScript

来源:二三娱乐

TypeScript提供的类型注解在多人前端项目中,能显著提高开发效率、协作性和可维护性。

假定你已经使用 vue-cli 初始化了一个项目。

引入 TpyeScript 的相关依赖。

npm install typescript ts-loader --save-dev
添加tsconfig.json

重命名 ./src/main.js 文件 为 ./src/main.ts,修改 webpack 入口文件为 ./src/main.ts,添加文件扩展.ts.tsx

修改webpack配置

webpack 的配置文件中添加 TypeScript 加载器 ts-loaderappendTsSuffixTo: [/\,vue$/] 选项用于提取 .vue单文件组件中的TS代码。

webpack配置

现在还需要在 src 目录下配置 Vuevue-shims.d.ts 声明文件,ts-loader 才能知道Vue 是什么。

添加vue-shims.d.ts
npm i -S vue-property-decorator

Vue Property Decorator提供了7个装饰器(@Emit@Inject@Model@Prop@Provide@Watch@Component),实现像原生 JavaScript class 那样声明组件。别忘了在 <script>标签中添加 lang=ts

class声明组件

Copyright © 2019- yule263.com 版权所有 湘ICP备2023023988号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务