ES New features: Juejin. Im /post/688341…

Js code optimization: juejin. Im /post/688341…

Part 2 :TypeScript

One: get started with TypeScript quickly

  1. Install: yarn add typescript –dev

  2. Run yarn TSC file name

  3. After execution, a js file with the same name is generated in the specified directory

Two: TypeScript configuration files

  1. Installation configuration file: yarn TSC –init After the installation is complete, a tsconfing.json file is added to the directory

  2. After the configuration file is available, the YARN TSC execution file can be provided

TypeScript primitive types

// Raw data type // In non-strict mode string-number-boolean allow null (undefined) or null const A: string = 'string' const b: unmber = 10000 const c: Boolean = false // The null type can be null const d: void = undefined const e: null = null const f: // use Symbol error because library cannot find the corresponding typeCopy the code

4. TypeScript standard library declarations

  1. If you use ES2015 built-in objects in TS files, you will not find the type of the object, because the TS compilation library uses ES5, so you cannot find the corresponding type

  2. Solution (Open the previously installed configuration file)

  3. Solution 1: Set the target of the configuration file to ES2015

  4. Option 2: Open the lib option of the configuration file and write ES2015 -> [‘ES2015’] in []

  5. ‘lib’ : [‘ES2015’, ‘dom ‘] -> ‘ES2015’ : [‘ES2015′,’ dom ‘]

Five: TypeScript Chinese error message prompt

  1. yarn tsc –locale zh-CN

  2. If there is an error in the next execution file, the prompt message will be in Chinese

Typescript-object type

Const foo: object = {} // Can be an object, an array, a function // ordinary object -- specifies a particular member const obj:{foo: number, bar: string} = {foo: 123, bar: '123'} copies the codeCopy the code

Seven: typescript-array type

Const arr1: Array<number> = [1,2,3,4,5,6] const arr2: number[] = [1,2,3,4,5,6] const arr2: number[] = [1,2,3,4,5,6] Agrs: number[]){return args.reduce((prev, current) => prev + current)} Copy codeCopy the code

TypeScript- The tuple type

Const tuple:[number, string] = [10, 'XJQ '] const age = tuple[0] const name = tuple[1] const [age1, name2] = tuple Copy codeCopy the code

TypeScript- Enumeration types

  1. Keyword: enum

TypeScript- Function types

Function func1(a: number, b?) function func1(a: number, b? Function func2(a: number, b: number = 10): string {return 'func1'} // Function func2(a: number, b: number = 10): String {return 'func2'} // Function func3(... Agrs: number[]): string {return 'func3'} const func4: (a: number, b: number) => string = function(a: Number, b:number): string {return 'func4'} Duplicates codeCopy the code

TypeScript- Any type

Function stringify(value: Any){return json.stringify (value)} stringify('string') stringify(100) stringify(false) Copies the codeCopy the code

TypeScript- Type assertions

  1. Key words: AS

TypeScript interfaces

  1. Key word: interface

  2. Optional members:?

  3. Readable member: readonly

  4. Dynamic member: [key: type] : type

Use of typescript-class

  1. Public property: publlic

  2. Private property: private

  3. Protected properties: protected

  4. The difference between private and protected: the first is not accessible in a subclass, and the second is accessible in a subclass

  5. Readable property: readonly

TypeScript- Classes and interfaces

  1. Keyword: implements

TypeScript- Abstract classes

  1. Key words: abstract

  2. Abstract classes can only be inherited and cannot be instantiated

TypeScript- Generics

  1. A generic type is defined without declaring a type, and then declared when it is used — to maximize the use of defined methods

  2. Key word: T

TypeScript- Type declarations

  1. For example, when using third-party libraries, there is no type declaration and you have to declare it yourself

  2. If a third-party library has a type declaration module, install the module

  3. Keyword: DECLARE