645 阅读 2020-07-13 10:24:02 上传
以下文章来源于 西语语言学工作坊
前言
都2020了，作为目前最热门的前端语言且号称未来的TypeScript(文中简称ts)，本文菜头同学带领大家在项目中用上ts，趁着在家闲的慌，赶紧动起来吧。下面我将展示如何使用Vue CLI 构建一个Vue + TypeScript应用
TypeScript
为什么要将TypeScript 和 Vue 集成呢？因为TypeScript 有以下几个优势：
① 可读性：TypeScript 是 JavaScript 的超集，这意味着他支持所有的 JavaScript 语法。并在此之上对 JavaScript 添加了一些扩展，如interface等。这样会大大提升代码的可阅读性
② 静态类型检查：静态类型检查可以避免很多不必要的错误，不用在调试的时候才发现问题。
③ 代码提示：ts 搭配 vscode，代码提示非常友好
④代码重构：例如全项目更改某个变量名（也可以是类名、方法名，甚至是文件名[重命名文件自动修改的是整个项目的import]），在JS中是不可能的，而TS可以轻松做到。
这些就是使用ts的好处（包括但不限于此），当然javascript也有它的好处，只不过程序员不就是要不断地学习心的知识吗？下面我们就来一起从构建一个vue+ts的项目开始
初始化项目初始化vue-cli项目，安装typescript，ts-loader，tslint，tslint-loader，tslint-config-standard，vue-property-decorator.上面只有typescript，ts-loader是必须的，其余的包用于增强开发体验。
Vue create ts-vue
安装完后，根据提示操作
cd ts-vuenpm run serve
在浏览器打开地址 "http://localhost:8080/"，可以看到项目已经跑起来啦
修改配置增加tsconfig.json，下面是我的配置(值得注意的是，建议开启严格模式，也就是下面的strit为true这个选项，这样才能严格的推断Vue中的property)：
{"compilerOptions": {// 编译目标平台"target": "es5",// 输出目录"outDir": "./dist/",// 添加需要的解析的语法，否则TS会检测出错。"lib": ["es2015", "es2016", "dom"],// 模块的解析"moduleResolution": "node",// 指定生成哪个模块系统代码"module": "esnext",// 在表达式和声明上有隐含的any类型时报错"noImplicitAny": false,// 把 ts 文件编译成 js 文件的时候，同时生成对应的 map 文件"sourceMap": true,// 允许编译javascript文件"allowJs": true,// 指定基础目录"baseUrl": "./",// 启用装饰器"experimentalDecorators": true,// 移除注释"removeComments": true,"pretty": true,// 是相对于"baseUrl"进行解析"paths": {"vue": ["node_modules/vue/types"],"@/*": ["src/*"]}},"include": ["src/**/*"],"exclude": ["node_modules"]}
在webpack.base.conf.js中需要配置对ts和tsx的支持(加了注释的地方是新增的或需要修改的配置)：
base: {entry: {...app: resolve('src/main.ts') // 把main.js改为main.ts}...resolve: {...extensions: ['vue', '.js', '.ts']}module: {rules: [...,{ // 加入对文件的ts识别test: /\.ts$/,exclude: /node_modules/,enforce: 'pre',loader: 'tslint-loader'}, {test: /\.tsx?$/,loader: 'ts-loader',exclude: /node_modules/,options: {appendTsSuffixTo: [/\.vue$/],}}]}
在src目录下创建sfc.d.ts（用来声明全局变量、class、module、function、命名空间） 我们在这里主要是让ts识别.vue文件、window对象和一些module
具体declare的使用方式请看这里
/*** 告诉 TypeScript *.vue 后缀的文件可以交给 vue 模块来处理* 而在代码中导入 *.vue 文件的时候，需要写上 .vue 后缀。* 原因还是因为 TypeScript 默认只识别 *.ts 文件，不识别 *.vue 文件*/declare module "*.vue" {import Vue from 'vue'export default Vue}/*** 告诉 TypeScript window是个全局对象，直接可用，这样就不会在window.xx = 123时报错*/declare var window: any/*** 引入部分第三方库/自己编写的模块的时候需要额外声明文件* 引入的时候，需要使用类似 import VueLazyLaod from 'vue-lazyload' 的写法*/declare module 'vue-lazyload'declare module '@zz/perf/vue'declare module 'raven-js'declare module 'raven-js/plugins/vue'
将main.js重命名为main.ts， 并在webpack.base.conf.js中修改路径名
entry: {app: './src/main.ts'}
经过上面的配置，基本的开发环境就搞定了，接下来就可以使用ts写你的代码了，不需要做多少改造，只需要在你原来书写javascript标签上声明"lang=ts",如下提供一些使用示例:
组件声明
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';@Componentexport default class Test extends Vue {}
data 对象
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';@Componentexport default class Test extends Vue {private name: string;}
Prop 声明
@Prop({ default: false }) private isCollapse!: boolean;@Prop({ default: true }) private isFirstLevel!: boolean;@Prop({ default: "" }) private basePath!: string;
!: 表示一定存在，?: 表示可能不存在。这两种在语法上叫赋值断言
@Prop(options: (PropOptions | Constructor[] | Constructor) = {})
PropOptions，可以使用以下选项：type，default，required，validator
Constructor[]，指定 prop 的可选类型
Constructor，例如 String，Number，Boolean 等，指定 prop 的类型method
js 下是需要在 method 对象中声明方法，现变成如下public clickFunc(): void {console.log(this.name)console.log(this.msg)}
生命周期函数
public created(): void {console.log('created');}public mounted():void{console.log('mounted')}
computed 计算属性
public get allname() {return 'computed ' + this.name;}allname 是计算后的值，name 是被监听的值
Watch 监听属性
@Watch("$route", { immediate: true })private onRouteChange(route: Route) {const query = route.query as Dictionary; if (query) {this.redirect = query.redirect;this.otherQuery = this.getOtherQuery(query);}}
以上就是一些vue项目开发中常用的东西进行的ts的示例！
总结
到这里基本上跟着一步步配置下来并且正常运行起来的话，恭喜你，你已经成功构建了一个使用ts开发的vue工程，既然都做到这里了何不动起你的手指做一个完整功能的项目出来呢，等疫情过去了你也多了一项技能，动起来吧！我相信湖北和你会一起变好的！！！
