TypeScript基本类型

TypeScript基本类型

一、前言

TypeScript 是 JavaScript 的一个超集,它通过添加静态类型系统帮助开发者写出更健壮、可维护性更强的代码。而理解 TypeScript 的基本类型 是学习 TypeScript 的第一步。

本文将带你全面了解 TypeScript 中的常用基本类型,包括:

✅ 数值类型✅ 字符串类型✅ 布尔类型✅ null 与 undefined✅ any 与 unknown✅ never 与 void✅ 数组类型✅ 元组类型

并通过大量代码示例帮助你掌握其使用方式。

二、TypeScript 是什么?

✅ 定义:

TypeScript 是由微软开发的一种开源编程语言,它是 JavaScript 的超集,增加了 静态类型检查机制 和面向对象特性。

⚠️ 核心优势:

编译时错误检测,减少运行时错误提供更好的代码提示与重构支持支持现代 JS 特性及未来提案

三、TypeScript 基本类型一览

类型示例描述numberlet age: number = 25;所有数字类型(整数/浮点)stringlet name: string = "Tom";字符串类型booleanlet isDone: boolean = true;布尔类型nulllet value: null = null;空值undefinedlet x: undefined = undefined;未定义值anylet data: any = "任意类型";不进行类型检查unknownlet input: unknown;需要显式类型检查neverfunction error(): never { throw new Error(); }永不返回的函数voidfunction sayHello(): void { console.log("Hello"); }表示无返回值arraylet list: number[] = [1, 2, 3];数组类型tuplelet person: [string, number] = ["Tom", 25];固定长度、固定类型的数组

四、数值类型 number

TypeScript 中所有数字都属于 number 类型,包括整数、浮点数、十六进制、八进制、二进制等。

let age: number = 25;

let price: number = 9.99;

let hex: number = 0xf00d;

let binary: number = 0b1010;

五、字符串类型 string

字符串类型用于表示文本信息,可以用单引号或双引号定义。

let name: string = "Alice";

let message: string = `欢迎,${name}`;

console.log(message); // 输出:欢迎,Alice

六、布尔类型 boolean

布尔类型只有两个值:true 和 false,常用于条件判断。

let isLogin: boolean = false;

if (isLogin) {

console.log("用户已登录");

} else {

console.log("请先登录");

}

七、null 与 undefined

这两个类型分别表示“空值”和“未定义”,它们是所有类型的子类型。

let user: string | null = null; // 可为 null 的字符串

let score: number | undefined = undefined; // 可为 undefined 的数值

// 使用场景:异步获取数据

function fetchData(): string | null {

return null;

}

八、any 类型

any 类型表示允许该变量为任意类型,相当于关闭了类型检查。

⚠️ 虽然方便,但应谨慎使用!

let value: any = "字符串";

value = 123;

value = true;

value.someMethod(); // 不会报错,但可能运行时报错

九、 unknown 类型

unknown 是 any 的安全替代方案。使用前必须进行类型检查。

let input: unknown;

input = "hello";

input = 123;

if (typeof input === "string") {

console.log(input.toUpperCase());

} else if (typeof input === "number") {

console.log(input.toFixed(2));

}

十、never 类型

never 表示永远不会发生值的类型,常见于抛出异常或无限循环的函数。

function throwError(message: string): never {

throw new Error(message);

}

function infiniteLoop(): never {

while (true) {}

}

十一、 void 类型

void 表示没有返回值的函数,或者变量不能赋任何值(除了 undefined)。

function sayHello(): void {

console.log("Hello");

}

let result: void = undefined;

十二、数组类型

TypeScript 支持两种方式声明数组类型:

✅ 方式一:元素类型后加 []

let numbers: number[] = [1, 2, 3];

✅ 方式二:泛型语法 Array<元素类型>

let fruits: Array = ["apple", "banana"];

十三、元组类型 tuple

元组表示一个已知数量和类型的数组,每个位置上的类型是固定的。

let person: [string, number] = ["Tom", 25];

// 错误写法:

person[1] = "25"; // 报错:不能将类型 'string' 分配给类型 'number'

十四、实际应用场景示例

✅ 示例1:用户登录状态管理

type User = {

id: number;

username: string;

isLoggedIn: boolean;

lastLogin?: Date; // 可选属性

};

const currentUser: User = {

id: 1,

username: "admin",

isLoggedIn: true

};

✅ 示例2:处理 API 返回数据

function fetchUserData(): string | null {

const response = Math.random() > 0.5 ? "{id: 1}" : null;

return response;

}

const userData = fetchUserData();

if (userData !== null) {

console.log(JSON.parse(userData));

}

十五、注意事项与最佳实践

场景建议是否推荐使用 any?❌ 不推荐,除非确实需要动态类型如何替代 any?✅ 推荐使用 unknown 或具体类型null vs undefined✅ 明确区分使用场景是否可以修改元组长度?❌ 不推荐,元组长度应固定是否推荐类型推断?✅ 推荐使用类型推断提高代码简洁性

十六、总结对比表:TypeScript 基本类型一览

类型示例是否推荐使用说明numberlet age: number = 25;✅ 是所有数字类型stringlet name: string = "Tom";✅ 是字符串booleanlet isOk: boolean = true;✅ 是布尔值nulllet val: null = null;✅ 是空值undefinedlet x: undefined = undefined;✅ 是未定义anylet data: any = "任意类型";❌ 否应尽量避免unknownlet input: unknown;✅ 是安全替代 anyneverfunction error(): never { throw new Error(); }✅ 是永不返回值voidfunction log(): void {}✅ 是无返回值arraylet list: number[] = [1, 2, 3];✅ 是数组tuplelet person: [string, number] = ["Tom", 25];✅ 是固定类型和顺序

十七、结语

感谢您的阅读!如果你有任何疑问或想要分享的经验,请在评论区留言交流!

🎊 相关推荐

暗度陈仓三六计是什么生肖,打一最佳正确生肖,成语精选解释落实
ps导出的png格式为什么不是透明的?
365bet体育投注在线

ps导出的png格式为什么不是透明的?

📅 07-19 👀 3971
2010年世界男篮锦标赛 中国队
365bet体育投注在线

2010年世界男篮锦标赛 中国队

📅 07-22 👀 7838