Typescript笔记

于 2023-11-19 01:07:05 发布
阅读量73 收藏
点赞数
文章标签： typescript 笔记 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40121308/article/details/134486059
版权

TypeScript基本概念

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

安装编译 TS 的工具包

安装命令

 npm i -g typescript 或者 yarn global add typescript

typescript 包：用来编译 TS 代码的包，提供了 tsc 命令，实现了 TS -> JS 的转化

验证是否安装成功：tsc –v(查看 typescript 的版本)

编译并运行 TS 代码

  1. 创建 hello.ts 文件（注意：TS 文件的后缀名为 .ts ）
  2. 将 TS 编译为 JS：在终端中输入命令， tsc hello.ts （此时，在同级目录中会出现一个同名的
    JS 文件）
  3. 执行 JS 代码：在终端中输入命令， node hello.js

创建 ts 文件 => 2 编译 TS = > 3 执行 JS

说明：所有合法的 JS 代码都是 TS 代码，有 JS 基础只需要学习 TS 的类型即可
注意：由 TS 编译生成的 JS 文件，代码中就没有类型信息了。真正在开发过程中，其实不需要自己手动的通过tsc把ts文件转成js文件，这些工作应该交给webpack或 者vite来完成

TypeScript类型概述

  1. JS 已有类型
    原始类型，简单类型（ number/string/boolean/null/undefined ）
    复杂数据类型（数组，对象，函数等）
  2. TS 新增类型
    联合类型
    自定义类型（类型别名）
    接口
    元组
    字面量类型
    枚举
    void
    …

TypeScript原始数据类型

原始类型：number/string/boolean/null/undefined
特点：简单，这些类型，完全按照 JS 中类型的名称来书写

let age: number = 18 
let myName: string = '老师' 
let isLoading: boolean = false

数组类型

// 写法一： l
et numbers: number[] = [1, 3, 5] 
// 写法二： 
let strings: Array<string> = ['a', 'b', 'c']

联合类型

能够通过联合类型将多个类型组合成一个类型

解释： | （竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种

let timer: number | null = null 
timer = setInterval(() => {}, 1000) 
// 定义一个数组，数组中可以有数字或者字符串, 需要注意 | 的优先级 
let arr: (number | string)[] = [1, 'abc', 2]

类型别名

类型别名（自定义类型） ：为任意类型起别名
使用场景：当同一类型（复杂）被多次使用时，可以通过类型别名，简化该类型的使用

type CustomArray = (number | string)[] 
let arr1: CustomArray = [1, 'a', 3, 'b'] 
let arr2: CustomArray = ['x', 'y', 6, 7]
  1. 使用 type 关键字来创建自定义类型
  2. 类型别名（比如，此处的 CustomArray ）可以是任意合法的变量名称
  3. 推荐使用大写字母开头
  4. 创建类型别名后，直接使用该类型别名作为变量的类型注解即可

函数类型

函数的类型实际上指的是： 函数参数 和 返回值 的类型

  1. 单独指定参数、返回值的类型：
// 函数声明
function add(num1: number, num2: number): number { 
	return num1 + num2 
}
// 箭头函数 
const add = (num1: number, num2: number): number => { 
	return num1 + num2
}
  1. 同时指定参数、返回值的类型:
type AddFn = (num1: number, num2: number) => number 
const add: AddFn = (num1, num2) => { 
	return num1 + num2 
}

void 类型

如果函数没有返回值，那么，函数返回值类型为： void

function greet(name: string): void { 
	console.log('Hello', name) 
}
// 如果什么都不写，此时，add 函数的返回值类型为： 
void const add = () => {} 
// 这种写法是明确指定函数返回值类型为 void，与上面不指定返回值类型相同 
const add = (): void => {} 
// 但，如果指定 返回值类型为 undefined，此时，函数体中必须显示的 return undefined 才可以 
const add = (): undefined => { 
	// 此处，返回的 undefined 是 JS 中的一个值 
	return undefined 
}

可选参数(?)

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

// 数组的 slice 方法，可以 slice() 也可以 slice(1) 还可以 slice(1, 3)
function mySlice(start?: number, end?: number): void { 
	console.log('起始索引：', start, '结束索引：', end) 
}
  1. 可选参数：在可传可不传的参数名称后面添加 ? （问号）
  2. 注意：可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数

