typescript属于静态类型(static typing),一旦定义了类型,就不可以改变。
在vue中使用会帮助我们更快的查找错误,初步学习会有点点头疼,但是熟悉以后会提高代码质量以及工作效率。
安装
Vue CLI 3 可以使用 TypeScript 生成新工程。创建方式:
// 1. 如果没有安装 Vue CLI 就先安装
npm install --global @vue/cli
// 创建一个新工程,并选择 "Manually select features (手动选择特性)" 选项
vue create my-project-name
复制代码
- 选择手动
- 选择typescript(按下空格键选中)
然后继续下去就好了...
基础使用
组件选项方式
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
// 类型推断已启用
....
})
export default {
// 不会有类型推断,因为不确定这个vue组件的选项
....
}
</script>
复制代码
类的方式
- Component组件使用
import Vue from 'vue'
import Component from 'vue-class-component' // 如果没有的话需要自己下载哦
// @Component 修饰符注明了此类为一个 Vue 组件
@Component({
navBar,siderBar,...
})
export default class MyComponent extends Vue {
}
复制代码
- 定义变量
export default class MyComponent extends Vue {
// 初始数据可以直接声明为实例的 property
message: string = 'Hello World!'
title: string = 'Vue'
}
复制代码
- 计算属性
export default class MyComponent extends Vue {
get count: number () {
return this.num * 2
}
}
复制代码
- 方法使用
export default class MyComponent extends Vue {
// 组件方法也可以直接声明为实例的方法
onClick (): void { // void表示该函数没有返回值
window.alert(this.message)
}
}
复制代码
- 标注 Prop
import Vue, { PropType } from 'vue'
interface IUserInfoProp {
title: string,
okMessage: string,
cancelMessage: string
}
const Component = Vue.extend({
props: {
userInfo: {
type: Object as PropType<IUserInfoProp>, // 重点哦
require: true
}
}
})
如果大家想学习前端方面的技术,我把我多年的经验分享给大家,还有一些学习资料,免费领取V:xxy12311007