This is the fourth day of my participation in the August More Text Challenge.

interface

  • Interfaces are used to describe objects that use this interface that need to meet the requirements defined in the interface. * The type checker does not check the order of these attributes.
  • Interfaces and types are literally similar. Interfaces specify a type that should start with a capital letter.String. , are interfaces to standard JS native objects.

Define interfaces and basic usage

  • Defines the interface 
    interface Value {
key1: number.key2: number
}
interface ResValue {
    key1: string.key2: string
}
Copy the code
  • Using an interface 
    function numberToString(obj: Value) :ResValue {
    return {key1: obj.key1.toString(), key2: obj.key2.toString()}
}

let val1: Value
val1 = {
    key2: 15.key1: 'string' // Cannot assign type "string" to type "number".
}
Copy the code

Use interface specification functions

  • Interface is used to standardize functions. Parameter names need not be the same. Parameters of a function are checked one by one to ensure that the parameter types in the corresponding positions are consistent. 
    / / define
interface NumberToStringFn {
    (prams1: number) :string
}
/ / use
let numberToString: NumberToStringFn
numberToString = function(number) {
    return number.toString()
}
Copy the code

Indexable type

  • In Javascript, the key of an object is actually a string, and now we have Symbol. The toString() method is automatically called in the [] syntax for objects, numbers, and so on.
  • Indexable types can use both numbers and strings, which can be used at the same time due toobj[1] = 1The actual isobj['1'] = 1If obj[1] satisfies obj[‘1’], the return type of the numeric index must be a subtype of the string index type, which can pass the type check of the string index type. 
    interface Dic{
    [index: number] :number,
    [index: string] :Object,}let a: Dic 
a[1] = 1
a['2'] = new Object
Copy the code
  • The reason for the following write/write error is because the write/write operation is not indexed. Ts will assume that the interface describes that any property of the object is defined as number and the key must be of type number 
        let b: Dic = {  {1: number; '2': Object; } "assigned to type" Dic ".
                // Attribute '2' is incompatible with index signatures.
                // Type "Object" cannot be assigned to type "number".
    1: 1.'2': new Object
}

Copy the code
  • The read-only setting and note for indexable types cannot be changed in this way. If only one type is set, it can be changed in string mode when bound to objects, because only numeric indexes are defined here. 
    interface Dic{
    readonly [index: number] :string,}// let a: Dic 
// a[1] = 1
// a['2'] = new Object


let a: Dic = ['0'.'1'.'2']
let b: Dic = {0:'0'.1:'2'.2:'2'}

b['0'] = '3'     / / there is no mistake
a['0'] = '3'     / / there is no mistake
b[0] = '3'       // Index signatures in type "Dic" can only be read.
a[0] = '3'       // Index signatures in type "Dic" can only be read.
Copy the code

Describe the class

  • When you check a class, only the instance part is checked, not the static part 
    interface ClockInterface { // The interface used to describe the class
    ClassName: string.// Describe instance attributes
    date: Date.// Describe instance attributes
    getTime(): string // Describe the prototype method
    setTime(date: Date) :void // Describe the prototype method
}

class Clock implements ClockInterface {
    ClassName: 'Clock'
    date: Date
    constructor(date: Date){ // Describe the constructor parameters
        this.date = date || new Date()}getTime() {
        return this.date.toString()
    }
    setTime(date: Date) {
        this.date = date
    }

}
Copy the code

Inherited interface

  • An interface can inherit all the descriptions of another interface 
    interface A {
    a: string;
}

interface B {
    b: number;
}

interface C extends A, B {
    c: boolean;
}

let c: C
c = {
    a: 'a'.b: 1.c: true
}
Copy the code

Mixed type

  • Type checking when describing different ways of using an object 
    interface_$$ { (fn? :Function) // describe when called
    name: string
    getName: () = > string
}

let$= (function() :_ $${
    const$=function(fn){
        fn&&fn()
    }
    $.getName = function(){
        return $.name
    }
    $.name = '$' 
    return $
})()

$(function(){console.log('fn()')})
$.getName()
$.name = '$$$'
Copy the code

Interface inheritance class

  • Interfaces inherit to the private and protected members of the class
  • The interface type of an inherited class can only be used to constrain that class or a subclass of that class 
    class Control {
    private state: any;
}

interface SelectableControl extends Control { // Inherits the Control class
    select(): void;
}

class Button extends Control implements SelectableControl {
    select(){}}class TextBox extends Control {
    select(){}}// Classes that do not inherit from the interface use this interface without the associated properties of the Control class
class Image implements SelectableControl {
    select(){}}Copy the code