TypeScript笔记

2023-06-27 13:19| 来源: 网络整理| 查看: 265

TypeScript 什么是TypeScriptJS与TS区别TypeScript常用类型类型注解常用基础类型概述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=['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(){} } 使用 interface 关键字来声明接口。接口名称（比如，此处的 IPerson），可以是任意合法的变量名称。声明接口后，直接使用接口名称作为变量的类型。因为每一行只有一个属性类型，因此，属性类型后没有 ;（分号）。

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

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

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

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

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

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

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

解释：

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

字面量类型

let str1='Hello TS' const str2='Hello TS' 变量 str1 的类型为：string。变量 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() 根据 TS 中的类型推论，可以知道 Person 类的实例对象 p 的类型是 Person。TS 中的 class，不仅提供了 class 的语法功能，也作为一种类型存在。

示例属性初始化：

class Person{ age:number gender='男' //gender: string='男' } 声明成员 age，类型为 number（没有初始值）。声明成员 gender，并设置初始值，此时，可省略类型注解（TS 类型推论为 string 类型）。

构造函数

class Person{ age:number gender:string constructor(age:number,gender:string){ this.age=age this.gender=gender } } 成员初始化（比如，age: number）后，才可以通过 this.age 来访问实例成员。需要为构造函数指定类型注解，否则会被隐式推断为 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(value:Type):Type{return value} 语法：在函数名称的后面添加（尖括号），尖括号中添加类型变量，比如此处的 Type。类型变量 Type，是一种特殊类型的变量，它处理类型而不是值。该类型变量相当于一个类型容器，能够捕获用户提供的类型（具体是什么类型由用户调用该函数时指定）。因为 Type 是类型，因此可以将其作为函数参数和返回值的类型，表示参数和返回值具有相同的类型。类型变量 Type，可以是任意合法的变量名称。

调用泛型函数：

const num:number const num=id(10) const str:string const str=id('a') 语法：在函数名称的后面添加（尖括号），尖括号中指定具体的类型，比如，此处的 number。当传入类型 number 后，这个类型就会被函数声明时指定的类型变量 Type 捕获到。此时，Type 的类型就是 number，所以，函数 id 参数和返回值的类型也都是 number。

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

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

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

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

指定更加具体的类型 function id(value:Type[]):Type[]{ console.log(value.length) return value } 添加约束 interface gyh{length:number} function id(value:Type):Type{ console.log(value.length) return value } 创建描述约束的接口 ILength，该接口要求提供 length 属性。通过 extends 关键字使用该接口，为泛型（类型变量）添加约束。该约束表示：传入的类型必须具有 length 属性。

泛型类：class 也可以配合泛型来使用。在这里插入图片描述创建泛型类：

class gyh{ defaultValue:NumType add:(x:NumType,y:NumType)=>NumType } 类似于泛型接口，在 class 名称后面添加，这个类就变成了泛型类。此处的 add 方法，采用的是箭头函数形式的类型书写方式。 const myNum = new gyh() myNum.defaultValue=10

映射类型

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

在这里插入图片描述可以使用映射类型来进行简化。

【本文地址】

TypeScript笔记

TypeScript笔记

今日新闻

推荐新闻