TypeScript入门

1、TypeScript是JavaScript的超集（扩展）。

　　它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。

　　TS代码需要通过编译器编译为JS（node），然后再交由JS解析器执行。

　　TS完全兼容JS，换言之，任何的JS代码都可以直接当成TS使用。

　　相较于JS的动态类型而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS。

 

2、当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型

let a: number;
a = 1;
//idea直接报错
// a = '2'

let b = 123
//根据首次声明的值类型来判定，改类型也会报错
//b='12'

　　类型声明主要是放在函数上声明，变量一般直接赋值并定义好类型了

//定义函数参数输入的类型，返回的类型
function fn(参数: 类型, 参数: 类型): 类型{
    ...
}

function sum(a: number, b: number): number {
  return a + b;
}
//报错。只能是数字
//sum("11", 2);
//报错，参数个数超过定义的个数
//sum(1, 3, 4);

 

3、TS类型

　　

　　1、字面量：联合类型

let color: 'red' | 'blue' | 'black';
let num: 1 | 2 | 3 | 4 | 5;

　　2、any和unknown：any可以赋值给任何变量，不安全；unknown需要做类型判断

let a: any;
let b: unknown;

let c: number;
//any赋值不会报错
//c = a;
//unknown编译器会报错，但是编译会通过
//c = b;
//unknown需要做类型判断
if (typeof b === "number") {
  c = b;
}
//或者用类型断言
c = b as number;
c = <number>b

　　3、类型断言：有些情况下，变量的类型对于我们来说是很明确，但是TS编译器却并不清楚，此时，可以通过类型断言来告诉编译器变量的类型，断言有两种形式：如上

　　4、void和never：都是空，但是void其实可以理解为返回undefined，但是never不返回任何值，never可以用来提供报错函数：

let unusable: void = undefined;
function error(message: string): never {
  throw new Error(message);
}

　　5、Object属性名后面加问号，表示可选属性

let obj: object = {name?: string; age: number};
//可以没有name，但是必须要有age

　　当对象包含多个未知数量的属性的时候，可以用数组代替

let obj: object = {name: string,[props: string]: any}
//必须有name，后面的属性随意添加，[props: string]: any 表示任意类型属性

　　6、数组的定义

let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];

　　7、tuple：元组，固定长度的数组

　　8、enum：枚举，相当于是一个更好的注释

enum Color {
  Red = 1,
  Green, //自动递增补全，但一般也没必要再赋值0或者1还是2
  Blue,
}
let c: Color = Color.Green;

　　9、类型别名，自定义类型

type myType = number | string

let a: myType
a = 1
//报错，没有boolean
//a =false

 

4、编译相关

　　1、自动编译单文件 tsc name.ts -w。类似nodemon

　　2、自动编译项目 配置文件 tsconfig.json，整个目录下ts可监听编译

　　3、配置：

　　　　1、include指定路径需要被编译

　　　　2、exclude排除哪些文件需要编译，一般不会改

　　　　3、extends继承某个配置文件

　　　　4、file指定编译某些文件

　　　　5、compilerOptions：target目标ES版本/lib指定项目中要使用的库，一般不会修改/module指定模块化规范/outDir输出目录/outFile输出编译为一个JS文件　　

　　　　　　　　　　　　　　allowJs是否对JS文件编译，默认false/checkJs检查JS代码语法，以ts的要求规范js，如类型等，默认false

　　　　　　　　　　　　　　removeComments删除注释/noEmit不生成编译文件/noEmitOnError语法有错，不生成编译文件/sourceMap是否生成sourceMap

　　　　　　　　　　　　　　rootDir指定根目录，如果不指定，会默认选择最长公共目录为根目录

　　　　　　　　　　　　严格检查：strict、alwaysStrict、noImplicitAny、noImplicitThis、strictBindCallApply、strictFunctionTypes、strictNullChecks、strictPropertyInitialization

　　　　　　　　　　　　额外检查：noFallthroughCasesInSwitch、noImplicitReturns、noUnusedLocals、noUnusedParameters

　　　　　　　　　　　　高级：allowUnreachableCode检查不可达代码

 

5、webpack打包：npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

　　　　　　　　　根目录创建tsconfig.json

 

6、TS类：封装、继承、多态；

　　1、只读属性（readonly）：属性为只读属性无法修改

　　2、TS中属性具有三种修饰符：

• 　　public（默认值），可以在类、子类和对象中修改
• 　　protected ，可以在类、子类中修改
• 　　private ，可以在类中修改

　　3、getter、setter

　　4、静态属性：static。使用静态属性无需创建实例，通过类即可直接使用

　　5、抽象类：不希望被直接调用的类，只能用来继承。class前加上abstract

　　6、抽象方法：必须写在抽象类内，子类继承必须重写，可以理解为规定了一个公用方法的名字或者说结构

　　7、接口：interface。接口的作用类似于抽象类，不同点在于接口中的所有方法和属性都是没有实值的，定义一个类中应该包含什么东西，结构，换句话说接口中的所有方法都是抽象方法

　　8、泛型：定义一个函数或类时，有些情况下无法确定其中要使用的具体类型（返回值、参数、属性的类型不能确定），此时使用泛型

　　　　　　1、泛型就是不确定的类型

function test<T>(arg: T): T{
    return arg;
}

　　　　　　2、这里的<T>就是泛型，T是给这个类型起的名字（不一定非叫T），设置泛型后即可在函数中使用T来表示该类型（调用的时候才确定类型）。所以泛型就表示某个类型。上述就可以表示参数和返回值的类型相同

　　　　　　3、多个泛型

function test<T, K>(a: T, b: K): K{
    return b;
}

test<number, string>(10, "hello");

　　　　　　4、泛型继承

interface MyInter{
    length: number;
}

function test<T extends MyInter>(arg: T): number{
    return arg.length;
}