> Foreword: This article is TypeScript series is intended to use pieces of time or re-ponder Quick Start Typescript Typescript leak filled on the basis of official api, plus some thoughts daily use if interested - welcome attention.... follow-up continued to launch article.
Article list:
- "a" lying TypeScript basic types
- "two" lying Typescript enumeration
- "three" lying Typescript Interface
- "Four" lying Typescript generic
- "Five" lying Typescript function
- "Six" lying Typescript class
- "Seven" Westward Typescript react class
- "eight" Westward Typescript react function
- ......
The directory structure:
- basic properties of the interface object
- interfaces declarative way
- indexable type of interface
- Interface Interface inheritance
- interface
Interface type is a very powerful type definition, is often used in everyday code to the function of a system to understand he is very important.
The basic properties of interface object ####
property of normal interface object attributes, optional attributes, read-only property, the following code:
`` `
interface List {
Readonly ID: Number; // can not be modified, read only
name? : string; // there may be no
data: string; // must be
eat (): void; // can also declare a function
}
let a: List = {
id: 1,
data: 'msg'
}
a.id = 2;
// 报错: Cannot assign to 'id' because it is a constant or a read-only property.
let b: List = {
id: 1
}
// Type '{ id: number; }' is not assignable to type 'List'.
// Property 'data' is missing in type '{ id: number; }'.
// 报错: 缺少 data 属性
```
#### interfaces declarative
statements and use interface is particularly simple, recalls the statement by way of the first article.
(Variables / functions): type // [type as the data type above]
This type may be a common type, the interface may be an interface, probably used in three ways as follows:.
`` `
Interface List {
Data: String;
}
// declare an object
let obj: List = {data: ' msg '}
// declare function parameters, return values
function A (X: List): List {
return X;
}
// class implements an interface, similar to the java language, interface description in a way to achieve it in the class
// this way rarely use him, but you can look at the
class the implements List {Crazy
constructor () {}
the Data: String ;
}
`
daily use, we often have some nested objects such as interfaces to get the background format is like this.
`
the let RES = {
subject: 'Math',
Detail: [{
ID:. 1,
Data : 'Mathematics'
}]
}
`` `
. is a very flexible interface properties can be multiply nested we define the following manner,.
` ``
interface List {
ID: Number;
Data: String;
}
interface LearnList {
Subject: String,
Detail: List [];
}
the let RES: LearnList = {
Subject: 'math',
Detail: [{
ID:. 1,
Data: 'Mathematics'
}]
}
`` `
If so, there will be an interesting place as a function parameter declarations. We directly by value, then there will be error prompt. How to solve this error prompt? In without modifying the interface declarations?
` ``
Function transformData (Data: LearnList) {
return Data;
}
transformData ({
Subject: 'math',
XXX: 'sss', // error, one more attribute
Detail: [{
ID:. 1,
Data: 'Mathematics'
}]
} )
`` `
Resolution:
1. the value assigned to an object.
here involves a type compatibility, and a later article will talk about in detail to talk about here is the cache all the attributes he has LearnList declared objects inside. that cache compatible LearnList declared objects, it can be assigned to the object cache LearnList statement.
`` `
const cache = {
subject: 'the Math',
xxx: 'sss', // error, one more property
detail: [ {
ID:. 1,
Data: 'Mathematics'
}]
};
transformData (cache) // no error
`` `
2. Type assert
this feature is also often used to learn. parameters passed to the back of directly calling as LearnList, tell the editor, we clearly know that this object is LearnList, please around over this check
`` `
transformData ({
Subject: 'math',
XXX: 'sss',
Detail: [{
ID:. 1,
Data: 'Mathematics'
}]
} LearnList AS)
` ``
3. string index signature.
See below
#### index type interfaces can
be seen from the above problems, the original object is declared in more than one property on the error. Some of us may be more flexible on the scene into the reference parameters, in addition to some of the parameters we set, and still uncertain will pass any other parameters coming in, can use the "indexable type Interface"
`` `
interface List {
ID: Number;
Data: String;
}
interface LearnList {
Subject: String,
Detail: List [];
[X: String] : any; // can be used to index any string type declared objects, any type of value
}
transformData ({
subject: 'math',
XXX: 'sss',
Detail: [{
ID:. 1,
Data: 'Mathematics'
}]
})
`
this can also solve the above problems indexable type under the following interfaces simply sort.
1. string index interface
`
interface the StringArray {
[X: string]: string; // represents It can be any string index object to obtain a string value
}
`
2. the digital interface index
`
Interface the StringArray {
[X: number]:. String; // with an arbitrary number to index object will get a string type of the array is actually our
}
`
3. mix two kinds of indices
`
interface {the StringArray
[X: string]: string;
[Z: Number]: string;
}
the let X: = {the StringArray
. 1: '2323',
'2': '23423'
} // string index may be used can also be used digital index
`` `
Note points: whether numeric or string index index, type the following index value must be a subtype of the above index because we have already been specified in any of the index values are string, this time either. value becomes the number of members will be given.
`` `
interface the StringArray {
[X: String]: String;
[Z: number]: String;
Y: 22 is; // given: Property 'y' of type ' 22' is not String type index to ASSIGNABLE 'String'
}
interface the StringArray {
[X: string]: string;
[Z: Number]: Number; // error because the string is not compatible Number
}
interface the StringArray {
[X: string]: the any;
[Z: Number]: Number; // normal · any compatible Number
}
`` `
Interface #### interface inheritance
. Inheritance class is the same syntax as directly see the code
`` `
interface Point {
X: Number;
}
// inherited a direct interface to the extends
interface the extends the Draw Point {
Y: Number;
}
interface the Shape {
Draw (): void;
}
A plurality of inherited interfaces // comma separated
// same, he can be iteratively the extends
interface Human the extends the Draw, the Shape {}
// must have all of the properties inherited interfaces
the let Peen: Human = {
X:. 1,
Y:. 1,
Draw: () => {},
}
`` `
#### interface
In fact, this one is relative to the javascript, the introduction of some of the properties of java, such implements. This is a fact rarely used in actual projects, but still simple to talk about.
Precautions:
1. Interface description only the public part of the class, not private members described
`` `
interface Point {
X: Number;
Draw (): void;
}
class Draw implements Point {
constructor() {
}
Private X: Number; // given Class 'the Draw' the implements interface incorrectly 'Point' Property 'X' in Private IS type 'the Draw' But Not in type 'Point'..
Draw () {}
}
`` `
2. when the class implements the interface, the interface must be implemented in all of the properties of
`` `
interface Point {
X: Number;
Draw (): void;
}
class Draw implements Point {
constructor() {
}
X: Number;
Draw () {} // If this line is gone, an error will
}
`
constructor class 3. The interface is not constrained
`
interface Point {
X: Number;
Draw (): void;
new (x: number): void ; // error do not write this.
}
class Draw implements Point {
constructor(x: number) {
this.x = x;
}
x: number;
draw() { }
}
```
#### summary
This article is cited interface of some common usage. In fact, in practice, we will use a more convenient way to use him, such as Partial <interface> let all made optional parameters, or use cross-type union type interface allows more flexible. adhering to the principle of an article not too long. ended here today. I am interested can focus on long-term serial ~
Finally,
welcome attention to the "front-end Gaga" seriously study the front end, to be a professional technical person ...
