Interface definition
interface List {
id: number;
name: string;
}
interface Result {
data: List[];
}
function render(result: Result) {
result.data.forEach(value => {
console.log(value.id, value.name);
})
}
let result = {
data: [
{
id: 1, name: 'a' , sex: "male"},
{
id: 2, name: 'b' },
{
id: 3, name: 'c' },
]
};
render(result);
If an object literal is passed in, ts will perform type checking on additional fields, and sex will report an error.
render({
data: [
{
id: 1, name: 'a' , sex: "male"},
{
id: 2, name: 'b' },
{
id: 3, name: 'c' },
]
})
There are three ways to bypass this check:
The first one: assign the above value to a variable and then pass it in
Second: Use type assertion (explicitly tell the compiler that our type is Result, so that the compiler will bypass the check)
render({
data: [
{
id: 1, name: 'a' , sex: "male"},
{
id: 2, name: 'b' },
{
id: 3, name: 'c' },
]
} as Result);
or use <Result>, it is recommended to use as, which will cause ambiguity in react
render(<Result>{
data: [
{
id: 1, name: 'a' , sex: "male"},
{
id: 2, name: 'b' },
{
id: 3, name: 'c' },
]
});
Third method: Use string index signature: Use any string to index List
interface List {
id: number;
name: string;
[x: string]: any;
}
Interface member properties
Optional attributes
interface List {
id: number;
name: string;
// [x: string]: any;
age?: number;
}
interface Result {
data: List[];
}
function render(result: Result) {
result.data.forEach(value => {
console.log(value.id, value.name);
if(value.age) {
console.log(value.age);
}
})
}
let result = {
data: [
{
id: 1, name: 'a' , sex: "male"},
{
id: 2, name: 'b' },
{
id: 3, name: 'c' },
]
};
render(result);
Read-only attribute: No modification allowed
interface List {
readonly id: number;
name: string;
// [x: string]: any;
age?: number;
}
interface Result {
data: List[];
}
function render(result: Result) {
result.data.forEach(value => {
console.log(value.id, value.name);
if(value.age) {
console.log(value.age);
}
value.id++; // 无法为“id”赋值，因为它是只读属性。
})
}
let result = {
data: [
{
id: 1, name: 'a' , sex: "male"},
{
id: 2, name: 'b' },
{
id: 3, name: 'c' },
]
};
render(result);
When you are not sure how many properties there are in an interface, you can use an indexable type interface, which can be indexed with numbers and strings.
Numerically indexed interfaces:
interface StringArray {
[index: number]: string;
}
let chars: StringArray = ["A", "B"];
Interface with string index:
interface Names {
[x: string]: string;
// y: number // 类型“number”的属性“y”不能赋给“string”索引类型“string”。
// 混用
[y: number]: string;
}