关键字
typescript
,vue3.0
为什么使用typescript
typescript
就是在JavaScript
的基础上,增加了一套类型定义系统。这有助于前端开发写出更稳健的代码。
以下示例代码,基于vue3.0
。
js
版本
import { reactive } from 'vue'
export default {
setup() {
const state = reactive({
msg: ''
})
const todos = reactive([])
function add() {
let n = {
status: 1,
text: state.msg
}
todos.push(n)
console.log(todos)
}
return {
state,
add
}
}
}
ts
版本
import { reactive } from 'vue'
interface node {
status: number,
text: string
}
export default {
setup() {
const state = reactive({
msg: ''
})
const todos: Array<node> = reactive([])
function add() {
let n: node = {
status: 1,
text: state.msg
}
todos.push(n)
console.log(todos)
}
return {
state,
add
}
}
}
总结
使用了更稳健的typescript
,可以减少大量运行时错误
,减少大量的bug
。
顺带一提,vue3.0
带来了巨大的改变,vue2
不支持数组下标响应式的问题,也被解决了。