TypeScript 类型梳理

简介: TypeScript 是由 [ 微软 ] 进行开发和维护的一种 [ 开源 ] 的 [ 编程语言 ],TypeScript是 JavaScript 类型的超集,它可以编译成纯JavaScript。并且 TypeScript 可以在任何浏览器、任何计算机和任何操作系统上运行。

1. 基础类型


与 JavaScript 的基础数据类型一样,TypeScript 也提供了基础的类型单元。


1.1 布尔 Boolean


布尔值就是只有 true/false 的值


let isBol: boolean = true
isBol = false
isBol = '' // error: TS2322: Type 'string' is not assignable to type 'boolean'.


1.2 数字 Number


与 JavaScript 一样,TypeScript 里面一样也只有浮点数;默认支持 十进制、十六进制、二进制、八进制


let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;


1.3 字符串 String


字符串可以用 双引号 " " 、单引号 ' ' 或者模板字符串 ' ` ' 表示,也可以用   + 串联


let name: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ name }.
I'll be ${ age + 1 } years old next month.`;


1.4 数组 Array


这里的数组一般用来表示 同种数据格式的数据 组成的数组,可以用两种方式声明


let list: number[] = [1, 2, 3];
let users: Array<User> = [{name: 'xxx', age: 18}]; // User 类型需要提前声明


1.5 元组 Tuple


一般用来表示 已知长度和元素类型的数组,这里的元素类型可以分别设置。


type Address = {
  country: string
  add?: string
  province?: string
}
let userAttrs: [string, number, boolean, Address] = ['MiyueFE', 27, true, { country: 'China' }]


元组数据可以直接通过下标访问,如果下标 超过元组定义的长度范围,则此处的类型配置默认为 已定义的元素类型的“并集”(联合类型)


1.6 枚举 Enum


枚举类型是对JavaScript标准数据类型的一个补充。 类似一个键值对组成但是key和value能互相引用的对象。


enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;


枚举类型定义的编号默认是从0开始的自增整数,并且可以通过编号查找到对应的类型


1.7 Undefined 和 Null


这两者在 TypeScript 中的定义与 JavaScript 基本一致,各自的类型也就是本身。


let u: undefined = undefined;
let n: null = null;


在没有开启严格类型校验 --strictNullChecks 时,这两个类型可以是所有类型的子类型;但是开启严格类型校验之后,这两者就只能赋值给 void 和他们自身的两个类型


1.8 未知类型 unknown


unknown 是 3.0 新增的类型,作用与 any 相似,但是使用比 any 更加严格。


unknown 类型的值可以等于任意类型的数据值,但是不能将 unknown 类型的值赋值在其他类型


let value: unknown;
value = true;             // OK
value = 42;               // OK
value = [];               // OK
value = {};               // OK
value = Math.random;      // OK
value = null;             // OK
value = undefined;        // OK
let value1: unknown = value;   // OK
let value2: any = value;       // OK
let value3: boolean = value;   // Error
let value4: number = value;    // Error


1.9 空值 void


void 语义上表示没有任何值,一般用来表示函数没有返回值(即返回值为 undefined)


function fc(): void {
}


1.10 任意类型 any


any 一般用来 关闭 类型检查器对该变量的 类型检查,当一个变量的类型设置为 any 之后,对该变量进行的任何操作都不会引起编译器的任何检查,只有当运行到此处时根据 JavaScript 规则正常通过或者报错。


let list: any[] = [1, true, "free"];
list[1] = 100;
list.substring(1) // 执行时报错:Uncaught TypeError: list.substring is not a function


1.11 永不到达 never


never 类型表示的是那些永不存在的值的类型。比如 抛出异常、死循环、没有返回值的箭头函数等。


// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
  throw new Error(message);
}
// 推断的返回值类型为never
function fail() {
  return error("Something failed");
}
// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
  while (true) {
  }
}


never 的使用与 unknown 有点类似,它是所有类型的子类型,可以 赋值给任何类型,但是 never 类型的变量 只接受 never 类型数据,其他类型(包括 any)均不可以赋值给 never 类型


1.12 泛型


个人理解,泛型是一种 定义时为 unknown,但使用时需要指定类型 的类型,定义时使用 **一对尖括号加一个字符/字符串变量(通常为全大写)**表示。


function fc<T>(value: T): T {
  console.log(value)
  return value
}


2. 高级类型


2.1 交叉类型 &


相当于 类型合并,将多个类型合并为一个类型。


