TS(Vue)中数组的接口类型使用

首先出现的问题是，我需要一个数组list，数组中每一项需要是key：value形式的对象，但是当我需要新增一项到数组中时候，对于每一项即对象的类型出现问题，问题如下：

这是因为我定义了list类型为数组，但是并没有对其中的对象的属性进行类型定义。

这里就需要使用TS的接口，我们需要自定义一下list数组类型，使用接口就可以自定义list中属性的类型。
先定义接口：

interface Iitem {
    key: string;
    value: string;
}

在data中定义list，list类型就为定义的Iitem接口类型，而他本身还是个数组。
那原本错误的代码修改如下：

import Vue from "vue";
interface Iitem {
    key: string;
    value: string;
}
export default Vue.extend({
    name: "param-set",
    props: {
        params: {
            type: Object,
            default: [],
        },
    },
    data() {
        const list: Iitem[] = [];
        return {
            itemList: JSON.parse(JSON.stringify(this.params)),
            list,
            key: "",
            value: "",
        };
    },
    methods: {
        callback() {
            this.$emit("callback");
        },
        addBtn() {
            const newInfo: Iitem = {key: this.key, value: this.value};
            if (this.key) {
                this.list.push(newInfo);
            }
            this.key = "";
            this.value = "";

        },
        del(index: number) {
            this.list.splice(index, 1);
        },
    },
});

顺便提一下，vue中data需要在return中注册list，这为啥需要return包含呢？

这是在编写组件时候的写法，而组件就是一个可复用的vue的实例。这也就意味着如果你的data是一个普通的对象，那么所有复用这个实例的组件都将引用同一份数据，这就造成了数据污染！

这个时候如果我们将data封装成一个函数，我们在实例化组件的时候只是调用了这个函数生成的数据副本，这就避免了数据污染。

关注我吧

关注「前端一起学」公众号 ，看着项目进阶学习，让我们一起学前端，一起进步。