interface

This is the 8th day of my participation in the More Text Challenge. For details, see more text Challenge

Interface in TS is a very basic concept, we must be familiar with the process of using, this article will illustrate its use

Interface Indicates the interface in TS

When two methods use the same type annotation, you need to make a uniform constraint. You can use the type alias or you can use the interface. Both methods use the same type annotation

For example, an interview is divided into two parts: written and interview

const screenResume = (name: string, written: number, interview: number) = > {
     written > 80 && interview >= 90 && console.log(name + "Enter the interview");
    written < 60 || (interview < 90 && console.log(name + "You're out."));
   };
screenResume('who's'.88.99);
const getResume = (name: string, written: number, interview: number) = > {
    console.log(name + "The written test is:" + written);
    console.log(name + "The interview result is:" + interview);
};
getResume("Who's".88.99);
Copy the code

Define two duplicate type annotations as a unified interface

interface People {
    name: string;
    written: number;
    interview: number;
  }

  const screenResume = (girl: People) = > {
    girl.written >=80 && girl.interview >= 90 && console.log(girl.name + "Interview passed.");
    girl.written <80 || (girl.interview < 90 && console.log(girl.name + "You're out."));
  };
  
  const getResume = (girl: Girl) = > {
    console.log(girl.name + "Age is:" + girl.written);
    console.log(girl.name + "Height is:" + girl.interview);
  };
  const girl = {
    name: "Xiaoxiao".written: 88.interview: 99}; screenResume(girl); getResume(girl);Copy the code

The difference between interface and type aliases

Type aliases can be given directly to types, such as strings, and interfaces must represent objects

  type Girl1 = stirng;
  const girl = {
    name: "Small".written: 88.interview: 94};Copy the code

Definition of non-mandatory values for the interface

TypeScript already has a way to do that, which is to put a prefix before the:?

interface Girl {
  name: string;
  written: number;
  interview: number; waistline? :number;
}

/* Any value */ is allowed
interface Girl {
  name: string;
  written: number;
  interview: number; waistline? :number;
  [propname: string] :any; // This means that the name of the property is of string type and the value of the property can be of any type.
}
/* Methods in the interface */
interface Girl {
  name: string;
  written: number;
  interview: number; waistline? :number;
  [propname: string] :any;
  say(): string; // For example, if we have a method called say(), the return value is string.
}
Copy the code

Constraints on interfaces and classes

Classes work well with interfaces

class XiaoJieJie implements Girl {
    name = "Bear";
    written = 80;
    interview = 90;
    say() {
      return "Interviewer, I'm here for an interview."; }}Copy the code

Inheritance between interfaces

Interfaces can also be used for inheritance, for example if you write a new Teacher interface that inherits from the Person interface.

interface yingjiesheng extends Girl {
   teach(): string;
 }

 const girl = {
   name: "Bear".written: 88.interview: 94.sex: "Female".say() {
     return "Interviewer, I'm here for an interview!!";
   },
   teach() {
     return "I'm a fresh graduate."; }};Copy the code

The interface is just a constraint on our development and is not reflected in the production environment. In other words, interfaces are just syntactic validation tools in TypeScript that are not useful when compiled into formal JS code.

Get Started with TypeScript

Getting started with TypeScript 04 classes is no longer a concern

Getting started with TypeScript 03 Array type definitions

Getting started with TypeScript 02 Function arguments and return type definitions

TypeScript Start 01 Common data types