type UserBase = {
  name: string
  age: number
  sex: number
}
type UserAddress = {
  name: string
  country: string
  addr?: string
  province?: string
}
type UserInfo = UserBase & UserAddress
// 结果如下:
type UserInfo = {
  name: string
  age: number
  sex: number
  country: string
  addr?: string
  province?: string
}


如果合并的两个类型 有相同项,且 相同项的类型不同,则合并后的该项会被定义为 never 类型


2.2 联合类型 |


联合类型表示该数据的类型可以是定义的几种类型 之一


type UserBase = {
  name: string
  age: number
  sex: number
}
type UserAddress = {
  name: number
  country: string
  addr?: string
  province?: string
}
type UserInfo = UserBase | UserAddress


假设这个时候 UserInfo 在使用时如果定义的数据是 UserBase,则 name 属性只能是 string 类型,整个数据类型为 UserBase


3. 推断类型


官方说法 Utility Types,也叫实用类型。个人理解是内部提供的一种原类型的处理方式,所以称为推断类型。


3.1 可选属性处理 Partial<T>


将某个类型的所有属性 全部设置为可选属性


type Type = {
  id: number;
  firstName: string;
  lastName: string;
}
type PartialType = Partial<Type>
/*
等效于
type PartialType = {
  id?: number
  firstName?: string
  lastName?: string
}
*/


3.2 必选属性处理 Required<T>


正好与 Partial 相反,将某个类型的所有属性 全部设置为必填


type Type = {
  id: number;
  firstName?: string;
  lastName?: string;
}
type RequiredType = Required<Type>
/*
等效于
type RequiredType = {
  id: number
  firstName: string
  lastName: string
}
*/


3.3 只读属性处理 Readonly<T>


将某个类型的所有属性 全部设置为只读


type Type = {
  id: number;
  firstName: string;
  lastName: string;
}
type ReadonlyType = Readonly<Type>
/*
等效于
type ReadonlyType = {
  readonly id: number
  readonly firstName: string
  readonly lastName: string
}
*/


3.4 属性选择重建 Pick<T, K>


只将某个类型的 部分属性提取出来,组成一个全新的类型


  • T代表要抽取的对象


  • K有一个约束: 一定是来自T所有属性字面量的联合类型


type Type = {
  id: number;
  age: number;
  firstName: string;
  lastName: string;
}
type PickType = Pick<Type, 'firstName' | 'lastName'>
/*
等效于
type PickType = {
  firstName: string
  lastName: string
}
*/


3.5 剩余属性重建 Omit<T, K>


Pick 相反,指排 除掉指定部分,将剩余属性组合 成一个全新的类型


type Type = {
  id: number;
  age: number;
  firstName: string;
  lastName: string;
}
type OmitType = Omit<Type, 'id' | 'age'>
/*
等效于
type OmitType = {
  firstName: string
  lastName: string
}
*/


3.6 同名属性提取 Extract<T, U>


从 T 中提取出可以在 U 中查找的属性,实现为 type Extract<T, U> = T extends U ? T : never


这种情况一般用于提取两个类型的相同属性名组合成一个联合字符类型。


interface FirstType {
  id: number;
  sex: number;
  firstName: string;
  lastName: string;
}
interface SecondType {
  id: number;
  sex: number;
  address: string;
  city: string;
}
type ExtractType = Extract<keyof FirstType, keyof SecondType>;
/*
等效于
type ExtractType = 'id' | 'sex'
*/


3.7 非同名属性提取 Exclude<T, U>


Extract<T, U> 相反(注:此时仅提取 T 中的属性判断)。


interface FirstType {
  id: number;
  sex: number;
  firstName: string;
  lastName: string;
}
interface SecondType {
  id: number;
  sex: number;
  address: string;
  city: string;
}
type ExcludeType = Exclude<keyof FirstType, keyof SecondType>;
/*
等效于
type ExcludeType = 'firstName' | 'lastName'
*/


3.8 属性类型生成 Record<T, U>


按照 T 作为 key 的类型、U 作为 value 的类型定义一组键值对对象,一般 T 是字符串或者数字,U 可以为任何类型


type RecordType = Record<string | number,User[] | User | string | number | boolean>
const recordData = {
  1: 1,
  2: '2',
  user: { username: 'xxx' },
  delete: false
}


3.9 非空类型生成 NonNullable<T>


从 T 中排除 null 和 undefined


type DefaultType = string | number | null | undefined;
type NonNullableType = NonNullable<DefaultType>
/*
等效于
type NonNullableType = string | number
*/


