What technical pain points are addressed?

Official definition: TypeScript is a superset of JavaScript with types that can be compiled into plain, clean, complete JavaScript code with type constraints at its core.

JavaScript is a flexible programming language, but its flaws include no type constraints, hidden type conversions, var scope issues, etc. In programming, we have a common understanding: The earlier errors occur, the better (it is better to write the code wrong than to compile it wrong, it is better to compile it wrong than to run it wrong, it is better to develop it wrong than to discover it wrong during testing). JavaScript’s inability to detect type errors during code compilation has left us front-end developers with a lack of type thinking. To address this technical feature, TypeScript is created, as its name suggests, as a type system. TypeScript, then, is a static type checking mechanism that checks for types at compile time.

Type constraints

JavaScript is divided into Primitive data types and Object types.

The primitive types are Boolean, numeric, string, null, undefined, and the new type Symbol in ES6 and BigInt in ES10.

Primitive type constraint:

// Boolean let isDeleted: Boolean = fasle; // let iCount: number = 10; // string let message: string = 'hello'; // null value let TMP: undefined = undefined; Or let TMP: null = null; // Let message: any = 'hello'; In typescript, if a type has no declared type, it is recognized as an arbitrary value type. / / joint type let TMP: string | number; It is allowed to be string or number, but not any other type.Copy the code

Object type constraints (interface interfaces) : typescript defines object types by defining interfaces, which are abstractions of behavior implemented by classes. Interfaces in typescript also describe the shape of objects, that is, the shape of variables must match the shape of the interface.

// Define an interface with a constraint declaration of type interface Client{name:string; phone? :number; / /? Addree :any; readony isDeleted: boolean; // Read-only, can only be assigned at creation time [anyTest:stirng]? :any; Let oneClient:Person={name:'test'; // Phone does not have addree: 'Beijing' due to optional attributes; isDeleted: false; }Copy the code

Array type constraint

Let arrayTmp: number[]=[1,2,3]; // let arrayTmp:Array<number>=[1,2,3]; // Let list:any[]=[1,'hello',false];Copy the code

Constraints on function types

Function sum(x: number, y: number): number {return x + y; } // let mySum = function (x: number, y: number): number {return x + y; }; Function buildName(firstName: string, lastName? : string) { if (lastName) { return firstName + ' ' + lastName; } else { return firstName; } } let tomcat = buildName('Tom', 'Cat'); let tom = buildName('Tom');Copy the code

Enumeration definition:

// Enumerating const enum Directions {Up, Down, Left, Right}  let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right]; // Declare enum Directions {Up, Down, Left, Right}  let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];Copy the code

Generic definitions:

Function createArray(length: number, value: any): Array<any> {let result = []; for (let i = 0; i < length; i++) { result[i] = value; } return result; } interface CreateArrayFunc {<T>(length: number, value: T): Array<T>; } class GenericNumber<T> {zeroValue: T; add: (x: T, y: T) => T; }Copy the code

Tuple definition:

Let Tom: [string, number] = ['Tom', 25]; let Tom: [string, number] = ['Tom', 25];Copy the code

Classes and interfaces

// Interface Alarm {alert(): void; } interface Light { lightOn(): void; lightOff(): void; } // Class Car implements Alarm, Light {alert() {console.log('Car alert'); } lightOn() { console.log('Car light on'); } lightOff() { console.log('Car light off'); }}Copy the code