对象类型

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

// 空对象 
let person: {} = {} 
// 有属性的对象 
let person: { name: string } = { 
	name: '同学'
}
// 既有属性又有方法的对象 
// 在一行代码中指定对象的多个属性类型时，使用 `;`（分号）来分隔 
let person: { name: string; sayHi(): void } = { 
	name: 'jack', 
	sayHi() {} 
}
// 对象中如果有多个类型，可以换行写： 
// 通过换行来分隔多个属性类型，可以去掉 `;` 
let person: { name: string sayHi(): void } = { 
	name: 'jack',
	sayHi() {}
 }

箭头函数形式的方法类型

{ 
	greet(name: string):string, 
	greet: (name: string) => string 
}
type Person = { 
	greet: (name: string) => void 
	greet(name: string): void 
}
let person: Person = { 
	greet(name) { 
		console.log(name) 
	} 
}

对象可选属性

对象的属性或方法，也可以是可选的，此时就用到可选属性了

type Config = { 
	url: string 
	method?: string 
}
function myAxios(config: Config) { 
	console.log(config) 
}

使用类型别名

注意：直接使用 {} 形式为对象添加类型，会降低代码的可读性（不好辨识类型和值）
推荐：使用类型别名为对象添加类型

// 创建类型别名 
type Person = { 
	name: string 
	sayHi(): void 
}
// 使用类型别名作为对象的类型： 
let person: Person = {
	 name: 'jack', 
	 sayHi() {} 
}

接口类型

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

  1. 使用 interface 关键字来声明接口
  2. 接口名称(比如，此处的 IPerson)，可以是任意合法的变量名称，推荐以 I 开头
  3. 声明接口后，直接使用接口名称作为变量的类型
  4. 因为每一行只有一个属性类型，因此，属性类型后没有 ;(分号)
interface IPerson { 
	name: string 
	age: number 
	sayHi(): void 
}
let person: IPerson = { 
	name: 'jack',
	age: 19, 
	sayHi() {} 
}

interface vs type

  1. interface（接口）和 type（类型别名）的对比：
  2. 相同点：都可以给对象指定类型
  3. 不同点:
  4. 接口，只能为对象指定类型
  5. 类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名
    推荐：能使用 type 就是用 type
interface IPerson { 
	name: string 
	age: number
	sayHi(): void
}
// 为对象类型创建类型别名 
type IPerson = { 
	name: string 
	age: number 
	sayHi(): void
}
// 为联合类型创建类型别名
 type NumStr = number | string

接口继承

  1. 如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用
  2. 比如，这两个接口都有 x、y 两个属性，重复写两次，可以，但很繁琐
interface Point2D { x: number; y: number } 
interface Point3D { x: number; y: number; z: number }

// 更好的方式
interface Point2D { 
	x: number; y: number 
}
 // 继承 
 Point2D interface Point3D extends Point2D { 
	 z: number 
 }

元组类型

场景：在地图中，使用经纬度坐标来标记位置信息
可以使用数组来记录坐标，那么，该数组中只有两个元素，并且这两个元素都是数值类型

let position: number[] = [116.2317, 39.5427]
  1. 使用 number[] 的缺点：不严谨，因为该类型的数组中可以出现任意多个数字
  2. 更好的方式： 元组 Tuple
  3. 元组类型是另一种类型的数组，它确切地知道包含多少个元素，以及特定索引对应的类型
let position: [number, number] = [39.5427, 116.2317]
  1. 元组类型可以确切地标记出有多少个元素，以及每个元素的类型
  2. 该示例中，元素有两个元素，每个元素的类型都是 number

类型推论

  1. 在 TS 中，某些没有明确指出类型的地方，TS 的类型推论机制会帮助提供类型
  2. 换句话说：由于类型推论的存在，这些地方，类型注解可以省略不写
// 变量 age 的类型被自动推断为：number 
let age = 18 
// 函数返回值的类型被自动推断为：number
function add(num1: number, num2: number): number { 
	return num1 + num2 
}
  1. 推荐：能省略类型注解的地方就省略（偷懒，充分利用TS类型推论的能力，提升开发效率）
  2. 技巧：如果不知道类型，可以通过鼠标放在变量名称上，利用 VSCode 的提示来查看类型

