TypeScript

TypeScript

简介

1.ts是js的超集，在js的基础上，添加了类型支持（:表示）

2.ts属于静态类型（编译期做类型检查）的编程语言，减少不同类型的赋值错误（意外行为），js属于动态类型（执行期进行类型检查）

3.可维护，减少bug，有错误代码提示，支持最新es语法

4.ts编译生成的js文件，代码中就没有类型信息了（大部分）

5.类型推断机制，不需要在每个地方都显示标注类型

使用ts

1.npm i -g typescript 命令查看版本tsc - v 解析ts文件命令 tsc hello.ts 执行node hello.js

2.简化操作 npm i -g ts-node 执行 ts-node hello.ts

类型注解

JS已有类型

1.原始类型：number/string/boolean/null/undefined/symbol

• let age:number = 18 约定age的类型只为number类型，赋其他类型会提示错误

2.对象类型：object(包括，数组，对象，函数等对象)

2.1数组类型（推荐number[]）

1. let numbers:number[] = [1,3,5]
2. let strings:Array<string> = [‘a’,‘b’,‘c’]

2.2联合类型的数组类型

1. let arr:(number|string)[] = [1,‘a’,2,‘b’]

2.3函数类型（参数和返回值的类型）

1. 单独指定参数，返回值的类型

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

2. 同时指定参数、返回值的类型

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

   注意：这种形式只适用于函数表达式

3. 没有返回值的函数,返回值类型为void

   • function greet(name:string):void{ console.log(‘hello’,name) }

4. 函数可选参数

   • function mySlice(start?:number,end?:number):void{ console.log( ‘起始索引’,start,‘结束索引’,end) }

   注意：可选参数只能出现在参数列表的最后，没有给的参数打印为undefined

2.4对象类型（属性和方法的类型）描述对象的类型

1. 定义对象

   • let person:{ name:string;age:number;sayHi(name：string):void } = { name:‘jack’,age:19,sayHi(){} }

   注意：在一行代码中指定多个属性类型时，使用分号;来分隔

   如果一行代码只指定一个属性类型，通过换行来分隔，可以去掉分号

   函数可以使用箭头函数形式sayHi:()=>void

2. 对象以函数参数形式(可选属性和可选参数的语法一致)

   • function myAxios(config:{ url:string;method?:string}){ console.log(config) }

TS新增类型

联合类型，自定义类型（类型别名）、接口、元组、字面量类型、枚举、void、any等

1.类型别名type

type CustomArray = (number|string)[]

let arr1:CustomArray = [1,‘a’,2,‘b’]

2.接口interface（某个对象类型多次使用的时候，复用）

// 换行  可加可不加分号
interface IPerson{
    name:string;
    age:number;
    sayHi():void;
}
// 定义对象的时候直接使用
let person:IPerson ={
    name:'jack',
    age:19,
    sayHi(){}
}

重点：interface只能为对象指定类型，而type可以为任意类型指定别名

3.元组类型(规定数组中有几个数据，例如经纬度)

let position:[number,number] = [39.5427,116.2317]

4.字面量类型

1. let str1 = “Hello TS” 类型推论str1为string类型

   const str2 = ‘Hello TS’ 类型推论str2为’Hello TS’字面量类型，因为const是常量

   注意：除了字符串以外，任意的JS字面量（比如对象，数字等）都可以作为类型使用

2. 场景：配合联合类型，用来表示一组明确的可选值列表，比如贪吃蛇游戏中的方向，比string类型更加严谨

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

5.枚举类型enum（类似字面量+联合类型）推荐使用字面量+联合类型

5.1数字枚举（成员的值为数字）

定义一组命名常量,枚举中的值用大写字母开头

enum Direction { Up, Down, Left, Right }
// 直接使用
function changeDirection(direction:Direction){
    console.log(direction)  
}

访问枚举成员（通过点(.)语法）：

changeDirection(Direction.Up)   //  Direction.Up的值为0  //打印为0


// 可以给枚举中的成员初始化值
enum Direction { Up=10,Down,Left,Right }

注意：数字枚举成员是有值的，默认为：从0开始自增的数值

5.2字符串枚举（成员的值为字符串）

enum Direction{
	Up = 'UP',
	Down = 'DOWN',
	Left = 'LEFT',
	Right = 'RIGHT'
}

5.3枚举特性

1. 由于枚举不仅用于类型，还提供值，是TS为数不多的非JavaScript类型级扩展（不仅仅是类型）的特性之一
2. 枚举类型会被编译为JS代码，其他的类型会在编译为JS代码时自动移除

enum Direction{
	Up = 'UP',
	Down = 'DOWN',
	Left = 'LEFT',
	Right = 'RIGHT'
}

