news 2026/5/8 7:46:41

TypeScript 基础类型

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
TypeScript 基础类型

TypeScript 基础类型详解

TypeScript 的类型系统是其核心优势,它提供了比 JavaScript 更严格、更安全的类型检查。以下是 TypeScript 中最常用的基础类型(primitive types 和常用组合类型),全部基于 TypeScript 5.x 版本。

1. 基本原始类型(Primitives)
类型描述示例代码说明
boolean布尔值let isActive: boolean = true;只有truefalse
number数字(包括整数、浮点数)let age: number = 30;
let pi: number = 3.14;
支持NaNInfinity
bigint大整数(ES2020+)let big: bigint = 100n;末尾加n
string字符串let name: string = "Alice";
let greeting: string =Hi ${name};
支持模板字符串
undefined未定义let u: undefined = undefined;严格模式下需注意
null空值let n: null = null;undefined不同
symbol唯一标识符let sym: symbol = Symbol("id");常用于对象属性键
2. any 类型(万能类型)
letanything:any=4;anything="string";// 任意类型都可赋值anything=true;// 不会报错anything.bark();// 也不会报错(但运行时可能出错)

注意any会关闭类型检查,不推荐滥用。尽量使用unknown替代。

3. unknown 类型(更安全的 any)
letunknownValue:unknown=4;// unknownValue.toFixed(); // 错误:必须先检查类型if(typeofunknownValue==="number"){console.log(unknownValue.toFixed(2));// OK}

unknown强制你进行类型检查或断言,安全性远高于any

4. 数组类型(Array)

两种写法等价:

letnumbers1:number[]=[1,2,3];// 推荐letnumbers2:Array<number>=[1,2,3];// 泛型写法

只读数组:

letreadonlyArr:ReadonlyArray<number>=[1,2,3];// readonlyArr.push(4); // 错误:只读
5. 元组类型(Tuple)

固定长度、固定类型顺序的数组:

letperson:[string,number]=["Alice",30];// person[2] = "extra"; // 错误:长度固定// 可选元素(TS 4.0+)letoptionalTuple:[string,number?]=["Bob"];
6. 对象类型(Object)

推荐使用interfacetype定义对象结构:

// 使用 interfaceinterfaceUser{name:string;age:number;isAdmin?:boolean;// 可选readonlyid:number;// 只读}letuser:User={name:"Charlie",age:28,id:1};// 使用 type(更灵活)typePoint={x:number;y:number;};letp:Point={x:10,y:20};
7. 联合类型(Union Types)

一个值可以是多种类型之一:

letid:string|number=123;id="abc";// OKfunctionprintId(id:string|number){if(typeofid==="string"){console.log(id.toUpperCase());}else{console.log(id.toFixed(2));}}
8. 字面量类型(Literal Types)

限制值为具体字面量:

typeStatus="success"|"error"|"loading";letstate:Status="success";// 只能是这三个值typeYesNo=true|false;typeZero=0;
9. 枚举(Enums)

定义一组命名常量:

enumDirection{Up,// 默认 0Down,// 1Left,// 2Right// 3}letdir:Direction=Direction.Up;console.log(Direction[0]);// "Up"(反向映射)

字符串枚举(推荐):

enumColor{Red="RED",Green="GREEN",Blue="BLUE"}
10. void 类型

表示函数无返回值:

functionlog(message:string):void{console.log(message);}
11. never 类型

表示永远不会正常返回:

functionthrowError(msg:string):never{thrownewError(msg);}functioninfiniteLoop():never{while(true){}}
12. 内置实用类型(Utility Types)——常用基础工具
类型作用示例
Partial<T>所有属性变为可选Partial<User>
Required<T>所有属性变为必选Required<User>
Readonly<T>所有属性变为只读Readonly<User>
Pick<T, K>挑选部分属性`Pick<User, “name”
Omit<T, K>排除部分属性Omit<User, "id">
Record<K, T>创建键值类型对象Record<string, number>
小结:常用类型速查
场景推荐类型写法
数字number
字符串string
布尔boolean
数组T[]Array<T>
对象interfacetype
多种可能`A
固定值`“success”
无返回值函数void
永远不返回never
任意类型(谨慎)unknown(推荐) >any

如果您想深入某个类型(如泛型、交叉类型、类型守卫、条件类型等),或者需要具体示例代码,请告诉我!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/8 1:12:03

TypeScript 变量声明

TypeScript 变量声明详解 TypeScript 的变量声明方式与现代 JavaScript&#xff08;ES6&#xff09;完全一致&#xff0c;主要使用 let、const 和 var&#xff08;不推荐&#xff09;。区别在于 TypeScript 增加了静态类型注解&#xff0c;可以在声明时指定变量的类型&#xf…

作者头像 李华
网站建设 2026/5/1 17:32:17

TypeScript 函数

TypeScript 函数详解 TypeScript 的函数语法与 JavaScript 基本一致&#xff0c;但增加了强大的类型支持&#xff0c;包括参数类型、返回值类型、可选参数、默认参数、剩余参数、重载等。这些特性让函数更安全、更易维护。 1. 基本函数声明与表达式 // 函数声明&#xff08;…

作者头像 李华
网站建设 2026/5/8 2:09:20

Excalidraw访客模式使用注意事项

Excalidraw访客模式使用注意事项 在远程会议频繁、跨组织协作日益普遍的今天&#xff0c;一个简单却高效的可视化工具往往能决定一场头脑风暴的成败。设想这样一个场景&#xff1a;你正在主持一次产品架构评审会&#xff0c;参会者包括外部顾问、客户代表和内部开发人员。传统流…

作者头像 李华
网站建设 2026/5/1 6:20:35

【AI工程化新突破】:Open-AutoGLM可视化配置的7个高阶用法

第一章&#xff1a;Open-AutoGLM可视化配置工具的核心价值Open-AutoGLM作为面向大模型应用开发的可视化配置工具&#xff0c;显著降低了非专业开发者在构建智能对话系统时的技术门槛。通过图形化界面与模块化设计&#xff0c;用户无需编写复杂代码即可完成模型调用、提示工程优…

作者头像 李华
网站建设 2026/5/2 21:33:24

Open-AutoGLM高效开发实战(拖拽式流程设计全曝光)

第一章&#xff1a;Open-AutoGLM高效开发概览Open-AutoGLM 是一个面向生成式语言模型自动化开发的开源框架&#xff0c;旨在简化从模型训练、微调到部署的全流程。其核心设计理念是通过声明式配置与模块化组件结合&#xff0c;提升开发效率并降低使用门槛。核心特性 支持多后端…

作者头像 李华
网站建设 2026/5/3 22:29:01

Excalidraw项目空间组织结构设计

Excalidraw项目空间组织结构设计 在远程协作成为常态的今天&#xff0c;团队沟通中最缺失的是什么&#xff1f;不是视频会议里的面孔&#xff0c;也不是即时消息中的文字&#xff0c;而是那块可以随手涂画、边说边改的白板。真实会议室里&#xff0c;一张草图往往胜过千言万语&…

作者头像 李华