TS系列(7):知识点汇总

你好,我是沐爸,欢迎点赞、收藏、评论和关注。

一、TS是什么?

  • TypeScript 由微软开发,是基于 JavaScript 的一个扩展语言
  • TypeScript 包含 JavaScript 的所有内容,是 JavaScript 的超集
  • TypeScript 增加了静态类型检查、接口、泛型等很多现代开发特性,因此更适合大型项目的开发。
  • TypeScript 需要编译为 JavaScript,然后交给浏览器或其他 JavaScript 运行环境执行。
  • TypeScript 支持任意浏览器,任意环境,任意系统并且是开源的。

二、为什么需要TS?

今非昔比的 JavaScript(了解)

  • JavaScript 当年诞生时的定位是浏览器脚本语言,用于在网页中嵌入一些简单的逻辑,而且代码量很少。
  • 随着时间的推移,JavaScript 变得越来越流行,如今的 JavaScript 已经全栈编程了。
  • 现如今的 JavaScript 应用场景比当年丰富的多,代码量也比当年很多,随便一个 JavaScript 项目的代码量,可以轻松达到几万行,甚至几十万行!
  • 然而 JavaScript 当年 "出生简陋",没考虑到如今的应用场景和代码量,逐渐的就出现了很多困扰

JavaScript 中的困扰

1.不清不楚的数据类型

let welcome = 'hello'
welcome() // TypeError: welcome is not a function

2.有漏洞的逻辑

const str = Date.now() % 2 ? '奇数' : '偶数'if (str !== '奇数') {console.log('hello')
} else if (str === '偶数') {console.log('world') // 这里永远不会执行,但不会报错
}

3.访问不存在的属性

const obj = {width: 20,height: 10
}const area = obj.width * obj.heigth // 这里并不会报错console.log(area) // NaN

4.低级的拼写错误

const message = 'hello,world'
message.toUperCase() // 拼写错误但不会提示

【静态类型检查】

  • 在代码运行前进行检查,发现代码的错误或不合理之处,减少运行时异常的出现几率,此种检查叫【静态类型检查】,TypeScript 核心就是【静态类型检查】,简言之就是把运行时的错误前置
  • 同样的功能,TypeScript 的代码量要大于 JavaScript,但由于 TypeScript 的代码结构更加清晰,在后期代码的维护中 TypeScript 却远胜于 JavaScript。

三、编译TS

浏览器不能直接运行 TypeScript 代码,需要编译为 JavaScript 再交给浏览器解析器执行。

1.命令行编译

要把 .ts 文件编译为 .js 文件,需要配置 TypeScript 的编译环境,步骤如下:

  • 第一步:创建一个 demo.ts 文件,例如:
const person = {name: '小明',age: 6
}
console.log(`我叫${person.name},我今年${person.age}岁了`)
  • 第二步:全局安装 TypeScript
npm i typescript -g# 查看版本号
tsc -v
  • 第三步:使用命令编译 .ts 文件
tsc demo.ts# 依次编译多个.ts文件
tsc demo.ts demo2.ts demo3.ts
  • 执行编译命令后,会生成一个 demo.js 文件
var person = {name: '小明',age: 6
};
console.log("\u6211\u53EB".concat(person.name, "\uFF0C\u6211\u4ECA\u5E74").concat(person.age, "\u5C81\u4E86"));

如果 tsc 命令不能被识别,管理员权限打开 PowerShell 输入:set-ExecutionPolicy RemoteSigned 按回车。

2.自动化编译

  • 第一步:创建 TypeScript 编译控制文件
tsc --init
  1. 工程中会生成一个 tsconfig.json 配置文件,其中包含很多编译时的配置。
  2. 观察发现,默认编译的 JS 版本是 ES7,我们可以手动调整为其他版本。
  • 第二步:监视目录中的 .ts 文件变化
tsc --watch

第三步:小优化,当编译出错时不生成 .js 文件(默认情况下出错也会生成 .js 文件)

tsc --noEmitOnError --watch

备注:也可以修改 tsconfig.json 中的 noEmitOnError 配置

3.不编译运行

如果在 Node 环境,可以直接运行.ts 文件吗?答案是可以的。不过需要全局安装 ts-node,然后就可以直接用 node 运行 .ts文件了。

npm i -g ts-nodets-node demo.ts

注意:

相同文件夹下的不同 .ts 文件不能有同名变量,则会提示重复声明变量:

let age: number
// Cannot redeclare block-scoped variable 'age'

其实问题出在了变量命名空间,如果不把文件当作模块使用的话 TypeScript 会认为所有文件里的代码都是在同一个作用域里的,所以即使在不同文件也不能声明同名变量。

七、常用类型

1.any

any的含义是:任意类型,一旦将变量类型限制为 any,那就意味着放弃了对该变量的类型检查。

// 明确的表示a的类型是 any 【显式的any】
let a: any
// 以下对a的赋值,均无警告
a = 100
a = 'hello'
a = false// 没有明确的表示b的类型是any,但TS主动推断出来b是any 【隐式地any】
let b
// 以下对b的赋值,均无警告
b = 100
b = 'hello'
b = false

注意点:any类型的变量,可以赋值给任意类型的变量

let c: any
c = 9let x: string
x = c // 无警告

2.unknown

unknown的含义是未知类型

1.unknown可以理解为一个类型安全的any,适用于不确定数据的具体类型。

// 设置a的类型为unknown
let a: unknown// 以下对a的赋值,均正常
a = 100
a = 'hello'
a = false// 设置x的数据类型为string
let x: string
x = a // Type 'unknown' is not assignable to type 'string'

