使用 Typescript 在 Vue 数据对象中设置数据类型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47810218/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set data Type in Vue data object with Typescript
提问by Plastic
I'm currently using Vue.js with Typescript in a webpack project.
我目前在 webpack 项目中使用 Vue.js 和 Typescript。
As indicated in the Recommended Configurationin my tsconfig.jsonI have:
如我的推荐配置中所示，tsconfig.json我有：
"strict": true,
"strict": true,
Inside one of my component i have:
在我的一个组件中，我有：
declare interface Player {
cod: string,
param: string
}
export default Vue.extend({
name: 'basecomponent',
data() {
return {
players: []
};
},
created()
let self = this
axios.get('fetch-data')
.then((response) => {
let res: Players[] = response.data;
for(let i = 0; i < res.length; i++){
self.players.push(res[i]);
}
})
.catch((error: string) => {
console.log(error);
});
},
});
but when I try to compile i get:
但是当我尝试编译时，我得到：
error TS2345: Argument of type 'Player' is not assignable to parameter of type 'never'.
Cause I believe players: []has never[]type.
因为我相信players: []有never[]类型。
My question is: how can I infer type Vue data object properties??
我的问题是：如何推断类型 Vue 数据对象属性？
回答by Michael Wilson
To add to Joshua's answer, you may want to declare the type of players inline so your code doesn't get too verbose as your data gets larger.
要添加到 Joshua 的答案中，您可能需要声明内联玩家的类型，这样您的代码就不会随着数据变大而变得过于冗长。
data() {
return {
players: [] as Player[]
};
},
another option:
另外一个选择：
data() {
return {
players: new Array<Player>()
};
},
回答by Joshua Hansen
Your datamethod has an undeclared return value.
您的data方法有一个未声明的返回值。
If you supply one, TypeScript will know what to expect with players.
如果您提供一个，TypeScript 将知道对players.
You just need to expand the data() {line.
您只需要扩展该data() {行。
e.g.:
例如：
data() {
return {
players: []
};
},
needs to become:
需要变成：
data() : {
people: Array<any>, // if possible, replace `any` with something more specific
} {
return {
players: []
};
},
Tada! players is now type Array of any.
多田！玩家现在是任何类型的数组。
回答by Ore4444
This should work:
这应该有效：
declare interface Player {
cod: string,
param: string
}
declare interface BaseComponentData {
players: Player[]
}
export default Vue.extend({
name: 'basecomponent',
data(): BaseComponentData {
return {
players: []
};
},
})
回答by Илья Карев
Type assertion using the '<>' syntax is forbidden. Use the 'as' syntax instead.
禁止使用“<>”语法进行类型断言。请改用“as”语法。
It will look like this:
它看起来像这样：
players: [] as Player[]
回答by Ahmad
I found another method that is more close to the typical syntax, while keeping the code short.
我找到了另一种更接近典型语法的方法，同时保持代码简短。
data() {
return new class {
players: Player[] = []
}();
},
