【大前端之路】一个稳健的typescript & vue3 的示例

关键字

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不支持数组下标响应式的问题，也被解决了。