[Front-end] Explanation of core knowledge points of TypeScript

1. Introduction to TypeScript and introductory cases

(1) What is TypeScript?

TypeScript is a superset of JavaScript that supports the ECMAScript 6 (ES6) standard.

TypeScript is a free and open source programming language developed by Microsoft.

TypeScript is designed to develop large-scale applications. It can be compiled into pure JavaScript, and the compiled JavaScript can run on any browser.

(2) The difference between JavaScript and TypeScript

TypeScript is a superset of JavaScript that extends JavaScript's syntax so that existing JavaScript code can work with TypeScript without any modifications.

TypeScript provides compile-time static type checking through type annotations.

TypeScript takes existing JavaScript code and compiles only the TypeScript code within it.

(3) TypeScript environment construction

• Install node.js

地址: https://nodejs.org/en/download/

• Check the installation

node -v

• npm configure domestic mirror source

npm config set registry https://registry.npm.taobao.org

配置之后可以验证是否成功：
npm config get registry

• Use npm to install typescript globally

npm i -g typescript

• verify

tsc -v

Version 5.2.2

(4) Write the first TS program

• Create demo.ts

console.log('李祥');

• Compile into js file

tsc demo.ts

• html introduces js files

2.TypeScript basic data types

(1) Type declaration in TS

Type declaration is a very important feature of TS.

The type of variables (formal parameters) in TS can be specified through type declaration.

After specifying the type, when the variable is assigned a value, the TS compiler will automatically check whether the value matches the declared type. If it matches, it will assign the value. If it does not match, it will report an error.

Simply put, a type declaration sets the type for a variable. Allows a variable to store only certain types of values.

• grammar:

let 变量名:类型;//只声明，未赋值
let 变量名:类型=值;//声明并赋值 
function fun(参数:类型,参数:类型):类型{
    
    }

