TS Introduction Note 2 – TS interface further details

Why do you need interfaces?

let obj:object; // defines a variable that can only hold objects
// obj = 1;
// obj = "123";
// obj = true;
obj = {name:'lnj'.age:33};
console.log(obj);
Copy the code

We’ve described how to define a TS object in this way, but defining the internal properties in this way is not restricted and makes little sense.

Interfaces are created to further define the various properties within the object.

What is an interface type?

And number, string, Boolean, enum these data types, the interface is also a kind of type, is used to constraint the user, his role is to further define the object within the various attributes.

Three, basic usage

// Requirement: define a function that outputs a person's full name. The person's last name must be a string, and the person's first name must be a character

interface FullName{
    firstName:string
    lastName:string
}

let obj = {
    firstName:'Jonathan'.lastName:'Lee'
    // lastName:18 is an error
};

//{firstName, lastName} uses destruct assignment
function say({firstName, lastName}:FullName) :void {
    console.log('My name is:${firstName}_${lastName}`);
}
say(obj);

Copy the code

Definition method when the number of attributes is uncertain

If an interface is used to qualify a variable or parameter, then the value assigned to the variable or parameter must be exactly the same as that specified by the interface, one more or one less.

However, we often encounter one less or one more scenario in development.

(1) One less, use optional attributes

Optional attributes mean exactly what they’re called, and are easy to use. You just add one after the name of the attribute, right? Can.

// Requirements: output the full name if middleName is passed, firstName and lastName if middleName is not passed
interface FullName{
    firstName:string
    lastName:stringmiddleName? :string
    [propName:string] :any
}

function say({firstName, lastName, middleName}:FullName) :void {
    // console.log(' My name is :${firstName}_${lastName} ');
    if(middleName){
        console.log('My name is:${firstName}_${middleName}_${lastName}`);
    }else{
        console.log('My name is:${firstName}_${lastName}`);
    }
}

say({firstName:'Jonathan'.lastName:'Lee'.middleName:"666"});
say({firstName:'Jonathan'.lastName:'Lee'});
Copy the code

(2) One more, with the index signature

Used to describe types that are “indexed”, such as arR [10] or obj[“key”].

The propName (propName) and the value (value) are the data structures that define the key (propName) and the value (value) in the object, and the attributes in the subsequent object, as long as the key and value satisfy the index signature, no matter how many there are.

interface FullName {
    [propName:string] :string
}
let obj:FullName = {
    // If the key and value meet the index signature limit, it does not matter how many index signatures there are
    firstName:'Jonathan'.lastName:'Lee'.// middleName:false
    // No matter what type the key is, it will be automatically converted to a string, so no error
    // false: '666' 
}



interface stringArray {
    [propName:number] :string
}

let arr:stringArray = {
    0:'a'.1:'b'.2:'c'
};

// let arr:stringArray = ['a', 'b', 'c'];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
Copy the code

5. Interface inheritance

Interfaces in TS can be inherited just like classes in JS

interface LengthInterface {

  length:number

}

interface WidthInterface {

  width:number

}

interface HeightInterface {

  height:number

}

interface RectInterface extends LengthInterface,WidthInterface,HeightInterface {

  // length:number

  // width:number

  // height:number

  color:string

}

let rect:RectInterface = {

  length:10.width:20.height:30.color:'red'

}

Copy the code

Function interface

A function is essentially a special object, and we can also use interfaces to define its parameters and return values.

interface SumInterface {
  (a:number.b:number) :number
}

// This is recommended
let sum:SumInterface= function(x,y) {
  return x + y;
}

let res = sum(10.20);

console.log(res);
Copy the code

Ts Introduction Notes Directory:

TS Introduction Note 1 – Type declarations for TS

TS Introduction Note 2 – TS interface further details

TS Introduction Note 3 — Function declarations in TS

TS Introduction Note 4 — Type Assertion for TS (Interpreted type conversions)

TS Introduction Note 5 – TS generics

TS Introduction Note 6 — Declaration files, modules, namespaces in TS

Record knowledge, transfer happiness ~

If my summary is helpful to you, please give me a thumbs up. Your encouragement is a great motivation for me to keep recording

If there are any errors in this article, please feel free to point them out in the comments