3.10 映射类型


从一个类型中提取所有属性名来组成一个新类型


前面的部分类型就是映射类型处理的。


type Type = {
  id: number;
  age: number;
  firstName: string;
  lastName: string;
}
type MappedType = {
  [T in keyof Type]: Type[T] | boolean
}
/*
等效于
type MappedType = {
  id: number | boolean;
  age: number | boolean;
  firstName: string | boolean;
  lastName: string | boolean;
}
*/


目录
相关文章
|
2天前
|
JavaScript 编译器
TypeScript中类型守卫:缩小类型范围的艺术
【4月更文挑战第23天】TypeScript中的类型守卫是缩小类型范围的关键技术,它帮助我们在运行时确保值的精确类型,提升代码健壮性和可读性。类型守卫包括`typeof`(检查原始类型)、`instanceof`(检查类实例)和自定义类型守卫。通过这些方法,我们可以更好地处理联合类型、泛型和不同数据源,降低运行时错误,提高代码质量。
|
2天前
|
JavaScript 前端开发 安全
Apollo与TypeScript:强大类型检查在前端开发中的应用
Apollo与TypeScript:强大类型检查在前端开发中的应用
|
2天前
|
监控 JavaScript 安全
TypeScript在员工上网行为监控中的类型安全实践
本文演示了如何使用TypeScript在员工上网行为监控系统中实现类型安全。通过定义`Website`类型和`MonitoringData`接口,确保数据准确性和可靠性。示例展示了从监控设备获取数据和提交到网站的函数,强调了类型定义在防止错误、提升代码可维护性方面的作用。
27 7
|
2天前
|
JavaScript 安全 前端开发
【TypeScript技术专栏】TypeScript中的类型推断与类型守卫
【4月更文挑战第30天】TypeScript的类型推断与类型守卫是提升代码安全的关键。类型推断自动识别变量类型,减少错误,包括基础、上下文、最佳通用和控制流类型推断。类型守卫则通过`typeof`、`instanceof`及自定义函数在运行时确认变量类型,确保类型安全。两者结合使用,优化开发体验,助力构建健壮应用。
|
2天前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript类型系统与接口详解
【4月更文挑战第30天】TypeScript扩展JavaScript,引入静态类型检查以减少错误。其类型系统包括基本类型、数组等,而接口是定义对象结构的机制。接口描述对象外形,不涉及实现,可用于规定对象属性和方法。通过声明、实现接口,以及利用可选、只读属性,接口继承和合并,TypeScript增强了代码的健壮性和维护性。学习和掌握TypeScript的接口对于大型项目开发至关重要。
|
2天前
|
JavaScript 安全 前端开发
【亮剑】TypeScript 由于其强类型的特性,直接为对象动态添加属性可能会遇到一些问题
【4月更文挑战第30天】本文探讨了在 TypeScript 中安全地为对象动态添加属性的方法。基础方法是使用索引签名,允许接受任何属性名但牺牲了部分类型检查。进阶方法是接口扩展,通过声明合并动态添加属性,保持类型安全但可能导致代码重复。高级方法利用 OOP 模式的类继承,确保类型安全但增加代码复杂性。选择哪种方法取决于应用场景、代码复杂性和类型安全性需求。
|
2天前
|
JavaScript 前端开发
TypeScript基础类型
TypeScript基础类型
|
2天前
|
JavaScript 前端开发
typescript 混合类型
typescript 混合类型
|
2天前
|
JavaScript 前端开发 开发者
类型检查:结合TypeScript和Vue进行开发
【4月更文挑战第24天】TypeScript是JavaScript超集,提供类型注解等特性,提升代码质量和可维护性。Vue.js是一款高效前端框架,两者结合优化开发体验。本文指导如何配置和使用TypeScript与Vue:安装TypeScript和Vue CLI,创建Vue项目时选择TypeScript支持,配置`tsconfig.json`,编写`.tsx`组件,最后运行和构建项目。这种结合有助于错误检查和提升开发效率。
|
2天前
|
JavaScript 编译器 开发者
TypeScript中的类型推断机制:原理与实践
【4月更文挑战第23天】TypeScript的类型推断简化编码,提高代码可读性。编译器基于变量初始值或上下文推断类型,若新值不兼容则报错。文章深入探讨了类型推断原理和实践,包括基本类型、数组、函数参数与返回值、对象类型的推断,并提醒注意类型推断的限制,如非万能、类型兼容性和适度显式指定类型。了解这些能帮助更好地使用TypeScript。