2.unknown会强制开发者在使用之前进行类型检查,从而提供更强的类型安全性。

// 设置a的类型为unknown
let a: unknown
a = 'hello'// 第一种方式:加类型判断
if (typeof a === 'string') {x = a
}// 第二种方式:加断言
x = a as string// 第三种方式:加断言
x = <string>a

3.读取any类型数据的任何属性都不会报错,而unknown正好与之相反。

let str1: string
str1 = 'hello'
str1.toUpperCase() // 无警告let str2: any
str2 = 'hello'
str2.toUpperCase() // 无警告let str3: unknown
str3 = 'hello'
str3.toUpperCase() // 'str3' is of type 'unknown'// 使用断言强制指定str3的类型为string
(str3 as string).toUpperCase() // 无警告

3.never

never的含义是:任何值都不是,简而言之就是不能有值,undefinednull''0都不行!

1.几乎不用never去直接限制变量,因为没有意义,例如:

// 指定a的类型为never,那就意味着a以后不能存在任何的数据了
let a: never// 以下对a的赋值都会有警告
a = 1
a = true
a = undefined
a = null

2.never一般是TypeScript主动推断出来的,例如:

// 指定a的类型为string
let a: string
a = 'hello'if (typeof a === 'string') {console.log(a.toUpperCase())
} else {console.log(a) // TS会推断出此处的a是never,因为没有任何一个值符合此处的逻辑
}

3.never也可用于限制函数的返回值

// 限制throwError函数不需要有任何返回值,任何值都不行,包括undefined、null
function throwError(str: string): never {throw new Error('程序异常:' + str)
}

4.void

1.void通常用于函数返回值声明,含义:【函数返回值为空,调用者不应该依赖其返回值进行任何操作】

function logMessage(msg: string): void {console.log(msg)
}
logMessage('hello')

注意:编码者没有编写return去指定函数的返回值,所以logMessage函数是没有显式返回值的,但会有一个隐式返回值,就是undefined,即:虽然函数返回类型为void,但也是可以接受undefined的,简单记:undefinedvoid可以接受的一种"空"

2.以下写法均符合规范

function logMessage(msg: string): void {console.log(msg)
}function logMessage(msg: string): void {console.log(msg)return
}function logMessage(msg: string): void {console.log(msg)return undefined
}

3.那限制函数返回值时,是不是undefinedvoid就没有区别呢?----有区别。因为还有这句话:【返回值类型为void的函数,调用者不应该依赖其返回值进行任何操作】对比下面两段代码:

function logMessage(msg: string): void {console.log(msg)
}let result = logMessage('hello')if (result) { // An expression of type 'void' cannot be tested for truthinessconsole.log('logMessage有返回值')
}
function logMessage(msg: string): undefined {console.log(msg)
}let result = logMessage('hello')if (result) { // 这里无警告console.log('logMessage有返回值')
}

理解 void 与 undefined

  • void是一个广泛的概念,用来表达"空",而undefined则是这种"空"的具体实现之一。
  • 因此可以说undefinedvoid能接受的"空"状态的一种具体形式。
  • 换句话说,void包含undefined,但void表达的语义超越了单纯的undefined,它是一种意图上的约定,而不仅仅是特定值的限制。

总结:若函数返回类型void,那么:

  • 从语法上讲:函数可以返回undefined,至于显式返回,还是显式返回,都无所谓!
  • 从语义上讲:函数调用这不应关系函数的返回值,也不应该依赖返回值进行任何操作!即使返回了undefined值。

5.object

关于objectObject,直接说结论:实际开发中用的较少,因为范围太大了。

object(小写)

object的含义是:所有非原始类型,可存储:对象、函数、数组等,由于限制的范围比较宽泛,在实际开发中使用的相对较少

let a: object // a的值可以是任何非原始类型,包括对象、函数、数组等。// 以下代码是将非原始类型赋值给a,所以均符合要求
a = {}
a = {name: '张三'}
a = [1, 2, 3]
a = function() {}
a = new String('hello')
class Person {}
a = new Person()// 以下代码是将原始类型赋值给a,会警告
a = 1
a = true
a = 'hello'
a = null
a = undefined

Object(大写)

  • 官方描述:所有可以调用Object方法的类型。
  • 简单记忆:除了undefinednull的任何值。
  • 由于限制的返回实在太大了!所以实际开发中使用频率极低
let a: Object // a的值必须是Object的实例对象(出去undefined和null的任何值)// 以下代码均无警告,因为赋值给a的值,都是Object的实例对象
a = {}
a = {name: '张三'}
a = [1, 2, 3]
a = function() {}
a = new String('hello')
class Person {}
a = new Person()
a = 1
a = true
a = 'hello'// 以下代码均有警告
a = null // Type 'null' is not assignable to type 'Object'
a = undefined // Type 'undefined' is not assignable to type 'Object'

声明对象类型

1.实际开发中,限制一般对象,通常使用以下形式

// 限制person对象必须有name属性,age为可选属性
let person1: { name: string, age?: number }// 含义同上,也能用分号做分隔
let person2: { name: string; age?: number }// 含义同上,也能用换行做分隔
let person3: {name: stringage?: number
}// 如下赋值均可以
person1 = { name: '张三', age: 18}
person2 = { name: '李四' }
person3 = { name: '王五' }// 如下赋值不合法
person3 = { name: '王五', gender: '男' } // Object literal may only specify known properties, and 'gender' does not exist in type '{ name: string; age?: number | undefined; }'

2.索引签名:允许定义对象可以具有任意数量的属性,这些属性的键和类型是可变的,常用于描述类型不确定的属性,(具有动态属性的对象)。

