Ts支持哪些类型和类型运算(上)

目录

1、元组

2、接口(interface)

3、枚举(Enum)

4、字面量类型

5、keyof

[6、in keyof](#6、in keyof "#6%E3%80%81in%20keyof")

7、类型的装饰


静态类型系统 就是把 类型检查从运行时提前到了编译时,所以ts类型系统中的许多类型与js并无区别

例如:

基本类型: number、boolean、string、object、bigint、symbol、undefined、null

复合类型方面,JSclass、Array,这些 TypeScript 类型系统也都支持,但是又多加了三种类型:元组(Tuple)、接口(Interface)、枚举(Enum)。

1、元组

说明:元素个数和类型固定的数组类型

ts 复制代码
type Tuple = [string,number]

2、接口(interface)

说明:用来描述对象、函数、构造器结构

ts 复制代码
//函数
interface MyPerson {
 name: string;
 age: number;
}

const obj: MyPerson = {
 name: "张三",
 age: 18,
};

class Person implements MyPerson {
 name: "小乔";
 age: 18;
}

这里我们声明了 一个 名为 MyPerson 的接口 其中有两个属性 1-name 2-age 他们对应的类型为stringnumber

obj对象应用了这个接口,所以obj中必须要有name、age这两个字段且类型必须与MyPerson相互对应

implements译为实现 代码中 Person类实现了MyPerson接口,具体表达的意思与obj相同

ts 复制代码
// 函数类型
interface SayGood {
    (name: string): string;
}

const sayGood: SayGood = (name: string) => {
    return   name + 'is good'
}

这里我们声明了 一个 名为 SayGood 的接口描述了一个函数,接受一个name为参数类型是 string 函数的返回值为string

ts 复制代码
// 构造函数
interface MyPerson {
    name: string;
    age: number;
}

/**
 * 该接口描述了一个构造函数
 * 该构造函数接受两个参数(name 和 age),并返回一个 MyPerson 类型的实例。
 */
interface PersonConstructor {
    new (name: string, age: number): MyPerson;
}

/**
 * @description: 接受一个 PersonConstructor 类型的参数,返回一个 MyPerson 类型
 * @param {PersonConstructor} ctor
 * @return {MyPerson}
 */
function createPerson(ctor: PersonConstructor):MyPerson {
    return new ctor('shmily', 18);
}

对象类型、class在ts中也叫索引类型,对象可以动态添加属性,如果不知道会有什么属性,可以使用索引签名

ts 复制代码
interface MyPerson {
    [prop: string]: string | number;
}
const obj:MyPerson = {};
obj.name = 'shmily';
obj.age = 18;

3、枚举(Enum)

说明:一系列值的集合

ts 复制代码
enum API {
  a = "/api/a",
  b = "/api/b",
  c = "/api/c",
  d = "/api/d",
}

const res = API.a; ///  /api/a

4、字面量类型

字面类型有两种,第一次为普通的字符串字面量例如'aaa',另一种为模板字面量比如 #${string}

他的意思是以#开头后面为任意的string类型

编辑

还有四种特殊的类型:void、never、any、unknown

  • never 为不可达,比如函数抛异常的时候,返回值就是 never。

  • void 为空,可以是 undefined 或 never。

  • any 为任意类型,任何类型都可以赋值给它,它也可以赋值给任何类型(除了 never)。

  • unknown 为未知类型,任何类型都可以赋值给它,但是它不可以赋值给别的类型。

5、keyof

ts 复制代码
type Person = {
  id: number;
  name: string;
  age: number;
};

type P1 = keyof Person; //'id' | 'name' | 'age'

keyof操作符得到的是Person类型的所有键值类型即 'id','name''age' 三个字面量类型 组成的联合类型'id' | 'name' | 'age'

6、in keyof

ts 复制代码
type Person = {
  id: number;
  name: string;
  age: number;
};

type P1 = keyof Person; //'id' | 'name' | 'age'
type MyPick<T, K extends keyof T> = { [P in K]: T[P] };
type P3 = MyPick<Person, "id">;

说明:便利对象并拿到所有的键

  1. K extends keyof TK进行了约束,只能是'id','name','age'中的一个类型或者几个类型组成的联合类型;

  2. 如果没有这个约束,{ [P in K]: T[P] } 则会报错。

  3. 最后 我们传入的id可以拿到对应的类型

试一试

7、类型的装饰

ts类型系统还支持 添加 类型的属性 比如 可选、只读

ts 复制代码
interface MyPerson {
    readonly name: string; //只读
    age?: number;  //可选
}

type tuple = [string, number?];
相关推荐
KaMeidebaby3 分钟前
卡梅德生物技术快报|适配体筛选技术架构演进:SPARK-seq 高通量平台原理与技术流程解析
大数据·前端·其他·百度·架构·spark·新浪微博
ZC跨境爬虫14 分钟前
跟着 MDN 学CSS day_7:(层叠优先级与继承)
前端·css·数据库·ui·html
Shadow(⊙o⊙)19 分钟前
qt信号和槽链接的接入与断开
开发语言·前端·c++·qt·学习
慕斯fuafua20 分钟前
JS——DOM操作
前端·javascript·html
忆林52022 分钟前
Jenkins前端打包构建老项目拯救指南
运维·前端·jenkins
微祎_28 分钟前
写给新手的 triton-inference-server-ge-backend:昇腾Triton推理服务后端到底是啥?
前端·人工智能·cann
烂不烂问厨房32 分钟前
两张图片拼接在一起中间有条白线
前端
掘金安东尼35 分钟前
浏览器跨域窗口通信技术调研:window.open 与 postMessage
前端
Highcharts.js3 小时前
缺失数据可视化图表开发实战|Highcharts创建人员出生统计面积图表示例
开发语言·前端·javascript·信息可视化·highcharts·图表开发
LaughingZhu9 小时前
Product Hunt 每日热榜 | 2026-05-21
前端·人工智能·经验分享·chatgpt·html