This is the 24th day of my participation in the August More Text Challenge

This article starts with type operations (keyof) and focuses on TypeScript advanced interfaces and classes. Tip: the comments in the picture code can be carefully looked at yo!

preface

“Early review”

The preliminary knowledge of introduction to relearn the front-end | TypeScript

The basic knowledge of introduction to relearn the front-end | TypeScript

Type operation (KEYof)

Keyof (citation type query operator)

  • Was introduced in TS2.1.

  • It gets the type union for all known, public keys on the type

  • Number, string, and symbol (supported after TS4.4) can be used as keys

  • Number [] = Array

Simple type keyof

  type K1 = keyof unknown; // never
  type K3 = keyof undefined; // never
  type K4 = keyof void; // never
  type K5 = keyof null; // never
  type K11 = keyof object;  // never
  type K12 = keyof never;  // never

  type K2 = keyof any;  // string | number | symbol
Copy the code

Key comes from the corresponding interface: Number, BigInt, Boolean, String, Symbol

Interface

What is an interface?

Interfaces are abstractions of behavior that need to be implemented by classes. In addition to abstracting part of the behavior of a class, it is also often used to describe the Shape of an object.

Example 1:

  • Define an interface, IPerson
  • Define a variable customer of type IPerson
  • Customer implements the properties and methods of the interface IPerson

(TS on the left, JS compiled on the right)

Example 2:

  • Now let’s define a variable visitor again

  • This time the variable is missing a property called lastName

  • You can see that TS gave us an error

    It is not allowed to define variables less than the attributes of the interface.

Example 3:

  • I define traveler as a variable

  • This time the variable added a property name

  • You can see that TS also gave us an error

    It is not allowed to define more variables than the attributes of the interface.

knowledge

  • Interfaces generally start with uppercase letters. Some programming languages suggest adding the name of the interfaceIThe prefix
  • Interfaces serve as constraints and specifications
  • When assigning, the shape of the variable must match the shape of the interface

Optional attribute

In the example above, we saw that you cannot define fewer variables than the attributes of the interface. What if you want to define fewer variables?

You can use optional property, which is to add one after the property name, right? No.

Any attribute

We now have fewer attributes than the interface, but what if we want to define variables that have more attributes than the interface?

We can do this using arbitrary properties, which can be defined in two ways (referring to property names).

  • An attribute (index) signature isstringtype
  • An attribute (index) signature isnumbertype
[propNum: string]: string
Copy the code

[propNum: number]: string
Copy the code

Note:

  • Once any attribute is defined, the types of other attributes (deterministic, optional, read-only, and so on) must be subsets of their types

Understand the sample

You can change it to this (union type)

[propNum: string]: string | number;
Copy the code

There is one special case: arbitrary attribute signatures of type number do not affect other attribute signatures of type string

  • When two signatures of any type coexist,numberType signature the value type specified must be [stringType signature a subset of the specified value type

Understand the sample

Because Function is a subset of Object, the definition does not fail

The value type specified by number must be a subset of the value type specified by String. This is because when you index a number, JavaScript converts it to a string and then indexes the object. That is, indexing with 100 (a number) is the same as indexing with 100 (a string)

Interface and type aliases

Interface and Type aliases can be considered as two syntaxes of the same concept

Analogy:

Function definitions and function expressions

Contrast:

How interfaces and type aliases are written when defining the same type

The difference between

What is the difference between an Interface and a Type aliases?

  • Type aliases are more general and can contain type expressions (type union, type crossing, conditional type) on the right side, but only some kind of structure ({… })
  • When extending between interfaces (extends), TS checks the relationship. However, TS will try its best to avoid errors in type union
  • Multiple interface declarations of the same name in the same scope are merged. Multiple type aliases with the same name report an error

Class (class)

Class is ES2015 guide | into the new features, here only speak how to use interface to describe a class?

Class is essentially a function

  • Functions that are constructors must have the Prototype attribute. And the Prototype type is the same as the constructor return value
  • Has the same function signature and return value as Point Constructor

Define constructor syntax: new(x: x, y: y,...) : ReturnTypeCopy the code

important

To be clear, when describing a class, we are not describing an object, but a function that has a Prototype property on it

conclusion

I attended the byte youth training camp, so I prepared a re-learning front-end series. Due to the time, I may only be able to learn notes.

Update time: one essay will be published each day in the order of the course

The lecturer of this class: Byte Front – Weihua Wang

If any of the above is wrong, please point out in the comments section!

If there is a harvest, leave a thumbs-up to encourage it! 😘