// 限制person对象必须具有name属性,可选age属性是数字,同时可以具有任意数量、任意类型的属性
let person {name: stringage?: number[key: string]: any // 索引签名,完全可以不用key这个单词,换成其他的也可以
}// 赋值合法
person = {name: '张三',age: 20,gender: '男'
}

声明函数类型

let count: (a: number, b: number) => numbercount = function (x, y) {return x + y
}count = (x, y) => {return x + y
}

备注:

  • TypeScript 中的 => 在函数类型声明时表示函数类型,描述其参数类型返回类型
  • JavaScript 中的 => 是一种定义函数的语法,是具体的函数实现。
  • 函数类型声明还可以使用:接口、自定义类型等方式,下文中会详细讲解。

声明数组类型

let arr1: number[]
let arr2: Array<number> // 泛型arr1 = [1, 2, 3]
arr2 = [4, 5, 6]

6.tuple

元组(tuple)是一种特殊的数组类型,存储一组固定数量固定类型的元素。元组用于精确描述一组值的类型,?表示可选元素。

// 第一个元素必须是 string 类型,第二个元素必须是 number 类型
let arr1: [string, number]// 第一个元素必须是 number 类型,第二个元素时可选的,如果存在,必须是 boolean 类型
let arr2: [number, boolean?]// 第一个元素必须是 number 类型,后面的元素可以是任意数量的 string 类型
let arr3: [number, ...string[]]// 可以赋值
arr1 = ['hello', 123]
arr2 = [100, false]
arr2 = [200]
arr3 = [100, 'a', 'b']
arr3 = [100]// 不可以赋值
arr1 = ['hello', 123, false]

7.enum

枚举(enum)可以定义一组命名常量,它能增强代码的可读性,也让代码更好维护

如下代码的功能是:根据调用walk时传入的不同参数,执行不同的逻辑,存在的问题是调用walk时传参时没有任何提示,开发者很容易写错字符串内容;并且用于判断逻辑的updownleftright连续且相关的一组值,那此时就特别适合使用枚举(enum)

function walk(str: string) {if (str === 'up') {console.log('向上走')} else if (str === 'down') {console.log('向下走')} else if (str === 'left') {console.log('向左走')} else if (str === 'right') {console.log('向右走')} else {console.log('未知方向')}
}walk('up')
walk('down')
walk('left')
walk('right')

1.数字枚举

数字枚举是一种最常见的枚举类型,其成员的值会自动递增,且数字枚举还具备反响映射的特点,在下面代码的打印中,不难发现:可以通过值来获取对应的枚举成员名称。

// 定义一个描述【上下左右】方向的枚举Direction
enum Direction {Up,Down,Left,Right
}console.log(Direction)
//   {
//     '0': 'Up',
//     '1': 'Down',
//     '2': 'Left',
//     '3': 'Right',
//     Up: 0,
//     Down: 1,
//     Left: 2,
//     Right: 3
//   }// 反向映射
console.log(Direction.Up) // 0
console.log(Direction[0]) // Up// 此代码报错,枚举中的属性是只读的
Direction.Up = 'shang' // Cannot assign to 'Up' because it is a read-only property

也可以指定枚举成员的初始值,其后的成员值会自动自增。

enum Direction {Up = 6,Down,Left,Right
}console.log(Direction.Up) // 6
console.log(Direction.Down) // 7

使用数字枚举完成刚才walk函数中的逻辑,此时我们发现:代码更加直观易读,而且类型安全,同时也易于维护。

enum Direction {Up,Down,Left,Right
}function walk(n: Direction) {if (n === Direction.Up) {console.log('向上走')} else if (n === Direction.Down) {console.log('向下走')} else if (n === Direction.Left) {console.log('向左走')} else if (n === Direction.Right) {console.log('向右走')} else {console.log('未知方向')}
}walk(Direction.Up) // 向上走
walk(Direction.Down) // 向下走

3.常量枚举

官方描述:常量枚举是一种特殊枚举类型,它使用 const关键字定义,在编译时会被内联,避免生成一些额外的代码。

使用普通枚举的 TypeScript 代码如下:

enum Direction {Up,Down,Left,Right
}let x = Direction.Up

编译后生成的 JavaScript 代码量较大:

'use strict';var Direction;
(function (Direction) {Direction[Direction["Up"] = 0] = "Up";Direction[Direction["Down"] = 1] = "Down";Direction[Direction["Left"] = 2] = "Left";Direction[Direction["Right"] = 3] = "Right";
})(Direction || (Direction = {}));
var x = Direction.Up;

使用常量枚举的 TypeScript 代码如下:

const enum Direction {Up,Down,Left,Right
}let x = Direction.Up

编译后生成的 JavaScript 代码量较小:

'use strict';var x = 0 /* Direction.Up */;

8.type

type可以为任意类型创建别名,让代码更简洁、可读性更强,同时能更方便地进行复用和扩展。

1.基本用法

类型别名使用type关键字定义,type后跟类型名称,例如下面代码中 num 是类型别名。

type num = numberlet price: num
price = 10

2.联合类型

联合类型是一种高级类型,它表示一个值可以是几种不同类型之一。

type Status = number | string
type Gender = '男' | '女'function printStatus(status: Status) {console.log(status)
}function logGender(str: Gender) {console.log(str)
}printStatus(404)
printStatus('200')
printStatus('501')logGender('男')
logGender('女')

3.交叉类型

交叉类型允许将多个类型合并为一个类型。合并后的类型将拥有所有被合并类型的成员。交叉类型通常用于对象类型。

