TypeScript是什么?
官网上说TypeScript是JavaScript类型的超集,并且可以编译为纯JavaScript。在任何浏览器,集群(服务器),操作系统上面都可以运行,而且还开源。
我的认知
TypeScript 是 JavaScript 的强类型版本。应用于前段时间通过babel等语言转换脚手架转换为适应任何浏览器的JavaScript语言。而且他是 JavaScript 的超集,这意味着他支持所有的 JavaScript 语法,能让前端入门的阶梯会低很多。当然他还会有自己一些增加的新语法 例如class / interface / module,更面向对象,阅读性会更加的棒。
为什么要使用TypeScript?
先说说Js的劣势,就是弱类型!在编码的时候,没有明确声明某个属性的类型,写着写着代码就会连自己都不知道究竟最初设想的是什么类型。下面有一个例子说明一下
var a = 12
a = '12'
a = a + 1
console.log(a) // 121 我期望a是13,但最终的答案不是我想要的
这就是弱类型的劣势,a可以被任何类型的值赋值,这样就很容易造成一些莫名其妙的错误。
那typescript怎么写呢?下面依然是例子
let a : number = 12
a = '12' //当你这样赋值的时候你的编译器已经报错了 TS2322: Type '0' is not assignable to type 'string'.
ts的语言不允许你原来是number的值赋一个字符串,这样的约束可以让错误在代码编写的时候就可以被发现了!
开始使用现在项目使用TypeScript
我们的部分前端项目也正好在使用TypeScript,省去了很多的配置,但我们的vue还是2.0,对TypeScript的支持不够完善,所以我引入了装饰器的写法,让vue更加趋向类,增强可读性。
我使用的是 vue-property-decorator
import { Vue, Component, Watch } from 'vue-property-decorator';
那么来看看用typeScript+vue-property-decorator和原有vue写法的区别吧~ 因为公司内部代码不方便展示,还是手写一个简单例子作为对比吧!
原来的写法例子
export default {
components: {
myInput
},
data () {
return {
test: 0
}
},
watch: {
test: {
handler(n,o){
console.log(n)
},
immediate: true,
deep: true
}
},
computed: {
getDate: {
get: () => {
return this.test
},
set: val => {
this.test = val
}
}
},,
methods: {
handleClick () {
this.test = 3
}
},
mounted () {
}
}
typescript改造的写法
@Component({
components: {
myInput
}
})
export default class Test extends Vue {
test: number = 0; //类型声明
//computed 创建日期Computed
get testComputed() {
return this.test
}
set testComputed(val) {
this.test = val
}
//watch
@Watch('test', {deep: true})
testOnChange(n: number, o: number) {
console.log(n)
}
//methods
handleClick(val: number) {
this.test = 3
}
private mounted() {
}
}
文章作者: danny