在Vue中使用TypeScript

96
勿以浮沙筑高台
2017.10.20 17:46* 字数 283

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

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

引入 TpyeScript 的相关依赖。

npm install typescript ts-loader --save-dev

添加项目的根目录下添加TypeScript配置文件 tsconfig.jsontsconfig.json 文件中指定了用来编译这个项目的根文件和编译选项。更多编译选项。

添加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

添加辅助库vue-property-decorator

npm i -S vue-property-decorator

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

class声明组件
Vue
Web note ad 1