// 面积
type Area = {height: number // 高width: number // 宽
}// 地址
type Address = {num: number // 楼号cell: number // 单元号room: string // 房间号
}type House = Area & Addressconst house: House = {height: 180,width: 75,num: 6,cell: 3,room: '702'
}

9.一个特殊情况

代码段1(正常)

在函数定义时,限制函数返回值为void,那么函数的返回值就必须是空。

function demo(): void {// 返回 undefined 合法return undefined// 以下返回均不合法return 100return falsereturn nullreturn []
}

代码段2(特殊)

使用类型声明限制函数返回值为void时,TypeScript 并不会严格要求函数返回空。

type LogFunc = () => voidconst f1: LogFunc = () => {return 100 // 允许返回非空值
}const f2: LogFunc = () => 200 // 允许返回非空值const f3: LogFunc = function() {return 300 // 允许返回非空值
}

为什么会这样?

是为了确保如下代码成立,我们知道Array.prototype.push的返回一个数字,而Array.prototype.forEach方法期望其回调的返回类型是void

const arr = [1, 2, 3]
const arr2 = [0]arr.forEach((el) => arr2.push(el))

官方文档的说明:TypeScript: Documentation - More on Functions

10.复习类相关知识

本小结复习类相关知识,如果有相关基础可以跳过。

class Person {// 属性声明name: stringage: number// 构造器constructor(name: string, age: number) {this.name = namethis.age = age}// 方法speak() {console.log(`我叫:${this.name},今年${this.age}岁`)}
}// Person 实例
const p1 = new Person('张三', 20)// Student 继承 Person
class Student extends Person {grade: string// 若 Student 类不要额外属性,Student的构造器可以省略constructor(name:string, age: number, grade: string) {super(name, age)this.grade = grade}// 重写父类继承的方法override speak() {console.log(`我是学生,我叫:${this.name},今年${this.age}岁,我在读${this.grade}年级`)}// 子类自己的方法study() {console.log(`${this.name}正在努力学习中...`)}
}

11.属性修饰符

修饰符

含义

具体规则

public

公开的

可以被:类内部、子类、类外部访问

protected

受保护的

可以被:类内部、子类访问

private

私有的

可以被:类内部访问

readonly

只读属性

属性无法修改

public修饰符

class Person {// name写了public修饰符,age没写修饰符,但默认是public修饰符public name: stringage: numberconstructor(name: string, age: number) {this.name = namethis.age = age}speak() {// 类的【内部】可以访问public修饰的name和ageconsole.log(`我叫:${this.name},今年${this.age}岁`)}
}const p1 = new Person('张三', 20)
// 类的【外部】可以访问public修饰的属性
console.log(p1.name)class Student extends Person {constructor(name:string, age: number, grade: string) {super(name, age)}study() {// 子类可以访问父类中public修饰的:name/ageconsole.log(`${this.age}岁的${this.name}正在努力学习中...`)}
}

属性的简写形式

简写前

class Person {public name: stringpublic age: numberconstructor(name: string, age: number) {this.name = namethis.age = age}
}

简写后

class Person {constructor(public name: string, public age: number) {}
}

protected

class Person {// name和age是受保护属性,不能在类外部访问,但在【类】和【子类】中访问constructor(protected name: string,protected age: nuber) {}// getDetails是受保护方法,不能在类外部访问,但可以在【类】和【子类】中访问protected getDetails(): string {// 类中能访问受保护的name和age属性return `我叫:${this.name},今年${this.age}岁`}// introduce 是公开方法,类、子类和类外部都能访问introduce() {// 类中能访问受保护的 getDetails 方法console.log(this.getDetails())}
}const p1 = new Person('张三', 20)
// 可以在类外部访问introduce
p1.introduce()// 以下代码均报错
// p1.getDetails()
// p1.name
// p1.ageclass Student extends Person {study() {console.log(this.getDetails())console.log(`${this.name}正在努力学习`)}
}const s2 = new Student('小明', 8)
s1.study()

privated

class Person {constructor(public name: string,public age: number,private IDCard: string) { }private getPrivateInfo() {return `身份证号码为:${this.IDCard}`}getInfo() {return `我叫:${this.name}, 今年刚满${this.age}岁`}getFullInfo() {return this.getInfo() + ', ' + this.getPrivateInfo()}
}const p1 = new Person('小明', 18, '423516200012135569')
p1.name
p1.age
p1.IDCard // Property 'IDCard' is private and only accessible within class 'Person'
console.log(p1.getInfo())
console.log(p1.getFullInfo())
p1.getPrivateInfo() // Property 'getPrivateInfo' is private and only accessible within class 'Person'

readonly 修饰符

class Car {constructor(public readonly vin: string, // 车辆识别码,只读属性public readonly year: number, // 出厂年份,只读属性public color: string,public sound: string) { }// 打印车辆信息displayInfo() {console.log(`识别码:${this.vin},出厂年份:${this.year},颜色:${this.color},音响:${this.sound}`)}
}const car = new Car('hdyejdukeikduejuhf', 2018, '黑色', 'Bose音响')
car.displayInfo()// 修改vin和year都会报错
car.vin = 'hdyejudkisessedkuhi'
car.year = 2000

12.抽象类

