一篇文章搞懂TypeScript_typescript implements
liuian 2025-09-04 11:56 21 浏览
TypeScript 是 JavaScript 的超集,一方面给动态类型的 js 增加了类型校验,另一方面扩展了 js 的各种功能。
原始数据类型
- 字符串
- 数值
- 布尔
- null
- undefined
- Symbol
- BigInt
let str: string = '周小黑'
let age: number = 18
let beautiful: boolean = true
let n: null = null
let u: undefiend = undefined
let s: Symbol = Symbol('1')
let int: BigInt = BigInt(10)any、unknown、void、never
- any:任意类型,是一切类型的父类型,也是一切类型的子类型。会跳过类型检查,和我们平时写js一样
- unknown:未知类型,是一切类型的父类型,但不是一切类型的子类型。比 any 更安全,比如声明了一个对象为 unkonw 要读取属性或调用方法时需要先进行具体类型判断或用 as 进行类型断言,收窄类型后才能读取
- void:没有任何返回值的函数,声明一个 void 类型的变量没有什么用,因为只能赋值为 undefined 和 null(只在 --strictNullChecks 未指定时)
- never:不存在值的类型
any、unknonwn是所有类型的父类型,null、undefined、never是所有类型的子类型
Object、object、{}
- Object:原始对象类型,支持所有类型,注意为非原始数据类型时不能访问值的任何属性
- object:普通对象类型,只能是非原始数据类型对象、数组、函数这些,我们不能访问值的任何属性
- {}:对象字面量,无自身属性的对象类型,不能进行属性操作
let num: Object = 12
let girl: Object = { age: 18 }
console.log(girl.age) // 会报错
let arr: object = [1, 2, 3]
console.log(arr[0]) // 会报错
console.log(arr) // 可以正常运行
let person: {} = {name: 'zhou'}
console.log(boy.name) // 会报错
// 可以正常运行
let boy: {name: string} = {name: 'zhou'}
boy.name = '周'
console.log(boy)注意需要访问某个对象的属性或方法时,应该定义具体的属性类型或通过 interface 接口定义类型,才能进行属性的读取、赋值操作。
其他常用类型、DOM类型
- 其他类型:除了上面提到的一些类型,还有 Function、Date、RegExp、Error、Promise
- Array和Tuple类型:Tuple元组类型和数组类型类似,不过元组表示一个已知元素数量和元素类型的数组(各元素的类型不必相同)
- Enum类型:枚举类型
- DOM类型:Document、HTMLElement、NodeList、Event、MouseEvent
interface、type
- interface:接口,只能定义对象结构的数据类型,可以通过extends扩展,重复定义会被合并
- type:类型别名,可以定义原始类型,可以通过&符号合并类型,不可以重复定义;除了类型还可以用来限制值;注意类型后面需要用 = 来写,而 interface 则不用
两个都可以用来定义类型,也比较类似,推荐优先使用 interface。
联合类型、交叉类型
- 联合类型:用 | 表示联合类型,相当于或
- 交叉类型:用 & 合并多个类型,相当于把多个类型合并到一起,可以用于合并多个 interface 或 type
type Person = {
name: string
age: number | string
}
interface Man {
money: number
}
let boy: Person & Man = {
name: 'zhou',
age: '18',
money: 100
}
console.log(boy)符号
- & 且
- | 或
- ! 非
- ?? 空值合并运算符
- ?. 可选链操作符,用在获取对象的深层属性或方法前
- ? 加在类型上表示可选参数或者可选属性,一般用在对象属性或者函数参数上
interface Person {
name: string,
age?: number
}
let man: Person = {
name: 'zhou'
}
function add(x: number, y?: number): number {
return y ? (x + y) : x
}
add(10)
add(10, 12)字面量
这个用来将变量的值限制成预定的,是对值得限定,看着有点像联合类型(是对类型得限定)
let a: 10 | 'zhou' | [1, 2, 4]
// 也可以用 type 类型别名来写成下面得形式
// type A = 10 | 'zhou' | [1, 2, 4]
// let a: A
a = [1, 2, 4]
a = false // Type 'false' is not assignable to type '"zhou" | 10 | [1, 2, 4]'.ts(2322)class 类
- ts 支持面向对象的所有特性,比如:类、接口等
- 类可以通过 implements 去实现接口 interface
- 修饰符:public / private / protected / abstract / static(js中也有)
泛型
泛型相当于一个占位符,可以理解成函数参数,使用的时候传进来的是什么,在内部就可以用用占位符去使用,一般多用于函数中,使用时用一对尖括号加上占位符,多用字母 T 占位。就是把定义的类型变量想象成一个函数,只不过参数部分用尖括号传递,使用的时候再用尖括号把具体的类型传进去
// 函数
function func<T>(arg: T): T {
return arg
}
// interface 接口
interface Person<T> {
name: string,
age: number,
custom: T
}
let man: Person<boolean> = {
name: 'zhou',
age: 18,
custom: true
}
// 元组
type Ftype<T, U> = [number, T, boolean, U]
let fruits: Ftype<Function, string> = [1, () => {}, false, '水果']内置泛型工具
- Partial
- Required
- Readonly
- Pick
- Exclude
- Extract
- Omit
- Record
- ReturnType
- ...
关键字
extends
- js 中 class 类实现继承
- ts 的 interface 接口实现继承
- 判断类型包含
as
类型断言,将一个大范围的类型收窄
in
遍历,从多个类型中去遍历出每个类型
keyof
ts 2.1 版本中引入,用于获取某种类型中的所有键,返回的是联合类型(跟我们用 Object.keys 获取对象的所有属性键类似,只不过 Object.keys 返回的是所有键名数组)。
获取到类型的键后,我们就可以访问到键对应的类型:
interface Person {
name: string,
age: number
}
type Name = Person['name']
type P1 = Person['name' | 'age'] // string | number
// 上面的 P1 也就相当于:
type P2 = Person[keyof Person] // string | numbertypeof
- js 中判断类型
- ts 中获取一个变量的申明类型
infer
推断的占位,当某个类型不确定时,就可以暂时表示为 xx
interface、type、对象属性多个中的符号
- interface 和 type 中多个可以用分号、逗号,也可以不加,也可以混用,不过团队开发中尽量统一成一种写法
- 对象属性多个只能用逗号
interface Person {
name: string
age: number;
gender: string,
}
let man: Person = {
name: 'zhou',
age: 18,
gender: '男'
}相关推荐
- 搭建一个20人的办公网络(适用于20多人的小型办公网络环境)
-
楼主有5台机上网,则需要一个8口路由器,组网方法如下:设备:1、8口路由器一台,其中8口为LAN(局域网)端口,一个WAN(广域网)端口,价格100--400元2、网线N米,这个你自己会看了:)...
- 笔记本电脑各种参数介绍(笔记本电脑各项参数新手普及知识)
-
1、CPU:这个主要取决于频率和二级缓存,频率越高、二级缓存越大,速度越快,现在的CPU有三级缓存、四级缓存等,都影响相应速度。2、内存:内存的存取速度取决于接口、颗粒数量多少与储存大小,一般来说,内...
- 汉字上面带拼音输入法下载(字上面带拼音的输入法是哪个)
-
使用手机上的拼音输入法打成汉字的方法如下:1.打开手机上的拼音输入法,在输入框中输入汉字的拼音,例如“nihao”。2.根据输入法提示的候选词,选择正确的汉字。例如,如果输入“nihao”,输...
- xpsp3安装版系统下载(windowsxpsp3安装教程)
-
xpsp3纯净版在采用微软封装部署技术的基础上,结合作者的实际工作经验,融合了许多实用的功能。它通过一键分区、一键装系统、自动装驱动、一键设定分辨率,一键填IP,一键Ghost备份(恢复)等一系列...
- 没有备份的手机数据怎么恢复
-
手机没有备份恢复数据方法如下1、使用数据线将手机与电脑连接好,在“我的电脑”中可以看到手机的盘符。 2、将手机开启USB调试模式。在手机设置中找到开发者选项,然后点击“开启USB调试模式”。 3、...
- 电脑怎么激活windows11专业版
-
win11专业版激活方法有多种,以下提供两种常用的激活方式:方法一:使用激活密钥激活。在win11桌面上右键点击“此电脑”,选择“属性”选项。进入属性页面后,点击“更改产品密钥或升级windows”。...
- 华为手机助手下载官网(华为手机助手app下载专区)
-
华为手机助手策略调整,已不支持从应用市场下载手机助手,目前华为手机助手是需要在电脑上下载或更新手机助手到最新版本,https://consumer.huawei.com/cn/support/his...
- 光纤线断了怎么接(宽带光纤线断了怎么接)
-
宽带光纤线断了可以重接,具体操作方法如下:1、光纤连接的时候要根据束管内,同色相连,同芯相连,按顺序进行连接,由大到小。一般有三种连接方法,分别是熔接、活动连接和机械连接。2、连接的时候要开剥光缆,抛...
- win7旗舰版和专业版区别(win7旗舰版跟专业版)
-
1、功能区别:Win7旗舰版比专业版多了三个功能,分别是Bitlocker、BitlockerToGo和多语言界面; 2、用途区别:旗舰版的功能是所有版本中最全最强大的,占用的系统资源,...
- 万能连接钥匙(万能wifi连接钥匙下载)
-
1、首先打开wifi万能钥匙软件,若手机没有开启WLAN,就根据软件提示打开WLAN开关;2、打开WLAN开关后,会显示附近的WiFi,如果知道密码,可点击相应WiFi后点击‘输入密码’连接;3、若不...
- 雨林木风音乐叫什么(雨林木风是啥)
-
雨林木风的创始人是陈年鑫先生。陈年鑫先生于1999年创立了雨林木风公司,其初衷是为满足中国市场对高品质、高性能电脑的需求。在陈年鑫先生的领导下,雨林木风以技术创新、产品质量和客户服务为核心价值,不断推...
- aics6序列号永久序列号(aics6破解序列号)
-
关于AICS6这个版本,虽然是比较久远的版本,但是在功能上也是十分全面和强大的,作为一名平面设计师的话,AICS6的现有的功能已经能够应付几乎所有的设计工作了……到底AICC2019的功能是不是...
- 手机可以装电脑系统吗(手机可以装电脑系统吗怎么装)
-
答题公式1:手机可以通过数据线或无线连接的方式给电脑装系统。手机安装系统需要一定的技巧和软件支持,一般需要通过数据线或无线连接的方式与电脑连接,并下载相应的软件和系统文件进行安装。对于大部分手机用户来...
- 一周热门
- 最近发表
- 标签列表
-
- python判断字典是否为空 (50)
- crontab每周一执行 (48)
- aes和des区别 (43)
- bash脚本和shell脚本的区别 (35)
- canvas库 (33)
- dataframe筛选满足条件的行 (35)
- gitlab日志 (33)
- lua xpcall (36)
- blob转json (33)
- python判断是否在列表中 (34)
- python html转pdf (36)
- 安装指定版本npm (37)
- idea搜索jar包内容 (33)
- css鼠标悬停出现隐藏的文字 (34)
- linux nacos启动命令 (33)
- gitlab 日志 (36)
- adb pull (37)
- python判断元素在不在列表里 (34)
- python 字典删除元素 (34)
- vscode切换git分支 (35)
- python bytes转16进制 (35)
- grep前后几行 (34)
- hashmap转list (35)
- c++ 字符串查找 (35)
- mysql刷新权限 (34)