字面量类型

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

通过 TS 类型推论机制，可以得到答案：

  1. 变量 str1 的类型为：string
  2. 变量 str2 的类型为：‘Hello TS’
  3. str1 是一个变量(let)，它的值可以是任意字符串，所以类型为:string
  4. str2 是一个常量(const)，它的值不能变化只能是 ‘Hello TS’，所以，它的类型为:‘Hello TS’

注意：此处的 ‘Hello TS’，就是一个字面量类型，也就是说某个特定的字符串也可以作为 TS 中的类型
任意的 JS 字面量（比如，对象、数字等）都可以作为类型使用

使用模式和场景

  1. 使用模式：字面量类型配合联合类型一起使用
  2. 使用场景：用来表示一组明确的可选值列表
  3. 比如，在贪吃蛇游戏中，游戏的方向的可选值只能是上、下、左、右中的任意一个
// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'
function changeDirection(direction: Direction) { 
	console.log(direction)
}
// 调用函数时，会有类型提示：
changeDirection('up')

枚举类型

  1. 枚举的功能类似于字面量类型+联合类型组合的功能，也可以表示一组明确的可选值
  2. 枚举：定义一组命名常量。它描述一个值，该值可以是这些命名常量中的一个
// 创建枚举 
enum Direction { Up, Down, Left, Right } 
// 使用枚举类型
function changeDirection(direction: Direction) { 
	console.log(direction) 
}
// 调用函数时，需要应该传入：枚举 Direction 成员的任意一个 
// 类似于 JS 中的对象，直接通过 点（.）语法 访问枚举的成员 
changeDirection(Direction.Up)
  1. 使用 enum 关键字定义枚举
  2. 约定枚举名称以大写字母开头
  3. 枚举中的多个值之间通过 , （逗号）分隔
  4. 定义好枚举后，直接使用枚举名称作为类型注解

数字枚举

  1. 问题：我们把枚举成员作为了函数的实参，它的值是什么呢?
  2. 解释：通过将鼠标移入 Direction.Up，可以看到枚举成员 Up 的值为 0
  3. 注意：枚举成员是有值的，默认为：从 0 开始自增的数值
  4. 我们把，枚举成员的值为数字的枚举，称为： 数字枚举
  5. 当然，也可以给枚举中的成员初始化值
// Down -> 11、Left -> 12、Right -> 13 
enum Direction { Up = 10, Down, Left, Right } 
enum Direction { Up = 2, Down = 4, Left = 8, Right = 16 }

字符串枚举

  1. 字符串枚举：枚举成员的值是字符串
  2. 注意：字符串枚举没有自增长行为，因此，字符串枚举的每个成员必须有初始值
enum Direction { 
	Up = 'UP', 
	Down = 'DOWN',
	Left = 'LEFT', 
	Right = 'RIGHT' 
}

any 类型

  1. 原则:不推荐使用 any!这会让 TypeScript 变为 “AnyScript”(失去 TS 类型保护的优势)
  2. 因为当值的类型为 any 时，可以对该值进行任意操作，并且不会
有代码提示

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

类型断言

有时候你会比 TS 更加明确一个值的类型，此时，可以使用类型断言来指定更具体的类型。 比如，

const aLink = document.getElementById('link')
  1. 注意：该方法返回值的类型是 HTMLElement，该类型只包含所有标签公共的属性或方法，不包含 a标签特有的 href 等属性
  2. 因此，这个类型太宽泛(不具体)，无法操作 href 等 a 标签特有的属性或方法
  3. 解决方式：这种情况下就需要使用类型断言指定更加具体的类型
    使用类型断言：
const aLink = document.getElementById('link') as HTMLAnchorElement
  1. 使用 as 关键字实现类型断言
  2. 关键字 as 后面的类型是一个更加具体的类型（HTMLAnchorElement 是HTMLElement 的子类型）
  3. 通过类型断言，aLink 的类型变得更加具体，这样就可以访问 a 标签特有的属性或方法了

另一种语法，使用 <> 语法，这种语法形式不常用知道即可:

// 该语法，知道即可： 
const aLink = <HTMLAnchorElement>document.getElementById('link')

TypeScript泛型

泛型-基本介绍

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

创建一个 id 函数，传入什么数据就返回该数据本身(也就是说，参数和返回值类型相同)

