一、概述、运行TS代码

TypeScript是JS的超集，TS提供JS的所有功能，并额外的增加了——类型系统：
- （1）所有JS代码都是TS代码
- （2）JS有类型（number、String等），但是JS不会检查变量类型是否改变，而TS会检查，TS类型系统的主要优势就是可以显示标记出代码中的以外行为，从而降低了发生错误的可能性
如何运行？
- （1）代码书写好之后，在运行终端执行：tsc 文件名.ts 将ts编译为js
- （2）此时文件夹下会出现一个同名的js文件，在终端继续执行node 文件名.js 即可运行
安装ts-node包后可以直接通过ts-node 文件名.ts 即可运行，但原理和上述是一样的（但没有在外部生成相应的js）

二、类型注解

变量申明： let age : number = 18 // : number就是类型注解，为变量添加类型约束，给变量赋不同类型的值就会报错
变量类型：

• （1）JS已有类型：
  • a、原始类型：number/string/boolean/null/undefined/symbol
  • b、对象类型：object（包括：数组、对象、函数等）
• （2）TS新增类型：
  联合类型：自定义类型（类型别名）、接口、元组、字面量类型、枚举、void、any等

三、数组类型

两种写法：

let number : number[ ] = [ 1 , 2 , 3 ]  //推荐写法
let strings : Array<string> = ['a' ,'b', 'c']

四、联合类型

由多个其他类型组成的类型，表示变量可以是其中的任一类型

let arr : ( number|string ) [ ] =[1 , 'a' , 3 , 'b' ];      //数组元素既可以是number类型也可以是string类型
let arr1 : number | string [] =123;  //要么是number类型要么是字符串数组string[]类型

五、类型别名

给任意类型起别名

type CustomArray = ( number | string )[                    ]
let arr1: CustomArray = [1 , 'a' , 3 , 'b' ];
let arr2: CustomArray = [ 'a', 'b' , 4 , 5 ];

六、函数类型

• （1）单独指定参数、返回值的类型：

function add(num1:number , num2:number):number{
    return num1+num2
}
const add1 = (num1:number , num2:number):number =>{
    return num1+num2
}

• （2）同时指定参数、返回值的类型：

const add:(num1:number , num2:number)=>number =(num1,num2)=>{
    return num1+num2
}

七、可选参数

使用函数实现某功能时，参数可传可不传时使用。在传可不传的参数名称后面加?

function mySlice ( start : number , end? : number): void {}
//end参数可传可不传，但start必须传，且定义的时候可选参数只能出现在最后，不能存在必选参数定义在可选参数之后的情况。

八、对象类型

let person : { name : string ; age : number ; get(name : string):void}
={ name : 'jack' , age : 19 , get (name){ } }

声明变量类型时，如果进行换行可以不加分号
对象的可选属性与函数的可选参数语法一致

九、接口

当一个对象类型被多次使用时，使用接口来描述对象类型，达到复用的目的。声明接口后，直接使用接口名称作为变量类型。

interface IPerson{
    name : string
    age : number
    sayHi() : void
    }
let Person : IPerson = {
    name : 'jack',
    age : 19,
    sayHi(){}
    }

接口和类型别名都可以对对象类型设置别名，但接口只可以为对象指定，类型别名可以对任何类型指定
接口继承：如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用

interface Point2D {x:number ; y:number}
interface Point3D {x:number ; y:number ; z:number}

通过继承来实现复用，可以写成：

interface Point2D {x:number ; y:number}
interface Point3D extends Point2D { z:number}

十、元组

元组是另一种类型的数组，它确切地知道包含多少个元素，以及特定索引对应的类型：

let position : [number , number] = [123,456]

十一、类型推论

声明变量并立即初始化值、函数设定返回值的时候，此时，可以省略类型注解

let age = 18
function add(num1:number , num2:number){
    //会根据return返回值进行判断函数返回类型
}

如果声明变量并没有立即初始化值，此时还是需要手动添加类型注解。

十二、类型断言

<a href='http://.....'>123</a>
const aLink = document.getElementByID('link')

由于获取的aLink类型是HTMLElement，该类型只包含所有标签公共的属性和方法，href是a标签特有的属性，所有aLink太宽泛，无法获取aLink.href ，此时就需要使用类型断言指定更加具体的类型：

const aLink = document.getElementByID('link') as HTMLAnchorElement

