TypeScript 是 JS类型的超集，并支持了泛型、类型、命名空间、枚举等特性，弥补了 JS 在大型应用开发中的不足。在我们自己单独学习 TS时，时常感觉很多知识点还是比较好理解的，但要和框架结合的话，感觉就有点糟，因为我使用Vue比较多，这里就介绍Vue 框架与 TS的结合。
下面就结合我的经验，简单介绍一下如何在Vue中平滑的从JS过渡到TS，在各位大佬面前班门弄斧了。（想了解的更具体的话，可以参考官方文档，官方文档就是最好的入门手册）
通过官方脚手架Vue-CLI构建，tips：如果没有安装就先下载安装
npm install --global @vue/cli
最新的Vue-CLI工具允许开发者使用TS集成环境创建新项目。只需运行vue create myapp，然后，命令行会要求选择预设，使用箭头键选择 Manually select features。
接下来，只需确保选择了 TypeScript 和 Babel 选项即可，自2020年9月更新Vue3.0之后，目前还提供Vue项目版本的选择
最后配置其余设置，之后就会显示安装依赖并设置项目，只需坐等
安装完成打开项目,集成 TS 后的Vue项目目录结构大致如下所示：
|--TS - Vue
|-- .browserslistrc # browserslistrc 配置文件 (用于支持 Autoprefixer)
|-- .eslintrc.js # eslint 配置
|-- .gitignore
|-- babel.config.js # babel-loader 配置
|-- package-lock.json
|-- package.json # package.json 依赖
|-- postcss.config.js # postcss 配置
|-- README.md
|-- tsconfig.json # TS 配置文件（主要用于指定待编译的文件和定义编译选项）
|-- vue.config.js # vue-cli 配置
|-- public # 静态资源
| |-- favicon.ico # favicon图标
| |-- index.html # html模板
|-- src
| |-- App.vue # 入口页面
| |-- main.ts # 入口文件 加载组件 初始化等
| |-- shims-tsx.d.ts #ts配置文件（允许.tsx 结尾的文件，在 Vue 项目中编写 jsx 代码）
| |-- shims-vue.d.ts #ts配置文件（主要用于TS识别.vue 文件，TS默认并不支持导入 vue 文件）
| |-- assets # 主题 字体等静态资源 (由 webpack 处理加载)
| |-- components # 全局组件
| |-- router # 路由
| |-- store # 全局 vuex store
| |-- views # 所有页面
|-- tests # 测试
先了解一下vue 中使用 TS 非常好用的几个库文件:
import Component from 'vue-class-component'
import { Vue, Component, Inject, Provide, Prop, Model, Watch, Emit, Mixins } from 'vue-property-decorator'
import { Module, VuexModule, Mutation, Action, MutationAction, getModule } from 'vuex-module-decorators'
import { State, Getter, Action, Mutation, namespace } from 'vuex-class'
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
@Component
export default class Test extends Vue {
}
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
@Component
export default class Test extends Vue {
private name: string;
}
@Prop({ default: false }) private first!: boolean;
@Prop({ default: true }) private second!: string;
@Prop({ default: "" }) private num!: number;
tips：
public getSome(): void {
//函数主体
}
@Watch("totalPrice", { immediate: true，deep: true })
private onTotalPriceChange(newVal:number, oldVal:number) {
//监听执行函数主体
}
tips:
public get allPrice() {
// 计算逻辑主体
return + “最后结果”
}
public created(): void {
console.log('created');
}
public mounted():void{
console.log('mounted')
}
import { Vue, Component, Emit } from 'vue-property-decorator'
@Component
export default class newComponent extends Vue {
count = 0
@Emit()
addToCount(n: number) {
this.count += n
}
@Emit('reset')
resetCount() {
this.count = 0
}
@Emit()
returnValue() {
return 10
}
@Emit()
onInputChange(e) {
return e.target.value
}
@Emit()
promise() {
return new Promise(resolve => {
setTimeout(() => {
resolve(20)
}, 0)
})
}
}
tips:
import Vue from 'vue'
import Component from 'vue-class-component'
import { State, Getter, Action, Mutation, namespace } from 'vuex-class'
const someModule = namespace('path/to/module')
@Component
export class MyComp extends Vue {
@State('foo') stateFoo
@State(state => state.bar) stateBar
@Getter('foo') getterFoo
@Action('foo') actionFoo
@Mutation('foo') mutationFoo
@someModule.Getter('foo') moduleGetterFoo
// 如果省略参数，请使用属性名称， 对于每个状态/getter/action/mutation类型
@State foo
@Getter bar
@Action baz
@Mutation qux
created () {
this.stateFoo // -> store.state.foo
this.stateBar // -> store.state.bar
this.getterFoo // -> store.getters.foo
this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })
this.mutationFoo({ value: true }) // -> store.commit('foo', { value: true })
this.moduleGetterFoo // -> store.getters['path/to/module/foo']
}
}
今天的分享到此结束，希望对您有所帮助，如果文章有错误或者有什么相关的建议，请直接私信联系我，谢谢！！！此外你如果感觉喜欢请点击进行关注，你的观看是我最大的动力，以后会不定时的分享学习心得，敬请期待(*￣︶￣)(*￣︶￣)(*￣︶￣)
——来自一个程序猿小白的自我成长 && 学习分享