  • 概述:抽象类是一种无法被实例化的类,专门用来定义类的结构和行为,类中可以写抽象方法,也可以写具体实现。抽象类主要用来为其派生类提供一个基础结构,要求其派生类必须实现其中的抽象方法。
  • 简记:抽象类不能实例化,其意义是可以被继承,抽象类里可以有普通方法,也可以有抽象方法。

通过以下场景,理解抽象类:

我们定义一个抽象类package,表示所有包裹的基本结构,任何包裹都具有重量属性weight,包裹都需要计算运费。但不同类型的包裹(如标准速度、特快专递)都有不同的运费计算方式,因此用于计算运费的calculate方法是一个抽象方法,必须由具体的子类来实现。

abstract class Package {// 构造方法constructor(public weight: number) {}// 抽象方法abstract calculate(): number// 具体方法printPackage() {console.log(`包裹重量为:${this.weight}kg,运费为:${this.calculate()}元`)}
}
class StandardPackage extends Package {constructor(weight: number,public unitPrice: number) { super(weight) }calculate(): number {return this.weight * this.unitPrice}
}

StandardPackage类继承了Package,实现了calculate方法:

class ExpressPackage extends Package {constructor(weight: number,public unitPrice: number,public additional: number) { super(weight) }calculate(): number {if (this.weight > 10) {return 10 * this.unitPrice + (this.weight - 10) * this.additional} else {return this.weight * this.unitPrice}}
}const e1 = new ExpressPackage(13, 8, 2)
e1.printPackage()

总结:何时使用抽象类

  1. 定义通用接口:为一组相关的类定义通用的行为(方法或属性)时。
  2. 提供基础实现:在抽象类中提供某些方法或为其提供基础实现,这样派生类就可以继承这些实现,
  3. 确保关键实现:强制派生类实现一些关键行为。
  4. 共享代码和逻辑:当多个类需要共享部分代码时,抽象类可以避免代码重复。

13.interface(接口)

interface是一种定义结构的方式,主要作用是为:类、对象、函数等规定一种契约,这样可以确保代码的一致性和类型安全,但要注意interface只能定义格式,不能包含任何实现!

定义类结构

// PersonInterface接口,用于限制Person类的格式
interface PersonInterface {name: stringage: numberspeak(n: number): void
}// 定义一个类 Person,实现 PersonInterface 接口
class Person implements PersonInterface {constructor(public name: string,public age: number) { }// 实现接口中的 speak 方法,注意实现speak时参数个数可以少于接口中的规定,但不能多。speak(n: number): void {for (let i = 0; i < n; i++) {// 打印出包含名字和年龄的问候语句console.log(`你好,我叫${this.name},我的年龄是${this.age}`)}}
}// 创建一个 Person 类的实例 p1,传入名字 'tom' 和年龄 18
const p1 = new Person('tom', 18)
p1.speak(3)

定义对象结构

interface User {name: stringreadonly gender: string // 只读属性age?: number // 可选属性run: (n: number) => void
}const user: User = {name: '张三',gender: '男',age: 18,run(n) {console.log(`奔跑了${n}米`)}
}

定义函数结构

interface CountInterface {(a: number, b: number): number
}const count: CountInterface = (x, y) => {return x + y
}

接口之间的继承

一个interface继承另一个interface,从而实现代码的复用。

interface PersonInterface {name: stringage: number
}interface StudentInterface extends PersonInterface {grade: string
}const stu: StudentInterface = {name: 'zhangsan',age: 25,grade: '高三'
}

接口可合并

interface PersonInterface {name: stringage: number
}interface PersonInterface {gender: string
}const p: PersonInterface = {name: 'zhangsan',age: 18,gender: '男'
}

总结:何时使用接口?