• Basic data types of TS

  • Number type: double-precision 64-bit floating point value. It can be used to represent integers and fractions.

  • boolean type: represents logical values: true and false

  • String type: a character series, use single quotes (') or double quotes (") to represent the string type. Backticks (`) are used to define multi-line text and embedded expressions

(2) TS automatic type judgment

• What is automatic type judgment?

TS拥有⾃动类型判断机制。
当对变量的声明和赋值同时进⾏时，TS编译器会⾃动判断变量类型。
所以如果你的变量的声明和赋值是同时进⾏的，可以省略掉类型声明。

• Case

//声明一个变量未赋值
let num:number;

num = 7;

//声明一个变量进行赋值
let sum = 9;

console.log(typeof num);
console.log(typeof sum);

• Console prints:

number
number

• If sum is forcibly assigned to the string type, a compilation error will be reported.

(3) TS literal declaration

• what is literal

客观存在⽆法改变的值。

• literal declaration

//使⽤字⾯量声明后a的值，永远是23 相当于常量不能修改
let a:23;
//如果修改ts就会提醒
const a=23;

(4) any type in TS

anyIndicates any data type. Setting the type of a variable to any is equivalent to turning off TS type detection for the variable.

//显式的any类型声明
let a:any;
a=12;
a=true;
a="lixiang";

//隐私的any类型声明，声明如果不指定类型，则TS解析器会⾃动判断变量的类型为any
let b;
b=23;
b=false;
b="lixiang";

Variables of type any can be assigned to any type of value without causing compiler errors or warnings. You need to be careful when using the any type, as it is a very flexible type and may lead to type inconsistencies or unexpected behavior.

(5) Unknown type in TS

unknownIt is a special type in TypeScript, which is used to describe variables of uncertain type. This is any类型similar to , but safer since it is illegal to do anything with unknown values.

unknown:表示未知类型的值;
let b:unknown;
b=123;
b=true;
b='lixiang';

let c:unknown;
c='123';
let d:string;

d=c;
//此时TS解析器提示是报错的
//虽然 变量中的字⾯量都是string，但是 d是string类型c是unknown所以不能赋值
//假如我就想让c的值赋值给d,应该这样操作
if(typeof c ==='string'){
    
    
 d=c;//这样就可以完成赋值了
}

(6) Type assertion in TS

Type assertion: can be used to tell the TS parser the actual type of the variable

grammar:

• Variable as type;
• <string> variable;

利⽤类型断⾔来处理上⼀节的unknown赋值的⼩问题
let c:string;
let d:unknown;
d="lixiang";
c=d as 'string';

console.log(typeof c);

输出结果：string

3. TypeScript function declaration

(1) Make a type declaration for the formal parameters in the function

Different from JavaScript, TypeScript function declaration adds a declaration of formal parameter types.

function fun(num1:number,num2:number):number{
    
    
 	 return num1+num2;
}

For a function declared in this way, the parameters can only pass two values ​​of numeric type, and the return value is also a value of numeric type.

Therefore, if a parameter is passed in, or the parameter passed in is not a number, the compiler will report an error.

//传递不是number的实参
fun('li','xiang');

//多参数
fun(123,4556,55,56);

//少参数
fun(11);

(2) Declaration of return value type in function

• The return value type is not set, but there is a return value

function fun(){
    
    
 	return true;
}

//这个时候TS解析器会根据返回值的类型进⾏判断，返回值类型是什么函数返回值类型就是什么
let result=fun();
console.log(typeof result);

打印结果：boolean

• Set the return value type to void

//void:⽤来表示空，以函数为例，就表示没有返回值的函数
function fun():void{
    
    
 	return;
}

• Set the return value type to never

//never:永远不会返回结果
function fun():never{
    
    
 	throw new Error("异常");
}

4.TypeScript complex data types

(1) Object type declaration

let a:object; //声明一个object对象类型的数据
let b:{
    
    name:string};//声明一个对象b，里面有个string类型的name属性
//给b变量赋值
b={
    
    name:'lixiang'}

• grammar:

{
    
    属性名1:属性值1，属性名2:属性值2}
当我们采用这种方式指定对象的时候，必须要求格式一摸一样。

• The specified object must contain a name, but there are two variables, age and sex, which may or may not exist. What should we do in this case?

let b:{
    
    name:string,age?:number,sex?:string}; // 在属性后面加个?表示这个属性非必需

b={
    
    name:'lixiang'};
b={
    
    name:'zhangsan',age:18};

• What should we do when we only know the attributes we must have, but we don’t know the others?

let b:{
    
    name:string,[propName:string]:unknown};
//这就表示我们指定b中存储的类型是对象，并且这个对象必须含有⼀个name的属性，类型为string,这个对象还可以有其他可选属性，只要属性名满⾜是字符串，属性值是unknown即可

[propName:string]:这个任意命名，就表示属性的名字，这个属性名字的类型是string。js中属性名⼀般都是⽤string定义。
[propName:string]:unknown;合起来就代表属性名为string类型，为可选的并且这个属性的值为unknown类型。

(2) Array type declaration

第一种：let 变量名:类型名[];
第二种：let 变量名:Array<类型名>;

let e:string[]; //声明一个字符串类型的数组，表示e中只能存储字符串
let d:number[]; //声明一个数字类型的数组
let f:boolean[]； //声明一个boolean类型的数组
let e:Array<number>; //另一种方式声明数值类型的数组
let e:Array<any>; //声明一个存储任意类型的数组
let e:any[]; //声明一个存储人意类型的数组

(3) Tuple type declaration

A tuple is an array of fixed length. And the types are customized and the types correspond to each other.

let h:[string,string];//定义元组存储两个值，第⼀个值是string类型。第⼆个值也是string
//定义的时候多⼀个少⼀个也不⾏，必须按照声明的结构定义数组，不然TS解析器就会提示报错
h=['li','xiang'];

let s:[string,number]；//定义元组存储两个值，第⼀个值是string类型。第⼆个值是number
s=['s',1];
元组书写语法：[类型，类型,类型];

(4) Enumeration type declaration

Enumeration (Enum) can define some named constants. Used to clearly express intent or create a differentiated set of use cases.

• grammar:

enum 枚举名称{
    
    成员1，成员2....};

• Numeric enumeration:

// 默认情况下，第⼀个枚举值是0，后续⾄依次增1
enum Color
{
    
    
 red,
 blue,
 yellow
}
alert(Color.blue);

• string enum

enum Gender {
    
    
 male = '1',
 female = '0',
}
alert(Gender.male);

(5) Union type declaration

在ts中我们可以使⽤ "|" 进⾏联合类型声明
语法：let 变量名:声明类型1|声明类型2.....;
//就表示声明⼀个变量名，它可以是类型1还可以是类型2或者更多

let sex = string:number;
sex = 1;
sex='1'
//这两种赋值方式都可以

(6) Type alias

• Declare a type alias: type t = '';

• Declare a type variable of a: type a = 1|2|3|4|5|;

• At this time we declare a b variable: let b = a; b is equivalent to let b = 1|2|3|4|5|;

5.Configuration in TypeScript

(1) Automatically compile files

• Automatically compile individual files

编译⽂件时，使⽤-w指令后，TS编译器会⾃动监视⽂件的变化，并在⽂件发⽣改变时对⽂件进⾏重新编译。
tsc ⽂件名.ts -w

• Automatically compile all ts files under the current project

如果直接使⽤tsc指令，则可以⾃动将当前项⽬下的所有的ts⽂件编译成js⽂件。
要在项⽬的根⽬录下创建⼀个ts的配置⽂件 tsconfig.json。tsconfig.json是⼀个json⽂件，添加配置后，只需要tsc命令即可完成对整个项⽬的编译。

(2) Explanation of configuration items in tsconfig.json

• include: Define all directories of files you want to be compiled

默认值：[**/**]
案例："include":["dev/**/*","prop/**/*"] 
**：表示任意⽬录
*：表示任意⽂件
就代表所有的dev⽬录和prop⽬录下的⽂件都会被编译

• exclude: Define directories that do not require compilation

默认值：["node_modules","bower_components","jspm_packages"]
案例："exclude":["./prop/**/*"]
代表不编译prop⽬录下的所有⽂件

• extends: defines inherited configuration files

案例："extends":"./config/base"
表示当前配置⽂件会⾃动包含config⽬录下base.json中的所有配置信息

• files: Specify the list of files that need to be compiled

案例：
 "files":
 [
 "one.ts",
 "two.ts",
 "three.ts",
 "four.ts"
 ]
表示列表中⽂件都会被TS编译器编译

• complierOptions: ts compilation configuration

target:指定ts编译的js⽬标版本
可选值："ES3"（默认）， "ES5"， "ES6"/ "ES2015"， "ES2016"， "ES2017"或 "ESNext"。
案例："compilerOptions":{
    
    "target":"ES6"}
表示我们所编写的ts代码将会被编译ES6版本的js代码

module:指定使⽤的模块化规范
可选值："None"， "CommonJS"， "AMD"， "System"， "UMD"， "ES6"或 "ES2015"。
只有 "AMD"和 "System"能和 --outFile⼀起使⽤。
"ES6"和 "ES2015"可使⽤在⽬标输出为 "ES5"或更低的情况下。

lib:指定编译过程中需要引⼊的库⽂件的列表
可选值："ES5"，"ES6"，"ES2015"，"ES7"，"ES2016"，"ES2017"，"ES2018"，"ESNext"，"DOM"，"DOM.Iterable"，"WebWorker"，"ScriptHost"，"ES2015.Core"，"ES2015.Collection"，"ES2015.Generator"，"ES2015.Iterable"，"ES2015.Promise"，"ES2015.Proxy"，"ES2015.Reflect"，"ES2015.Symbol"，"ES2015.Symbol.WellKnown"，"ES2016.Array.Include"，"ES2017.object"，"ES2017.Intl"，"ES2017.SharedMemory"，"ES2017.String"，"ES2017.TypedArrays"，"ES2018.Intl"，"ES2018.Promise"，"ES2018.RegExp"，"ESNext.AsyncIterable"，"ESNext.Array"，"ESNext.Intl"，"ESNext.Symbol"
案例：
 "compilerOptions":{
    
    
 "target":"ES6",
 "lib":["ES6","DOM"]
 }
注意：如果--lib没有指定默认注⼊的库的列表。默认注⼊的库为：
针对于--target ES5：DOM，ES5，ScriptHost
针对于--target ES6：DOM，ES6，DOM.Iterable，ScriptHost

outDir:⽤来指定编译后⽂件所在的⽬录
案例：
 "compilerOptions":{
    
    
 "target":"ES6",
 "lib":["ES6","DOM"],
 "outDir":'./dist'
 }

outFile:将编译的代码合并成⼀个⽂件
案例：
 "compilerOptions":{
    
    
 "target":"ES6",
 "lib":["ES6","DOM"],
 "outDir":'./dist',
 "outFile":'./dist/main.js'
 }
"outFile":'./dist/main.js'
就表示把编译后的⽂件合并的main.js这⽂件中，最后只会输出⼀个js⽂件
mudule只能使⽤ amd或者是system
其实outFile这个功能我们在⼯作中也很少使⽤，因为我们打包的时候都是通过打包⼯具进⾏使⽤的。

allowJs:是否对js⽂件进⾏编译
默认值:false
案例:"allowJs":true

checkJs:是否检查js代码符合语法规范
默认值:false
案例："checkJs":true

removeComments:在编译的时候是否移除注释
默认值:false

noEmit:不⽣成编译后的⽂件
默认值为：false
案例："noEmit":true

noEmitOnError:当存在语法错误的时不⽣成编译后的⽂件
默认值：false
案例："noEmitOnError":true

alwaysStrict:js中有⼀种模式叫做严格默认，它语法更严格，在浏览器执⾏的性能更⾼，开发时候我们都会让我们的代码在严格模式下执⾏。
如果是在js⽂件的话 只需要在js⽂件的开头加⼊⼀个字符串。
"use strict";
设置编译后的⽂件是否使⽤严格模式
默认值：false
案例："alwaysStrict":true

noImplicitAny:不允许隐式的any类型
默认值为：false
案例："noImplicitAny":true

strictNullChecks:严格的检查空值
默认值为:false
案例："strictNullChecks":false

strict:所有严格检查的总开关
默认值为:false
案例："strict":false

6.Advanced TypeScript syntax

(1) Directly run the ts file

• First install ts-node globally

npm install -g ts-node

• Just execute the ts-node command

ts-node hello.ts

运行结果：hello lixiang

(2) Classes in TypeScript

• How to define a class

//通过class这个关键字来定义⼀个类
class Person{
    
    
 name:string;
 age:number;
}
//通过这个类实例化⼀个对象
let person=new Person;
如果不传递参数的话（）可以省略

• static modifier (static)

被static修饰的属性或者是⽅法，属于类的。可以通过类名调⽤，不属于实例的，实例没办使⽤
class Person {
    
    
  static name: string = "lixiang";
  static sayHello() {
    
    
    console.log("你好！");
  }
}
Person.sayHello();
使⽤⽅法：放在属性名或者⽅法名前⾯

• readonlyreadonly

被readonly修饰的属性，只能读取不能修改
案例：Person.full_name='lixiang'；

(3) Construction methods in classes

• How to define a constructor method in a class

class Dog{
    
    
 constructor(){
    
    
 		console.log("我创建⼀个Dog");
 }
}
const dog=new Dog();
//当我们调 new Dog();的时候我们就等于调⽤Dog中的构造⽅法
//在实例犯法中，this就表示当前的实例
//在构造⽅法中当前对象及时当前新建的那个对象
//可以通过this向新建的对象中添加属性

• Define a parameterized constructor

class Dog {
    
    
  constructor(name: string) {
    
    
    console.log(name);
  }
}
const dog = new Dog("黑妞");
//创建的时候必须传递⼀个string类型的参数

• this transformation constructor method

class Dog {
    
    
  name: string;
  constructor(name: string) {
    
    
    this.name = name;
  }
}

(4) Inheritance in TS

class Animal {
    
    
  name: string;
  constructor(name: string) {
    
    
    this.name = name;
  }
  eat() {
    
    
    console.log(this.name + "吃东西");
  }
}
class Dog extends Animal {
    
    
  constructor(name: string) {
    
    
    super(name);
  }
}
此时，Animal被称为⽗类，Dog被称为⼦类,使⽤继承后，⼦类将会拥有⽗类所有的⽅法和属性。
通过继承可以将多个类中共有的代码写在⼀个⽗类中。
这样只需要写⼀次即可让所有⼦类都同时拥有⽗类中的属性和⽅法。
如果希望在⼦类中添加⼀些⽗类中没⼜的属性或⽅法直接加就⾏。

(5) Rewriting in TS

Overriding the methods of the parent class will overwrite the methods of the parent class in the subclass.

class Animal{
    
    
    name:string="动物";
    sleep(){
    
    
        console.log("动物在睡觉");
    }
}

class Dog extends Animal{
    
    
    name:string="狗";
    sleep(){
    
    
        console.log("狗在睡觉");
    }
}

let jm=new Dog();
console.log(jm.name);
jm.sleep();

运行结果：
狗在睡觉
狗

(6) super keyword

1）:在当前类中 super就表示当前类的父类

2）:如果在子类中写了构造方法，在子类构造方法中必须对父类的构造方法进行调用

子类不写构造方法，父类将自动调用，如果子类写构造方法，则会把父类构造方法覆盖调用，所有必须调用父类的构造方法

super();//有参数也需要传递对应的参数，不然会TS解析器会提示报错

class Animal{
    
    
    name:string;
    sleep(){
    
    
        console.log(this.name+"在睡觉");
    }
    constructor(name:string){
    
    
        this.name=name;
    }
}

class Dog extends Animal{
    
    
    age:number;
    sleep(){
    
    
        //super   代表父类   父类 -》超类
        super.sleep();
    }
    constructor(name:string,age:number){
    
    
        super(name);
        this.age=age;
    }
}

let jm=new Dog("金毛",12);
jm.sleep();

运行结果：
金毛在睡觉

(7) Abstract classes in TS

• abstract class

以abstract开头的类被称为抽象类，抽象类和其他类区别不大，只是不能用来创建对象。抽象类就是专门用来被继承的类。

• abstract method

抽象类中可以添加抽象方法
抽象方法使用abstract开头，没有方法体
抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写
abstract syaHello():void;

abstract class Animal{
    
    
    name:string="抽象类";
    abstract sleep():void;
}

class JM extends Dog{
    
    
    sleep(){
    
    
       console.log("狗在睡觉");
    }
}
let jm = new JM();
jm.sleep();

运行结果：
狗在睡觉

(8) Interfaces in TS

• interface

接口用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法。同时接口也可以当成类型声明去使用。接口可以重复声明，取所有相同接口名的并集

• grammar

通过 interface 关键字来定义

//interface
interface myInterface{
    
    
    name:string;
    sleep():void;
}
interface myInterface{
    
    
    age:number;
}
class Person implements myInterface{
    
    
    name:string;
    age:number;
    gender:string;
    sleep(){
    
    
        console.log(this.name+"睡觉");
    }
    constructor(name:string,age:number,gender){
    
    
        this.name=name;
        this.age=age;
        this.gender=gender;
    }
}

let c=new Person('lixiang',19,'男');
c.sleep();

运行结果：
lixiang睡觉

(9) Encapsulation of attributes in TS

• attribute modifier

public：修饰的属性可以在任意位置访问，是默认值
private: 私有属性，私有属性只能在类内部进行访问,通过在类中添加方法使得私有属性可以被外部访问
protected: 受保护的属性，只能在当前类何当前类的之类中访问

• Property encapsulation

class Person {
    
    
    private name:string;
    private age:number;
    constructor(name:string,age:number){
    
    
        this.name=name;
        this.age=age;
    }
}

• property accessor

getter 方法用来读取属性
setter 方法用来设置属性

class Person {
    
    
    private name:string;
    private age:number;
    constructor(name:string,age:number){
    
    
        this.name=name;
        this.age=age;
    }
    get name():string{
    
    
        return this.name;
    }
    set name(name:string):void{
    
    
        this.name=name;
    }
}
let obj =new Person("lixiang",18);
obj.setAge=12;
console.log(obj.getAge);

运行结果：
12

(10) Generics in TS

• Generic usage scenarios

在定义函数或类时，如果遇到类型不明确就可以使用泛型
泛型就是一个不确定的类型

• Use simple generics

function cache<泛型名>(value:泛型名):泛型名{
    
    
    return 泛型名;
}

• Generic constraints

我们可以指定泛型的类型，如果我们不指定TS解析器会根据我们传递的参数进行类型推测（建议我们在使用泛型的时候指定泛型的类型）
使用方法：
cache<指定泛型类型>('lixiang');

• Create multiple generics

function cache<泛型名1,泛型名2>(value1:泛型名1,value2:泛型名2):T{
    
    
    return T;
}

cache<泛型类型1，泛型类型2>(实参1，实参2);

• The use of generics in interfaces

interface Animal<T>{
    
    
    name:T;
}

class Dog<T,F>  implements Animal<T>{
    
    
    name:T;
    age:F;
    constructor(name:T,age:F){
    
    
        this.name=name;
        this.age=age;
    }
}
let jm=new Dog<string,number>("黑妞",12);
console.log(jm.name);
console.log(jm.age);

运行结果：
黑妞
12

Remember to give the blogger three in a row! ! !