另一写法：

const aLink =<HTMLAnchorElement>document.getElementByID('link')

通过as实现类型断言，指定一个更加具体的类型（HTMLAnchorElement是HTMLElement的子类型），就可以实现对aLink.href的访问

Q：如何知道标签属性的具体类型？
A：在浏览器控制台中0）则控制台输出当前选中标签，执行console.dir($0)就会将标签以对象的形式输出，就可以寻找最下边的_proto_就可以知道具体的类型

十三、字面量

let str1 = 'Hello'
const str2 = 'hello' 

变量str1的类型是string，str2是常量，它的值不能变化只能是hello，那么str2的类型就是hello，hello就是一个字面量，即某个特定的字符串也可以作为TS的类型，任意的JS字面量（对象、数字等）都可以作为类型使用。

• 使用模式：字面量配合联合类型一起使用
• 使用场景：用来表示一组明确的可选值列表
  比如在贪吃蛇游戏中，游戏方向可选值只能是上、下、左、右的任意一个：

function changeDirection(direction:'up'|'down'|'left'|'right')
{
    console.log(direction)
}

十四、枚举

枚举enum：定义一组命名常量，它描述一个值，该值可以是这些命名常量中的一个。类似于字面量类型+联合类型组合的功能，也可以表示一组明确的可选值

enum Direction {Up , Down , Left , Right}
function changeDirection(direction: Direction){
    console.log(direction)
}

实参的值应该是枚举Direction成员的任意一个。
访问枚举成员：

changeDirection(Direction.Up)

• 枚举成员是有值的。默认从0开始自增：
  Direction.Up=0 Direction.Down =1 ....
• 枚举成员的值为数字的枚举称为：数字枚举。也可以给枚举成员初始化值：

enum Direction {Up = 10 , Down , Left , Right}
//Direction.Down=11 ,left=12....
enum Direction {Up = 10 , Down = 2 , Left = 4 , Right = 9}

• 字符串枚举：枚举成员的值是字符串，字符串枚举的每个人成员必须有初始值，他们没有自增长行为

enum Direction {Up = 'Up' , Down='Down' , Left='Left' , Right='Right'}

由于枚举不仅用作类型，枚举成员也都有值，所以枚举类型会被编译为JS代码，JS会将其编译为一个对象

十五、any类型

将变量设为any时，该变量就不受任何类型约束，且不会有代码提示，出现任何形式的错误都不会有报错产生

let obj :any={x:0}
obj.bar =100
obj()
const n:number =obj

十六、typeof

typeof：可以在类型上下文中引用变量或属性的类型（类型查询）
使用场景：根据已有变量的值，获取该值的类型来简化类型书写

let p = {x:1,y:2}
function formatPoint(point:{x:number,y:number}){}
formatPoint(p)

可以写成：

function formatPoint(point:typeof p){}
formatPoint(p)

typeof只能用来查询变量或属性的类型，无法查询其他形式的类型（比如：函数调用类型）

十七、class类

class类通过实例化生成object对象，TS的class，不仅提供了class的语法功能，也作为一种类型存在。

class Person{
    age:number
    gender='男'
    constructor(age:number,gender :string){//构造函数、构造函数不需要设定返回值
        this.age=age
        this.gender=gender
    }
    x=10
    y=10
    scale(n:number):void{//方法的类型注解(参数和返回值)与函数用法相同
        this.x *= n;
        this.y*=n; 
    }
}
const p =new Person(19,'男')

• 类继承的两种方式：（1）extends（继承父类）（2）implements（实现接口）

class Animal{//父类
    move(){console.log('Moving!')}
}
class Dog extends Animal{//子类
    name='狗'
    back(){console.log('汪！')}
}
const dog= new Dog()
dog.back()
dog.move()
console.log(dog.name)
//接口实现
interface Singable{
    sing():void
}
class Person implements Singable{
//指person类中必须提供Singable接口中指定的所有方法和属性
    sing(): void {
        console.log('123');
    }
}

• readonly：表示只读，用来防止在构造函数之外对属性进行赋值。只能设定默认值和在构造函数是对其进行赋值。但readonly只能修饰属性不能修饰方法。readonly来修饰属性必须手动提供明确的类型

class Person{
readonly age:number =18
readonly age1 =18 //那么18就是age的字面量
    constructor(age:number){
        this.age=age
    }
}