  1. 定义对象的格式:描述数据模型、API响应格式、配置对象...,是开发中用的最多的场景。
  2. 类的契约:规定一个类需要实现哪些属性和方法。
  3. 自动合并:一般用于扩展第三方库的类型,这种特性在大型项目中可能会用到。

八、泛型

泛型允许我们在定义函数、类或接口时,使用类型参数来表示未指定的类型,这些参数在具体使用时,才被指定具体的类型,泛型能让同一段代码适用于多种类型,同时仍然保持类型的安全性。

举例来说:如下代码中<T>就是泛型,不一定叫T,设置泛型后即可在函数中使用T来表示该类型:

泛型函数

function logData<T>(data: T): T {console.log(data)return data
}logData(10) // 不指定泛型,TS可以自动对类型进行推断
logData<number>(100) // 指定泛型
logData<string>('hello') // 指定泛型

泛型数组

// 方式1
function fn1<T>(arr: T[]): T[] {console.log(arr.length)return arr
}// 方式2
function fn2<T>(arr: Array<T>): Array<T> {console.log(arr.length)return arr
}

多个泛型

function logData<T, K>(data1: T, data2: K): T | K {console.log(data1, data2)return Date.now() % 2 ? data1 : data2
}logData(100, 'hello') // 不指定泛型,TS会自动对类型进行推断
logData<number, string>(100, 'hello') // 指定泛型
logData<string, boolean>('hello', false) // 指定泛型

泛型接口

// 示例1
interface PersonInterface<T> {name: string,age: number,extraInfo: T
}let p1: PersonInterface<string>
let p2: PersonInterface<number>p1 = {name: '张三',age: 18,extraInfo: '厉害人物'
}
p2 = {name: '李四',age: 18,extraInfo: 250
}// 示例2
interface Info<T> {like: T
}
let zhangsan: Info<string> = {like: '篮球'
}
let lisi: Info<string[]> = {like: ['篮球']
}// 示例3
interface fn<T> {(a1: T, a2: T): T[]
}
let f1: fn<string> = function(a, b) {return [a, b]
}
let f2: fn<number> = function(a, b) {return [a, b]
}
console.log(f1('1', '2')) // ['1', '2']
console.log(f2(1, 2))			// [1, 2]

泛型约束(指定泛型类型)

// 示例1
interface PersonInterface {name: string,age: number
}function logPerson<T extends PersonInterface>(info: T): void {console.log(`我叫${info.name},今年${info.age}岁了`)
}logPerson({ name: '张三', age: 18 })// 示例2
function fn<T extends string|any[]>(a: T):number {return a.length
}
fn('hello') // 正常
fn([1, 2, 3]) // 正常
fn(123) // Argument of type 'number' is not assignable to parameter of type 'string | any[]'

泛型类

class Person<T> {constructor(public name: string,public age: number,public extraInfo: T) { }speak() {console.log(`我叫${this.name},今年${this.age}岁了`)console.log(this.extraInfo)}
}const p1 = new Person<string>('小明', 10, '很聪明')type JobInfo = {title: stringcompany: string
}const p2 = new Person<JobInfo>('张三', 30, { title: '总经理', company: '华夏科技公司' })

keyof

interface Info {name: string,age: number
}
let zhangsan: Info = {name: 'zhangsan',age: 10
}
getInfoValue(zhangsan, 'name')// 示例1
function getInfoValue(info: Info, key: string): void {// 这里会报错,因为传入的 key 可能不是 Info 的属性console.log(info[key])
}// 示例2
function getInfoValue(info: Info, key: keyof Info): void {console.log(info[key])
}// 示例3
function getInfoValue<T extends keyof Info>(info: Info, key: T): Info[T] {return info[key]
}

九、类型声明文件

类型声明文件是 TypeScript 中的一种特殊文件,通常以.d.ts作为扩展名。它的主要作用是为现有的 JavaScript 代码提供类型信息,使得 TypeScript 能够在使用这些 JavaScript 库或模块时进行类型检查和提示

demo.js

export function add(a, b) {return a + b
}export function mul(a, b) {return a * b
}

demo.d.ts

declare function add(a: number, b: number): number
declare function mul(a: number, b: number): numberexport { add, mul }

example.ts

import { add, mul } from './demo.js'const x = add(2, 3) // x 类型为 number
const y = mul(4, 5) // y 类型为 numberconsole.log(x, y)

十、函数

为函数定义类型

为函数参数和返回值指定类型。

function add(x: number, y: number): number {return x + y
}let myAdd = function(x: number, y: number): number {return x + y;
}

推断类型

如果函数省略返回值类型,TS 会根据语句自动推断出返回值类型。

function add(x: number, y: number) {return x + y
}const result = add(1, 2)console.log(result.length) // Property 'length' does not exist on type 'number'

书写完整函数类型

let myAdd: (x: number, y: number) => number = function(x: number, y: number): number { return x + y
}

可选参数和默认参数

默认情况下,函数调用时,传入的参数类型和个数必须和函数定义时一致。TS 可通过?实现可选参数功能,未传递参数时,变量的值为undefined

function fullName(firstName: string, lastName?: string) {if (lastName) {return firstName + ' ' + lastName} else {return firstName}
}let result1 = fullName('Bob') // 正常
let result2 = fullName('Bob', 'Adams') // 正常
let result3 = fullName('Bob', 'Adams', 'Sr.')  // Expected 1-2 arguments, but got 3

在 TS 中,我们也可以为参数指定默认值,在没有传递参数或参数的值为undefined时生效。

function fullName(firstName: string, lastName = 'Smith') {return firstName + ' ' + lastName
}let result1 = fullName('Bob') // 'Bob Smith'
let result2 = fullName('Bob', undefined) // 'Bob Smith'
let result4 = fullName('Bob', 'Adams') // 'Bob Adams'

函数的默认参数不必放在参数的末尾,如果要让默认值生效,需明确传入undefined

function fullName(firstName= 'Bob', lastName: string) {return firstName + ' ' + lastName
}let result1 = fullName('Smith') // Expected 2 arguments, but got 1
let result2 = fullName(undefined, 'Smith') // 正常
let result4 = fullName('John', 'Smith') // 正常

剩余参数

如果你不知道传递了多少个参数,可以使用剩余参数。

示例1:

function fullName(firstName: string, ...restOfName: string[]) {return firstName + ' ' + restOfName.join(' ')
}const result = fullName('Joseph', 'Samuel', 'Lucas', 'MacKinzie')console.log(result) // Joseph Samuel Lucas MacKinzie

示例2:

function multiply(n: number, ...m: number[]) {return m.map((x) => n * x)
}const result = multiply(10, 1, 2, 3, 4)console.log(result) // [10, 20, 30, 40]

参数解构

TS 中一样可以使用解构赋值,但需要为解构的参数指定类型,否则提示含有隐式 any

function sum({ a, b, c }: { a: number, b: number, c: number }) {console.log(a + b + c)
}sum({a: 10,b: 3,c: 9
})

使用接口和类型别名改写:

type ABC = {a: number,b: number,c: number
}function sum({ a, b, c }: ABC) {console.log(a + b + c)
}sum({a: 10,b: 3,c: 9
})
interface ABC {a: number,b: number,c: number
}function sum({ a, b, c }: ABC) {console.log(a + b + c)
}sum({a: 10,b: 3,c: 9
})

参数为接口或类型别名

函数的参数除了可直接定义类型,也可以是接口和类型别名。

接口:

interface Person {firstName: stringlastName: string
}function greet(person: Person) {console.log('Hello, ' + person.firstName + ' ' + person.lastName)
}greet({firstName: 'Bob',lastName: 'Smith'
})

类型别名:

type Person = {firstName: stringlastName: string
}function greet(person: Person) {console.log('Hello, ' + person.firstName + ' ' + person.lastName)
}greet({firstName: 'Bob',lastName: 'Smith'
})

返回 void 类型

函数声明和函数表达式在返回 void类型时,会有所不同:

// 函数声明
function fn1(): void {return 100 // Type 'number' is not assignable to type 'void'
}// 函数表达式
type voidFn = () => void// 箭头函数
const fn2: voidFn = () => 100// 普通函数
const fn3: voidFn = function() {return 100
}console.log(fn2()) // 100
console.log(fn3()) // 100

注意,函数返回void类型时,不能根据返回值判断,进行其他操作!!

function fn1(): void {return
}type voidFn = () => voidconst fn2: voidFn = () => 100const fn3: voidFn = function() {return 100
}// 以下操作都会报错:An expression of type 'void' cannot be tested for truthiness.
if (fn1()) {console.log('fn1')
}
if (fn2()) {console.log('fn2')
}
if (fn3()) {console.log('fn3')
}

重载

在 TS 中,函数重载是一种允许为同一个函数名定义多个不同函数签名的特性。实现重载需要两个步骤:

