This is the 13th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

preface

In the last article, we talked about the TS type system and what problems it can help us solve. Interfaces, as an important type constraint, will be discussed in this article. An interface simply specifies something. In the background, an interface refers to the API specified by both parties. In TS, an interface generally refers to what the variable has.

A preliminary study

Let’s start by making a parameter convention for a function

    function test(args: { title: string }) {
        return args.title;
    }
    test({ title: 'x' }) // x
Copy the code

The type checker will look at the call parameters for test and check whether the parameters conform to the convention specification, which is an object containing a STING type title field. If not, an error will be run during the check phase.

interface

Sometimes, if we have a lot of parameters and we want the interface to be code reusable, we can write it this way

    interface Args {
        title: string;
        body: string;
    }
    function test(args: Args) {
        return args.title;
    }
    function test2(args: Args) {
        return args.body;
    }
Copy the code

The parameters of the function are checked one by one for compatibility. If you don’t want to specify a type, the TypeScript type system will infer the parameter type because functions are directly assigned to function type variables. The return value type of a function is inferred from its return value (false and True in this case). If we let this function return a number or a string, the type checker will warn us that the return value type of the function does not match the definition in the interface.

This parameter is optional and dynamic

In the above interface definition, the attributes are required, no more, no less. In some cases, we want some parameters to be optional, even dynamic, then we can change it to:

    interface Args {
        title: string;
        body: string; x? :number; // Optional attributes
        [y: string] :any; // Dynamic properties
    }
    function test(args: Args) {
        return args.title;
    }
    function test2(args: Args) {
        return args.body;
    }
Copy the code

Function return type

To use an interface to represent a function type, we need to define a call signature for the interface. It is like a function definition with only an argument list and a return value type. Each parameter in the parameter list needs a name and type.

With this definition, we can use the interface of this function type just like any other interface.

    interface SearchFunc {
        (source: string.subString: string) :boolean;
    }
    let mySearch: SearchFunc;
    mySearch = function(source: string, subString: string) {
        let result = source.search(subString);
        return result > -1;
    }
Copy the code

Interface programming

In some cases, we’re going to do something when an instance is initialized, and in those cases, interface can be implemented with a class

    class Cat {
        name: string;
        color: string;
        constructor(name: number, color: number) {
            this.name = name;
            this.color = color; }}function cloneCat(cat: Cat) :Cat {
        return new Cat(cat.name, cat.color)
    }
Copy the code

Interface inheritance

Like classes, interfaces can inherit from each other.

    interface Shape {
        color: string;
    }

    interface Square extends Shape {
        sideLength: number;
    }
Copy the code

summary

The definitions of interfaces are divided into three types: interface, Type, and class. Class is a programmable interface, and type is a base type that can be declared.

If it’s not clear when to use interface/type, use interface if you can, or type if you can’t.