// 编译为
var Direction；
（function（Direction）{
	Direction["Up"] = "UP";
	Direction["Down"] = "DOWN";
	Direction["left"] = "LEFT";
	Direction["right"] = "RIGHT";
}）（Direction || （Direction = {}））；

注意：字符串枚举成员没有自增长行为，所以每个成员必须有初始值

6.any类型（任何类型）

• 隐式具有any类型的情况
  1. 声明变量不提供类型也不提供默认值
  2. 函数参数不加类型

注意：临时给类型，可以先给any

7.接口的继承（extends）

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 }

8.类型推论（推断）

省略不写类型注解，类型推论机制会帮助提供类型

1.声明变量并初始化时2.决定函数返回值时

let age = 18
// ts自动推断出变量为number类型
function（num1：number，num2：number）{ return num1 + num2 }
// number类型+number类型  推断出返回也是number

9.类型断言（指定更具体的类型）

<a href="http://www.itcast.cn/" id="link">传智教育</a>
const alink = document.getElementById('link')
console.log(alink)   // 打印出标签<a href="http://www.itcast.cn/" id="link">传智教育</a>
//类型太宽泛（不具体），无法操作href等a标签特有的属性或方法

//使用类型断言指定更加具体的类型
const alink = document.getElementById('link') as HTMLAnchorElement
另一种方法
const alink = <HTMLAnchorElement>document.getElementById('link')

注意：getElementById方法返回的类型时HTMLElement,该类型只包含所有标签的公共属性或方法，不包含a标签特有的href等属性。HTMLAnchorElement是HTMLElement的子类型，更具体

技巧：在控制台中，通过console.dir()打印DOM元素，在属性列表的最后面，即可看到该元素的类型。

个人认为：适合用于事件委托

9.typeof操作符

9.1在JS中用于获取数据的类型

console.log( typeof “Hello world” ) // 打印为 string 数组和对象都是object

9.2在TS中，可以在类型上下文中引用变量或属性的类型（类型查询）

根据已有变量的值，获取该值的类型，来简化类型书写 函数参数举例

let p = { x:1  , y=2 }

function formatPoint(point:{x:number;y:number}){}
formatPoint(p)

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

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

Typescript高级类型

class类型，ts全面支持es2015中引入的class关键字，并为其添加了类型注解和其他语法（如，可见性修饰符等）

根据ts中的类型推论，可以知道Person类的实例对象p的类型为Person

ts中的class，不仅提供了class的语法功能，也作为一种类型存在

class Person {
  age:number
    //类型推论，不用加类型注解
  gender ='男' 
    // gender:string = '男'
} 

const p =  new Person()  

// constructor 是一种用于创建和初始化 class 对象实例的特殊方法。
class Person {
    // 成员初始化，才可以通过this.age来访问实例成员
    age:number
    gender:string
    // 需要为构造函数指定类型注解，否则隐式any、另外，构造函数不需要返回值类型
    constructor(age:number,gender:string){
        this.age = age
        this.gender = gander
    }
}

实例方法

class Point{
    x=10
    y=10
    
    scale(n:number):void{
        this.x*=n
        this.y*=n
    }
}

1.class类继承

1.1extends(继承父类) JS中

class Animal {
    move(){
        console.log('Moving along')
    }
}

class Dog extends Animal{
    bark(){ console.log('汪汪')  }
}

const dog = new Dog()

实例对象dog同时有了父类Animal和子类Dog的所有属性和方法

1.2implements(实现接口) TS

interface Singable{
    sing():void
}
class Person implements Singable{
    sing(){
        console.log('你是我的小鸭')
    }
}

Person类实现接口Singable意味着，Person类中必须提供Singable接口中指定的方法和属性

2.可见性修饰符（类成员可见性）

使用Ts来控制class的方法和属性对于class外的代码是否可见

2.1public(公有的)，任何地方都可以访问，可直接省略，默认可见性

class Animal {
    public move(){
        console.log('Moving along')
    }
}

2.2protected(受保护的)，仅对其声明所在类和子类中(非实例对象)可见

class Animal {
    protected move() { console.log('Moving along') }
 }
class Dog extends Animal {
    bark(){
        console.log('汪')
        this.move()
    }
}

在子类的方法内部可以通过this来访问父类中受保护的成员，但是，对实例不可见！
const d = new Dog()
// 实例对象p不能调用move方法

2.3private(私有的，只有在当前类中可见)，对实例对象以及子类也是不可见的

class Animal{
    private move() { console.log('Moving along') }
    walk(){
        this.move()
    }
}

3.只读修饰符

3.1readonly：表示只读，用来防止在构造函数之外对属性进行赋值

class Person {
    readonly age:number = 18
    constructor(age:number){
        this.age = age
    }
}

注意：readonly只能修饰属性不能修饰方法；

​ 属性age后面的类型注解，如果不加，则age的类型为字面量类型18

​ 接口或者{}表示的对象类型，也可以使用readonly