当前位置：网站首页>Typescript foundation interface interface

Typescript foundation interface interface

2022-07-20 14:19:00 【51CTO】

TypeScript One of the core principles of is to type check the structure of a value .

stay TypeScript in , The purpose of an interface is to name these types and define contracts for your code or third-party code .

Interface （interface） Is the most commonly used type annotation method .

       
       // interface  keyword 
       
interface user {
       
  name: string,
       
  age: number
       
}
       
function printUser(userObj: user) {
       
  console.log(userObj.name)
       
}
       
const myObj = { 
       
  name: 'lio',
       
  age: 18
       
}
       
printUser(myObj)
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

user Interface to define the types of object attributes that may be used in the future .

Be careful ： The type checker does not check the order of properties , As long as the corresponding attribute exists and the type is right

Optional attribute （`?`）

The properties in the interface are not all required

       
       interface user {
       
  name?: string
       
  age?: number
       
}
       
function printUser(userObj: user): { name: string, height: number } {
       
  let newUser = { name: 'O.O', height: 180 }
       
  if (userObj.name) {
       
    newUser.name = userObj.name
       
  }
       
  if (userObj.age) {
       
    newUser.height = userObj.age * userObj.age
       
  }
       
  return newUser
       
}
       
const myObj = { name: 'D.O' }
       
printUser(myObj) // { name: 'D.O', height: 180 }
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

Interfaces with optional properties are similar to normal interface definitions , Just add a... After the optional attribute name definition ? Symbol .

benefits

Possible attributes can be predefined
You can catch errors when referring to non-existent properties

Read-only property （`readonly`）

Some object properties can only change their values when the object is just created . You can use... Before the attribute name readonly To specify read-only properties ：

       
       interface Point {
       
  readonly x: number
       
  readonly y: number
       
}
       
const p: Point = { x: 10, y: 20 }
       
p.x = 5 // error
      
1.
2.
3.
4.
5.
6.
7.

TypeScript have ReadonlyArray type , It is associated with Array be similar , Just take out all the variable methods , So you can make sure that the array can no longer be modified after it's created .

       
       let arr: number[] = [1, 2, 3, 4]
       
const ro: ReadonlyArray<number> = arr
       
ro[0] = 12 // error!
       
ro.push(5) // error!
       
ro.length = 100 // error!
       
arr = ro // error
      
1.
2.
3.
4.
5.
6.
7.

Even if the whole ReadonlyArray Assignment to an ordinary array is also not allowed . But you can override it with type assertions ：

       
       arr = ro as number[]
      
1.

Function type

To represent function types using interfaces , We need to define a call signature for the interface .

It's like a function definition with only parameter lists and return value types . Each parameter in the parameter list needs a name and type .

       
       interface SearchFunc {
       
  (source: string, subString: string): boolean
       
}
       
const mySearch: SearchFunc
       
mySearch = function(source: string, subString: string) {
       
  const result = source.search(subString)
       
  return result > -1
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.

Type merge

       
       interface User {
       
  name: string
       
  age: number
       
}
       
interface User {
       
  address: object
       
}
       
const user: User = {
       
  name: 'D.O',
       
  age: 18,
       
  address: {}
       
}
       
console.log(user) // { name: 'D.O', age: 18, address: {} }
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

VSCode Although the editor will prompt you 'User' Has been defined . however interface The interface will still merge the same interface name , And compile the output normally .

Any number of identifications

Sometimes the number of types is dynamic , But the type is specified to be constrained , It can be written like this

       
       interface IVariate {
       
  first: string
       
  readonly second: number
       
  [key: string]: number
       
}
      
1.
2.
3.
4.
5.

Interface inheritance （`extends`）

To use by inheritance extends keyword

Single interface inheritance

       
       interface two extends one { name: string }
      
1.

Multi interface inheritance ： Use a comma , Separate the interfaces

       
       interface three extends one, two { name: string }
      
1.

原网站

版权声明
本文为[51CTO]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207191100452064.html

当前位置：网站首页>Typescript foundation interface interface

Typescript foundation interface interface

Optional attribute （`?`）

Read-only property （`readonly`）

Function type

Type merge

Any number of identifications

Interface inheritance （`extends`）

边栏推荐

猜你喜欢

随机推荐

当前位置：网站首页>Typescript foundation interface interface

Typescript foundation interface interface

Optional attribute （​​?​​）

Read-only property （​​readonly​​）

Function type

Type merge

Any number of identifications

Interface inheritance （​​extends​​）

边栏推荐

猜你喜欢

随机推荐

Optional attribute （`?`）

Read-only property （`readonly`）

Interface inheritance （`extends`）