“This is the fifth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

preface

Before we learn more about Typescript, let’s review Typescript prep and Typescript basics.

Advanced knowledge

Type of operation

Keyof (index type query operator) was introduced in TS2.1. It gets the type union for all known, public keys on the type.

Let’s look at the simple type keyof:

type K1 = keyof unknown; // nerver type K3 = keyof undefined; // nerver type K4 = keyof void; // nerver type K5 = keyof null; // nerver type K11 = keyof object; // nerver type K12 = keyof nerver; // nerver type K2 = typeof any; / / string | number | symbol / / keyof can number, biginit, Boolean, string, symbol into a corresponding interface, Output the corresponding method the string / / "toString" | "toFixed" | "toEx" | "toExponential" | "toPrecision" | "the valueOf" | "toLocaleString" type K6 =  keyof number; // typeof Symbol.toStringTag | "toString" | "toLocaleString" | "valueOf" type K7 = keyof bigint; // "valueOf" type K8 = keyof boolean; // nmber | typeof Symbol.iterator | "toString" | "charAt" | "charCodeAt" | "concat" | "indexOf" | "loacaleCompare" | "match" | "replace" | "search" | "slice" | ... 36 more ... | "replaceAll" type K9 = keyof string; // tyepof Symbol.toPrimitive | typeof Symbol.toStringTag | "toString" | "valueOf" | "description" type K10 = keyof symbol;Copy the code

Interface

Interface and Type aliases can be considered as two syntaxes of the same concept. What do we make of this sentence? We can understand this by analogy with familiar function definitions and function expressions. Interfaces are more like function definitions, and type aliases are more like function expressions.

import { Equal } from '@type-challenges/unils'; // Object type TPerson = {name: string; age: nmber} interface IPerson {name: string; age: nmber} type R1 = Equal<TPerson, IPerson>; // true // Index type type TDict = {[key: string]: string}; interface IDict {[key: string]: string}; type R2 = Equal<TDict, IDict>; Type TFn = (x:number)=> string; interface Ifn { (x:number): string } type R3 = Equal<TFn, Ifn>; // true // tuple type TTuple = [number, number]; interface ITuple extends Array<number> { 0: number; 1: number; length: 2; } type R4 = Equal<TTuple, ITuple>; // trueCopy the code

The difference between interface and type aliases

  1. 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 ({… }).
  2. When extending between interfaces (extends), TS checks the relationship. However, TS will try its best to avoid errors in type union.
  3. 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 a new feature introduced in ES2015. So let’s first look at how do we describe a class using an interface?

import { Equal } from '@type-challenges/unils'; class Point { x: number = 0; y: number = 0; constructor(x:number, y:number){ this.x = x; this.y = y; } } interface IPoint { prototype: {x:number, y:number}; new(x:number, y:number): {x:number, y:number}; // Define the constructor syntax :new(x: x, y: y,...) : } type TPoint = { prototype: {x:number, y:number}; new(x:number, y:number): {x:number, y:number}; } type TPointProps = keyof typeof Point; // "prototype" type R1 = Equal<IPoint, typeof Point>; // true type R2 = Equal<TPoint, typeof Point>; // true type R3 = Equal<IPoint, TPoint>; // trueCopy the code

Class is essentially a function, as you can see from the above code:

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

conclusion

We learned about Typescript operations, interfaces, and classes. We believe you have a better understanding of Typescript. Next time, we will continue to learn more about Typescript.