TypeScript笔记

什么是TypeScript

• TypeScript (简称：TS)是JavaScript的超集（JS有的TS都有）
• TypeScript = Type + JavaScript（在JS基础之上，为JS添加了类型支持）
• TypeScript是微软开发的开源编程语言，可以在任何运行JavaScript的地方运行

JS与TS区别

TypeScript 属于静态类型的编程语言，JS 属于动态类型的编程语言
静态类型：编译期做类型检查； 动态类型：执行期做类型检查

也就是说：对于 JS 来说：需要等到代码真正去执行的时候才能发现错误（晚）。对于 TS 来说：在代码编译的时候（代码执行前）就可以发现错误（早）。

TypeScript常用类型

类型注解

let age: number=18

number为类型注解，为变量添加类型约束
约定了什么类型，就只能给变量赋值该类型的值

常用基础类型概述

分为JS已有类型和TS新增类型
1.JS已有类型

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

原始类型

let age:number=18
let name:string='甘雨晗'
let f:boolean=false

数据类型

两种写法

let numbers:number[]=[1,3,5]//推荐这一种写法
let strings:Array<string>=['a','b','c']

如果数组中既有number类型又有string类型

let arr:(number|string)[] = [1,'a',3,'b']

== | (竖线)在TS中叫做联合类型（由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种）==
类型别名
=自定义类型：为任意类型起别名。
*当同一类型（复杂）被多次使用时，可以通过类型别名，简化类型的使用。

type Cus=(number | string)[]
let arr1: Cus=[1,'a',2,'b']
let arr2: Cus=['x','y',6,7]

函数类型
函数的类型实际上指的是：函数参数和返回值的类型
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
}

函数类型

function greet(name:string):void{//没有返回值的函数返回值类型为void
console.log('Hello',name)
}

使用函数实现某个功能时，参数可以传也可以不传。这种情况下，在给函数参数指定类型时，就用到可选参数了。

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

可选参数：在可传可不传的参数名称后面添加 ?（问号）。
注意：可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数。

对象类型
JS 中的对象是由属性和方法构成的，而 TS 中对象的类型就是在描述对象的结构（有什么类型的属性和方法）
对象类型的写法：

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

接口
当一个对象类型被多次使用时，一般会使用接口（interface）来描述对象的类型，达到复用的目的

interface IPerson{
name:string
age:number
sayHi():void
}

let person:IPerson={
name:'jack',
age:19,
sayHi(){}
}

1. 使用 interface 关键字来声明接口。
2. 接口名称（比如，此处的 IPerson），可以是任意合法的变量名称。
3. 声明接口后，直接使用接口名称作为变量的类型。
4. 因为每一行只有一个属性类型，因此，属性类型后没有 ;（分号）。

interface（接口）和 type（类型别名）的对比：

• 相同点：都可以给对象指定类型。
• 不同点：
  - 接口，只能为对象指定类型。
  - 类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名。
  元组

场景：在地图中，使用经纬度坐标来标记位置信息。

可以使用数组来记录坐标，那么，该数组中只有两个元素，并且这两个元素都是数值类型。

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

使用 number[] 的缺点：不严谨，因为该类型的数组中可以出现任意多个数字。
更好的方式：元组（Tuple）。
元组类型是另一种类型的数组，它确切地知道包含多少个元素，以及特定索引对应的类型

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

解释：

1. 元组类型可以确切地标记出有多少个元素，以及每个元素的类型。
2. 该示例中，元素有两个元素，每个元素的类型都是 number。

字面量类型

let str1='Hello TS'
const str2='Hello TS'

1. 变量 str1 的类型为：string。
2. 变量 str2 的类型为：‘Hello TS’。

解释：
3. str1 是一个变量（let），它的值可以是任意字符串，所以类型为：string。
4. str2 是一个常量（const），它的值不能变化只能是 ‘Hello TS’，所以，它的类型为：‘Hello TS’。

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

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

解释：参数 direction 的值只能是 up/down/left/right 中的任意一个。
优势：相比于 string 类型，使用字面量类型更加精确、严谨。

any 类型（不推荐）
因为当值的类型为 any 时，可以对该值进行任意操作，并且不会有代码提示。

typeof

JS 中提供了 typeof 操作符，用来在 JS 中获取数据的类型。
TS 也提供了 typeof 操作符：可以在类型上下文中引用变量或属性的类型（类型查询）。

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

解释：

• 使用 typeof 操作符来获取变量 p 的类型，结果与第一种（对象字面量形式的类型）相同。
• typeof 出现在类型注解的位置（参数名称的冒号后面）所处的环境就在类型上下文（区别于 JS 代码）。
• 注意：typeof 只能用来查询变量或属性的类型，无法查询其他形式的类型（比如，函数调用的类型）。

TypeScript 高级类型

class类

class Person{}
      const p:Person
const p=new Person()

1. 根据 TS 中的类型推论，可以知道 Person 类的实例对象 p 的类型是 Person。
2. TS 中的 class，不仅提供了 class 的语法功能，也作为一种类型存在。

示例属性初始化：

class Person{
age:number
gender='男'
//gender: string='男'
}