function id(value: number): number { return value }
  1. 比如，id(10) 调用以上函数就会直接返回 10 本身。但是，该函数只接收数值类型，无法用于其他类型
  2. 为了能让函数能够接受任意类型，可以将参数类型修改为 any。但是，这样就失去了 TS 的类型保护，类型不安全
function id(value: any): any { return value }

泛型在保证类型安全(不丢失类型信息)的同时，可以让函数等与多种不同的类型一起工作，灵活可复用

泛型-泛型函数

定义泛型函数

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

调用泛型函数

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

同样，如果传入类型 string，函数 id 参数和返回值的类型就都是 string
这样，通过泛型就做到了让 id 函数与多种不同的类型一起工作，实现了复用的同时保证了类型安全

简化泛型函数调用

// 省略 <number> 调用函数 
let num = id(10) 
let str = id('a')
  1. 在调用泛型函数时，可以省略 <类型> 来简化泛型函数的调用
  2. 此时，TS 内部会采用一种叫做类型参数推断的机制，来根据传入的实参自动推断出类型变量Type 的类型
  3. 比如，传入实参 10，TS 会自动推断出变量 num 的类型 number，并作为 Type 的类型

泛型约束

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

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

解释：

  1. Type 可以代表任意类型，无法保证一定存在 length 属性，比如 number 类型就没有 length
  2. 此时，就需要为泛型添加约束来 收缩类型 (缩窄类型取值范围)
  3. 添加泛型约束收缩类型，主要有以下两种方式：1 指定更加具体的类型 2 添加约束

指定更加具体的类型

比如，将类型修改为 Type[] (Type 类型的数组)，因为只要是数组就一定存在 length 属性，因此就可以访问了

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

添加约束

// 创建一个接口 
interface ILength { length: number } 
// Type extends ILength 添加泛型约束 
// 解释：表示传入的 类型 必须满足 ILength 接口的要求才行，也就是得有一个 number 类型的 length 属性

function id<Type extends ILength>(value: Type): Type { 
	console.log(value.length) 
	return value 
}
  1. 创建描述约束的接口 ILength，该接口要求提供 length 属性
  2. 通过 extends 关键字使用该接口，为泛型(类型变量)添加约束 3. 该约束表示：传入的类型必须具有 length 属性

多个类型变量

泛型的类型变量可以有多个，并且类型变量之间还可以约束(比如，第二个类型变量受第一个类型变量约束)
比如，创建一个函数来获取对象中属性的值：

function getProp<Type, Key extends keyof Type>(obj: Type, key: Key) { 
	return obj[key] 
}
let person = { name: 'jack', age: 18 } 
getProp(person, 'name')
  1. 添加了第二个类型变量 Key，两个类型变量之间使用 , 逗号分隔。
  2. keyof 关键字接收一个对象类型，生成其键名称(可能是字符串或数字)的联合类型。
  3. 本示例中 keyof Type 实际上获取的是 person 对象所有键的联合类型，也就是： ‘name’ | ‘age’
  4. 类型变量 Key 受 Type 约束，可以理解为：Key 只能是 Type 所有键中的任意一个，或者说只能访问对象中存在的属性
// Type extends object 表示： Type 应该是一个对象类型，如果不是 对象 类型，就会报错
 // 如果要用到 对象 类型，应该用 object ，而不是 Object
function getProperty<Type extends object, Key extends keyof Type>(obj: Type, key: Key) { 
	return obj[key] 
}

泛型接口

泛型接口：接口也可以配合泛型来使用，以增加其灵活性，增强其复用性

interface IdFunc<Type> { 
	id: (value: Type) => Type 
	ids: () => Type[] 
}
let obj: IdFunc<number> = { 
	id(value) { return value }, 
	ids() { return [1, 3, 5] } 
}
  1. 在接口名称的后面添加 <类型变量> ，那么，这个接口就变成了泛型接口。
  2. 接口的类型变量，对接口中所有其他成员可见，也就是接口中所有成员都可以使用类型变量。
  3. 使用泛型接口时，需要显式指定具体的类型(比如，此处的 IdFunc)。
  4. 此时，id 方法的参数和返回值类型都是 number;ids 方法的返回值类型是number[]。

JS 中的泛型接口

