一篇文章搞懂TypeScript
ztj100 2025-05-28 21:44 6 浏览 0 评论
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: '男'
}
相关推荐
- Spring IoC Container 原理解析
-
IoC、DI基础概念关于IoC和DI大家都不陌生,我们直接上martinfowler的原文,里面已经有DI的例子和spring的使用示例...
- SQL注入:程序员亲手打开的潘多拉魔盒,如何彻底封印它?
-
一、现象:当你的数据库开始"说话",灾难就来了场景还原:...
- Java核心知识3:异常机制详解
-
1什么是异常异常是指程序在运行过程中发生的,由于外部问题导致的运行异常事件,如:文件找不到、网络连接失败、空指针、非法参数等。异常是一个事件,它发生在程序运行期间,且中断程序的运行。...
- MyBatis常用工具类三-使用SqlRunner操作数据库
-
MyBatis中提供了一个非常实用的、用于操作数据库的SqlRunner工具类,该类对JDBC做了很好的封装,结合SQL工具类,能够很方便地通过Java代码执行SQL语句并检索SQL执行结果。SqlR...
- 爆肝2W字梳理50道计算机网络必问面试题
-
1.说说HTTP常用的状态码及其含义?思路:这道面试题主要考察候选人,是否掌握HTTP状态码这个基础知识点。...
- SpringBoot整合Vue3实现发送邮箱验证码功能
-
1.效果演示2.思维导图...
- 最全JAVA面试题及答案(200+)
-
Java基础1.JDK和JRE有什么区别?JDK:JavaDevelopmentKit的简称,Java开发工具包,提供了Java的开发环境和运行环境。JRE:JavaRunti...
- Java程序员找工作翻车现场!你的项目描述踩了这几个坑?
-
Java程序员找工作翻车现场!你的项目描述踩了这几个坑?噼里啪啦敲了三年代码,简历一投石沉大海?兄弟,问题可能出在项目描述上!知道为什么面试官看你的项目像看天书吗?因为你写了三个致命雷区:第一,把项目...
- 2020最新整理JAVA面试题附答案,包含19个模块共208道面试题
-
包含的模块:本文分为十九个模块,分别是:Java基础、容器、多线程、反射、对象拷贝、JavaWeb、异常、网络、设计模式、Spring/SpringMVC、SpringBoot/Spring...
- 底层原理深度解析:equals() 与 == 的 JVM 级运作机制
-
作为Java开发者,你是否曾在集合操作时遇到过对象比较的诡异问题?是否在使用HashMap时发现对象丢失?这些问题往往源于对equals()和==的误解,以及实体类中这两个方法的不当实...
- 雪花算法,什么情况下发生 ID 冲突?
-
分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的...
- 50个Java编程技巧,免费送给大家
-
一、语法类技巧1.1.使用三元表达式普通:...
- 如何规划一个合理的JAVA项目工程结构
-
由于阿里Java开发手册对于工程结构的描述仅限于1、2节简单的概述,不能满足多样的实际需求,本文根据多个项目中工程的实践,分享一种较为合理实用的工程结构。工程结构的原则有依据、实用。有依据的含义是指做...
- Java 编程技巧之单元测试用例编写流程
-
温馨提示:本文较长,同学们可收藏后再看:)前言...
- MyBatis核心源码解读:SQL执行流程的奇妙之旅
-
MyBatis核心源码解读:SQL执行流程的奇妙之旅大家好呀!今天咱们要来一场既烧脑又有趣的旅程——探索MyBatis这个强大框架的核心秘密。你知道吗?当你在项目里轻轻松松写一句“select*f...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)