一篇文章搞懂TypeScript(一篇文章搞懂猪的各部位)
myzbx 2025-06-30 18:48 5 浏览
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 | number
typeof
- js 中判断类型
- ts 中获取一个变量的申明类型
infer
推断的占位,当某个类型不确定时,就可以暂时表示为 xx
interface、type、对象属性多个中的符号
- interface 和 type 中多个可以用分号、逗号,也可以不加,也可以混用,不过团队开发中尽量统一成一种写法
- 对象属性多个只能用逗号
interface Person {
name: string
age: number;
gender: string,
}
let man: Person = {
name: 'zhou',
age: 18,
gender: '男'
}
相关推荐
- 使用 Siemens Teamcenter Digital Reality Viewer 打造逼真的数字孪生
-
现代产品通常由数百万个部件组成,需要复杂的设计和协作。工业世界在管理复杂性方面面临重大挑战,传统的可视化工具无法渲染这些大型的多CAD组件,从而无法充分利用数字孪生的优势。为了解决这些难题,西门子...
- 如何在JavaScript中实现数字输入框的范围限制?
-
在JavaScript语言中,实现数字输入框的范围限制可以通过多种方式实现,最常见的方式是利用JavaScript的事件监听机制,和通过JavaScript的条件判断语句来实现范围限制。以...
- 2.3.8.J速算24点终极挑战(速算24点题目及答案)
-
各位数学高手、脑力达人,今天给大家带来一道超烧脑的**24点挑战**!**数字:2、3、8、J(J=11规则很简单:**用加减乘除和括号,把四个数字组合成24!每个数字只能用一次!****看起...
- 分布式系统进阶二十一之短链接生成原理
-
前言短链接(ShortURL)是一种通过缩短网页链接长度来方便分享的技术。相比于传统的长链接,短链接更简洁明了,更易于在社交媒体等平台上分享和传播。在本文中,我们将会详细解释短链接的定义、作用及其构...
- 一、SpringBoo中Mybatis多数据源动态切换
-
我们以一个实例来详细说明一下如何在SpringBoot中动态切换MyBatis的数据源。一、需求1、用户可以界面新增数据源相关信息,提交后,保存到数据库2、保存后的数据源需要动态生效,并且可以由用户动...
- 「JS 逆向百例」层层嵌套!某加速商城 RSA 加密
-
声明本文章中所有内容仅供学习交流,敏感网址、数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除!逆向目标目标:某加速商城登录接口主页:a...
- Spring Data Jpa 介绍和详细入门案例搭建
-
1.SpringDataJPA的概念在介绍SpringDataJPA的时候,我们首先认识下Hibernate。Hibernate是数据访问解决技术的绝对霸主,使用O/R映射(Object-Re...
- SpringBoot 开发 Web 系统,快速入门指南!
-
01、背景介绍在之前的文章中,我们简单的介绍了SpringBoot项目的创建过程,了解了SpringBoot开箱即用的特性,本篇文章接着上篇的内容继续介绍SpringBoot用于we...
- Nacos3.0重磅来袭!全面拥抱AI,单机及集群模式安装详细教程!
-
之前和大家分享过JDK17的多版本管理及详细安装过程,然后在项目升级完jdk17后又发现之前的注册和配置中心nacos又用不了,原因是之前的nacos1.3版本的,版本太老了,已经无法适配当前新的JD...
- golang语言的魅力精华之玩转通道channel 值得你反复阅读100遍
-
通道用例大全在阅读本文之前,请先阅读通道一文。那篇文章详细地解释了通道类型和通道值,以及各种通道操作的规则细节。一个Go新手程序员可能需要反复多次阅读那篇文章和当前这篇文章来精通Go通道编程。本文...
- 2小时快速搭建一个高可用的IM系统
-
“笔者2019年参加了一次Gopher大会,有幸听探探的架构师分享了他们2019年微服务化的过程。图片来自Pexels本文快速搭建的IM系统也是使用Go语言来快速实现的,这里先和...
- 分库分表以后,如何管理几万张分片表?
-
大家好,我是小富~ShardingSphere实现分库分表,如何管理分布在不同数据库实例中的成千上万张分片表?上边的问题是之前有个小伙伴看了我的分库分表的文章,私下咨询我的,看到他的提问我第一感觉就是...
- Spring Boot JDBC 与 JdbcTemplate 全面指南(万字保姆级教程)
-
一、SpringBootJDBC基础1.1JDBC简介与演进JDBC(JavaDatabaseConnectivity)是Java语言中用来规范客户端程序如何访问数据库的应用程序...
- Flink SQL 知其所以然(六)| 维表 join 的性能优化之路(上)
-
废话不多说,咱们先直接上本文的目录和结论,小伙伴可以先看结论快速了解博主期望本文能给小伙伴们带来什么帮助:背景及应用场景介绍:博主期望你能了解到,flinksql提供了轻松访问外部存储的loo...
- 大数据Hadoop之——Flink Table API 和 SQL(单机Kafka)
-
一、TableAPI和FlinkSQL是什么TableAPI和SQL集成在同一套API中。这套API的核心概念是Table,用作查询的输入和输出,这套API都是批处理和...
- 一周热门
- 最近发表
-
- 使用 Siemens Teamcenter Digital Reality Viewer 打造逼真的数字孪生
- 如何在JavaScript中实现数字输入框的范围限制?
- 2.3.8.J速算24点终极挑战(速算24点题目及答案)
- 分布式系统进阶二十一之短链接生成原理
- 一、SpringBoo中Mybatis多数据源动态切换
- 「JS 逆向百例」层层嵌套!某加速商城 RSA 加密
- Spring Data Jpa 介绍和详细入门案例搭建
- SpringBoot 开发 Web 系统,快速入门指南!
- Nacos3.0重磅来袭!全面拥抱AI,单机及集群模式安装详细教程!
- golang语言的魅力精华之玩转通道channel 值得你反复阅读100遍
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)