  • 声明多个函数签名
  • 实现函数体

示例1:

// 函数签名1
function makeDate(timestamp: number): Date
// 函数签名2
function makeDate(m: number, d: number, y: number): Date
// 实现函数体
function makeDate(mOrTimestamp: number, d?: number, y?: number): Date {if (d !== undefined && y !== undefined) {return new Date(y, mOrTimestamp, d)} else {return new Date(mOrTimestamp)}
}const d1 = makeDate(1727620102980) // 正常
const d2 = makeDate(9, 29, 2024) // 正常
const d3 = makeDate(1727620102980, 9) // 只存在1个或3个参数的情况,不存在2个参数的情况

示例2:

function fn(x: boolean): void
function fn(x: string): void
function fn(x: boolean | string) {console.log(x)
}fn(false)
fn('hello')
fn(100) // 参数不合法

示例3:

function fn(x: string): string
function fn(x: boolean): boolean
function fn(x: string | boolean): string | boolean {return x
}fn(false)
fn('hello')
fn(100) // 参数不合法

示例4:

function len(s: string): number
function len(arr: any[]): number
function len(x: any) {return x.length
}len('hello') // 正常
len([1, 2, 3]) // 正常
len(Math.random() > 0.5 ? 'hello' : [1, 2, 3]) // 报错,因为这里返回的是联合类型,而len返回的是数字类型

示例4的优化:

function len(x: any[] | string) {return x.length
}len('hello') // 正常
len([1, 2, 3]) // 正常
len(Math.random() > 0.5 ? 'hello' : [1, 2, 3]) // 正常

提示:在可能的情况下,总是倾向于使用联合类型的参数而不是重载参数。

示例6:重载中的this

interface User {admin: boolean
}interface DB {filterUsers(filter: (this: User) => boolean): User[]
}const db: DB = {filterUsers: (filter: (this: User) => boolean) => {let user1: User = {admin: true}let user2: User = {admin: false}return [user1, user2]}
}const admins = db.filterUsers(function (this: User) {return this.admin
})console.log(admins) // [ { admin: true }, { admin: false } ]// 箭头函数:报错 => An arrow function cannot have a 'this' parameter
const admins = db.filterUsers((this: User) => {return this.admin
})

好了,分享结束,谢谢点赞,下期再见。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/54478.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LLM+知识图谱新工具! iText2KG:使用大型语言模型构建增量知识图谱

iText2KG是一个基于大型语言模型的增量知识图谱构建工具&#xff0c;通过从文本文档中提取实体和关系来逐步构建知识图谱。该工具具有零样本学习能力&#xff0c;能够在无需特定训练的情况下&#xff0c;在多个领域中进行知识提取。它包括文档提炼、实体提取和关系提取模块&…

Unity3D 客户端多开

Unity3D 实现客户端多开 客户端多开 最近在做好友聊天系统&#xff0c;为了方便测试&#xff0c;需要再开一个客户端。 简单的方法&#xff0c;就是直接拷贝一个新的项目&#xff0c;但是需要很多时间和占用空间。 查阅了网络资料&#xff0c;发现有一种软链接&#xff0c;…

Python水循环标准化对比算法实现

&#x1f3af;要点 算法区分不同水循环数据类型&#xff1a;地下水、河水、降水、气温和其他&#xff0c;并使用相应标准化降水指数、标准化地下水指数、标准化河流水位指数和标准化降水蒸散指数。绘制和计算特定的时间序列比较统计学相关性。使用相关矩阵可视化集水区和显示空…

河南移动:核心营业系统稳定运行超300天,数据库分布式升级实践|OceanBase案例

河南移动&#xff0c;作为电信全业务运营企业&#xff0c;不仅拥有庞大的客户群体和业务规模&#xff0c;还引领着业务产品与服务体系的创新发展。河南移动的原有核心营业系统承载着超过6000万的庞大用户量&#xff0c;管理着超过80TB的海量数据&#xff0c;因此也面临着数据规…

pWnos1.0 靶机渗透 (Perl CGI 的反弹 shell 利用)

靶机介绍 来自 vulnhub 主机发现 ┌──(kali㉿kali)-[~/testPwnos1.0] …

阿里云ACP认证考试题库

最近有好些同学&#xff0c;考完阿里云ACP了&#xff0c;再来跟我反馈&#xff1a;自己花700买的阿里云ACP题库&#xff0c;结果答案是错的&#xff01; 或者考完后发现&#xff0c;买的阿里云ACP题库覆盖率只有50%&#xff01; 为避免大家继续踩坑&#xff0c;给大家分享一个阿…

qt使用QDomDocument读写xml文件

在使用QDomDocument读写xml之前需要在工程文件添加&#xff1a; QT xml 1.生成xml文件 void createXml(QString xmlName) {QFile file(xmlName);if (!file.open(QIODevice::WriteOnly | QIODevice::Truncate |QIODevice::Text))return false;QDomDocument doc;QDomProcessin…

使用 Python 遍历文件夹

要解决这个问题&#xff0c;使用 Python 的标准库可以很好地完成。我们要做的是遍历目录树&#xff0c;找到所有的 text 文件&#xff0c;读取内容&#xff0c;处理空行和空格&#xff0c;并将处理后的内容合并到一个新的文件中。 整体思路&#xff1a; 遍历子目录&#xff1…

【目标检测】工程机械车辆数据集2690张4类VOC+YOLO格式

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2694 标注数量(xml文件个数)&#xff1a;2694 标注数量(txt文件个数)&#xff1a;2694 标注…

Star 3w+,向更安全、更泛化、更云原生的 Nacos3.0 演进

作者&#xff1a;席翁 Nacos 社区刚刚迎来了 Star 突破 30000 的里程碑&#xff0c;从此迈上了一个新的阶段。感谢大家的一路支持、信任和帮助&#xff01; Nacos /nɑ:kəʊs/是 Dynamic Naming and Configuration Service 的首字母简称&#xff0c;定位于一个更易于构建云原…

Linux网络编程 -- 网络基础

本文主要介绍网络的一些基础概念&#xff0c;不涉及具体的操作原理&#xff0c;旨在构建对网络的基础认识。 1、网络的早期发展历程 20世纪50年代 在这一时期&#xff0c;计算机主机非常昂贵&#xff0c;而通信线路和设备相对便宜。为了共享计算机主机资源和进行信息的综合处…

关于CSS 案例_新闻内容展示

新闻要求 标题:居中加粗发布日期: 右对齐分割线: 提示, 可以使用 hr 标签正文/段落: 左侧缩进插图: 居中显示 展示效果 审核过不了&#xff0c;内容没填大家将就着看吧。 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset&qu…

python-pptx 中 placeholder 和 shape 有什么区别?

在 python-pptx 库中&#xff0c;placeholder 和 shape 是两个核心概念。虽然它们看起来相似&#xff0c;但在功能和作用上存在显著的区别。为了更好地理解这两个概念&#xff0c;我们可以通过它们的定义、使用场景以及实际代码示例来剖析其差异。 Python-pptx 的官网链接&…

【Java】六大设计原则和23种设计模式

目录 一、JAVA六大设计原则 二、JAVA23种设计模式 1. 创建型模式 2. 结构型模式 3. 行为型模式 三、设计原则与设计模式 1. 设计原则 2. 设计模式 四、单例模式 1. 饿汉式 2. 懒汉式 四、代理模式 1. 什么是代理模式 2. 为什么要用代理模式 3. 有哪几种代理模式 …

服务器几核几G几M是什么意思?如何选择?

服务器几核几G几M是什么意思&#xff1f;我们建站、搭建网络平台都要用到云服务器&#xff0c;不管在腾讯云、阿里云还是别的云服务平台选购&#xff0c;都会接触到服务器配置。云服务器就是把物理服务器&#xff08;俗称“母鸡”&#xff09;&#xff0c;用虚拟机技术虚拟出多…

Android SystemUI组件(09)唤醒亮屏 锁屏处理流程

该系列文章总纲链接&#xff1a;专题分纲目录 Android SystemUI组件 本章关键点总结 & 说明&#xff1a; 说明&#xff1a;本章节持续迭代之前章节的思维导图&#xff0c;主要关注左侧上方锁屏分析部分 唤醒亮屏 即可。 Power按键的处理逻辑最终是由PhoneWindowManager来…

BUSHOUND的抓包使用详解

BUSHOUND是个过滤软件&#xff0c;确切来说是在windows操作系统它的驱动层USB传输的数据。所以这个数据上可能是与USB的总线上的数据是有一点差异的。 先要选择设备的抓包。所以就是在device这个界面底下&#xff0c;我们首先要选择我们要抓的设备。 尝试下键盘设备 电脑键盘…

【Linux】用虚拟机配置Ubuntu 24.04.1 LTS环境

目录 1.虚拟机安装Ubuntu系统 2.Ubuntu系统的网络配置 3.特别声明 首先我们先要下载VMware软件&#xff0c;大家自己去下啊&#xff01; 1.虚拟机安装Ubuntu系统 我们进去之后点击创建新的虚拟机&#xff0c;然后选择自定义 接着点下一步 再点下一步 进入这个界面之后&…

C语言:预编译过程的剖析

目录 一.预定义符号和#define定义常量 二.#define定义宏 三.宏和函数的对比 四、#和##运算符 五、条件编译 在之前&#xff0c;我们已经介绍了.c文件在运行的过程图解&#xff0c;大的方面要经过两个方面。 一、翻译环境 1.预处理&#xff08;预编译&#xff09; 2.编译 3…

【网络安全】Cookie与ID未强绑定导致账户接管

未经许可,不得转载。 文章目录 前言正文前言 DigiLocker 是一项在线服务,旨在为公民提供一个安全的数字平台,用于存储和访问重要的文档,如 Aadhaar 卡、PAN 卡和成绩单等。DigiLocker 通过多因素身份验证(MFA)来保护用户账户安全,通常包括 6 位数的安全 PIN 和一次性密…