1. 声明成员 age，类型为 number（没有初始值）。
2. 声明成员 gender，并设置初始值，此时，可省略类型注解（TS 类型推论 为 string 类型）。

构造函数

class Person{
age:number
gender:string
constructor(age:number,gender:string){
this.age=age
this.gender=gender
}
}

1. 成员初始化（比如，age: number）后，才可以通过 this.age 来访问实例成员。
2. 需要为构造函数指定类型注解，否则会被隐式推断为 any；构造函数不需要返回值类型。

示例方法：

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

方法的类型注解（参数和返回值）与函数用法相同。

类继承的两种方式：1 extends（继承父类） 2 implements（实现接口）。
说明：JS 中只有 extends，而 implements 是 TS 提供的。

1.
class Animal{
move(){console.log('Moving along')}
}
class Dog extends Animal{
bark(){console.log('汪')}
}
const dog = new Dog()

2.
interface Single{
sing():void
}
class Person implements Single{
sing(){
console.log('甘雨晗')
}
}

类成员可见性：可以使用 TS 来控制 class 的方法或属性对于 class 外的代码是否可见。

可见性修饰符包括：1 public（公有的） 2 protected（受保护的） 3 private（私有的）。

class Animal{
public move(){  //protected、private
console.log('Moving along')
}
}

除了可见性修饰符之外，还有一个常见修饰符就是：readonly（只读修饰符）。
readonly：表示只读，用来防止在构造函数之外对属性进行赋值。

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

类型兼容性

在结构类型系统中，如果两个对象具有相同的形状，则认为它们属于同一类型。

1.
class point {x:number;y:number}
class point2{x:number;y:number}
const p:point = new point2()

2.
interface point {x:number;y:number}
interface point2{x:number;y:number}
let p1 : point
let p2 : point2=p1

除了 class 之外，TS 中的其他类型也存在相互兼容的情况，包括：1 接口兼容性 2 函数兼容性 等。

• 函数之间兼容性比较复杂，需要考虑：1 参数个数 2 参数类型 3 返回值类型。
  - 参数个数，参数多的兼容参数少的（或者说，参数少的可以赋值给多的）。
  - 参数类型，相同位置的参数类型要相同（原始类型）或兼容（对象类型）。
  - 参数类型，相同位置的参数类型要相同或兼容。
  - 返回值类型，只关注返回值类型本身即可

泛型

泛型是可以在保证类型安全前提下，让函数等与多种类型一起工作，从而实现复用，常用于：函数、接口、class 中。

创建一个 id 函数，传入什么数据就返回该数据本身

function id(value:number):number{return value}

创建泛型函数：

function id<Type>(value:Type):Type{return value}

1. 语法：在函数名称的后面添加 <>（尖括号），尖括号中添加类型变量，比如此处的 Type。
2. 类型变量 Type，是一种特殊类型的变量，它处理类型而不是值。
3. 该类型变量相当于一个类型容器，能够捕获用户提供的类型（具体是什么类型由用户调用该函数时指定）。
4. 因为 Type 是类型，因此可以将其作为函数参数和返回值的类型，表示参数和返回值具有相同的类型。
5. 类型变量 Type，可以是任意合法的变量名称。

调用泛型函数：

const num:number
const num=id<number>(10)


const str:string
const str=id<string>('a')

1. 语法：在函数名称的后面添加 <>（尖括号），尖括号中指定具体的类型，比如，此处的 number。
2. 当传入类型 number 后，这个类型就会被函数声明时指定的类型变量 Type 捕获到。
3. 此时，Type 的类型就是 number，所以，函数 id 参数和返回值的类型也都是 number。

泛型约束：默认情况下，泛型函数的类型变量 Type 可以代表多个类型，这导致无法访问任何属性。
比如，id(‘a’) 调用函数时获取参数的长度：

function id<Type>(value:Type):Type{
console.log(value.length)
return value
}

Type 可以代表任意类型，无法保证一定存在 length 属性，比如 number 类型就没有 length。
此时，就需要为泛型添加约束来收缩类型（缩窄类型取值范围）

添加泛型约束收缩类型，主要有以下两种方式：1 指定更加具体的类型 2 添加约束。

1. 指定更加具体的类型

function id<Type>(value:Type[]):Type[]{
console.log(value.length)
return value
}

2. 添加约束

interface gyh{length:number}
function id<Type extends gyh>(value:Type):Type{
console.log(value.length)
return value
}

• 创建描述约束的接口 ILength，该接口要求提供 length 属性。
• 通过 extends 关键字使用该接口，为泛型（类型变量）添加约束。
• 该约束表示：传入的类型必须具有 length 属性。

泛型类：class 也可以配合泛型来使用。

创建泛型类：

class gyh<NumType>{
defaultValue:NumType
add:(x:NumType,y:NumType)=>NumType
}

1. 类似于泛型接口，在 class 名称后面添加 <类型变量>，这个类就变成了泛型类。
2. 此处的 add 方法，采用的是箭头函数形式的类型书写方式。

const myNum = new gyh<number>()
myNum.defaultValue=10

映射类型

映射类型：基于旧类型创建新类型（对象类型），减少重复、提升开发效率。

可以使用映射类型来进行简化。