实际上，JS 中的数组在 TS 中就是一个泛型接口。

const strs = ['a', 'b', 'c'] 
// 鼠标放在 forEach 上查看类型 
strs.forEach const nums = [1, 3, 5] /
/ 鼠标放在 forEach 上查看类型 
nums.forEach

解释:当我们在使用数组时，TS 会根据数组的不同类型，来自动将类型变量设置为相应的类型
技巧:可以通过 Ctrl + 鼠标左键(Mac：Command + 鼠标左键)来查看具体的类型信息

技术钱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
TypeScript笔记
11-19
TypeScript概述：什么是 TypeScript？ TypeScript的优点；JavaScript、TypeScript、ES6三者之间的联系 和区别 ；快速上手TypeScript ；
TypeScript笔记-011
08-03
声明方法;//只能声明方法，不能定义方法体class 类名 implements 接口名{// 必须实现接口中所有的属性和方法分类：泛型类泛型接口泛型函数6.2
typescript笔记
qq_31539817的博客
05-25 792
一：typescript介绍和环境搭建 1.typescript介绍 TS是属于JavaScript的超集，可以编译成纯JavaScript，TS新增了许多特性，例如数据类型、类、继承以及接口等。 2，typescript环境搭建 i.项目环境搭建 安装node.js=>全局按照typescript：npm i -g typescript ii.编写一个ts文件并编译 编写一个.ts文件=>命令行tsc b.ts=>编译成一个JavaScript文件。 iii.vscode
【TypeScript】 笔记
weixin_49174517的博客
10-26 1256
TypeScript 是微软推出的一门语言，强类型语言TypeScript 是 JavaScript 的父级，里面包含了 JavaScript 以及 ES567，它可以编译成 js在 JavaScript 之上新增了类型和完整的面向对象功能，使用 ts 编写的项目更加稳健，并且更容易扩展和维护。
TypeScript笔记（超全）
weixin_45727272的博客
07-22 1064
1.TypeScript中的基本类型 TypeScript中的基本类型： 类型声明 类型声明是TS非常重要的一个特点； 通过类型声明可以指定TS中变量（参数、形参）的类型； 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错； 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值； 语法： let 变量: 类型; let 变量: 类型 = 值; function fn(参数: 类型, 参数: 类型): 类型{ ... }
Typescript 笔记
qq_38779317的博客
07-16 304
typescript 笔记
TypeScript的学习笔记
03-14
TypeScript的学习笔记
typescript 笔记.xmind
07-01
typescript 基础语法 环境搭建 数据类型 Array(数组) 元组
NotasTypeScript:我的TypeScript笔记
04-17
NotesTypeScript 我的TypeScript笔记我们使用nvm软件包来拥有多个版本的npm nvm --list nvm -v nvm use （建议nvm use LTS） npm install -g typescript 安慰tsc hello.ts //编译成js node hello.js //在带节点的...
Thyiad#learn#typescript笔记1
07-25
1. 带静态函数的枚举 3. lib选项能提供精细的控制 4.函数 5.类型兼容 7.索引签名 9.高级类型
typescript完整笔记
06-15
TypeScript是一种由微软开发的开源编程语言，它是JavaScript的一个超集，可以编译成纯JavaScript代码。TypeScript提供了静态类型检查、类、接口、泛型等面向对象编程特性，可以帮助开发人员编写更加健壮、可维护的...
typeScript学习笔记
04-27
TypeScript学习笔记 TypeScript是一个自由和开源的编程语言，由微软开发。它是JavaScript的一个超集，扩展了JavaScript的语法，解决了JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化。TypeScript支持...
typescript学习笔记
12-09
typescript学习笔记 阅读官方文档 做一些基础知识整理 以便于之后要用到ts开发 用于快速查阅
learn-typescript:TypeScript笔记源代码
03-23
TypeScript笔记原始码 参考：
TypeScript 学习笔记
05-16
大学牲学习 TypeScript 的学习笔记，欢迎小伙伴们一起来学习！
TypeScript学习笔记
02-07
TypeScript学习笔记
前端篇关于TypeScript 学习笔记
最新发布
05-21
TypeScript 类型体操通关秘籍与TypeScript全面进阶指南，Vue3+React18+TS4入门到实战系统学习3大热门技术，需要的朋友可以自行下载观看！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值