【TypeScript】TypeScript 基础类型

目录

TypeScript 基础类型

TypeScript 数据类型

1、string 字符串

模板字符串

2、number 数字

3、boolean 布尔值

4、array 数组

5、tuple 元组

6、enum 枚举

7、any 类型

8、void 空类型

9、null 和 undefined

10、never 类型

11、object 对象类型

12、联合类型 (Union)

13、unknown 不确定的类型

14、.类型断言 (Type Assertions)

15、字面量类型

实例


TypeScript 基础类型

TypeScript 是一种为 JavaScript 添加了类型系统的编程语言。通过引入类型,TypeScript 提供了更强的类型安全性和代码检查能力。

TypeScript 数据类型

TypeScript 包含的数据类型如下表:

类型描述示例
string表示文本数据let name: string = "Alice";
number表示数字,包括整数和浮点数let age: number = 30;
boolean表示布尔值 true 或 falselet isDone: boolean = true;
array表示相同类型的元素数组let list: number[] = [1, 2, 3];
tuple表示已知类型和长度的数组let person: [string, number] = ["Alice", 30];
enum定义一组命名常量enum Color { Red, Green, Blue };
any任意类型,不进行类型检查let value: any = 42;
void无返回值(常用于函数)function log(): void {}
null表示空值let empty: null = null;
undefined表示未定义let undef: undefined = undefined;
never表示不会有返回值function error(): never { throw new Error("error"); }
object表示非原始类型let obj: object = { name: "Alice" };
union联合类型,表示可以是多种类型之一`let id: string
unknown不确定类型,需类型检查后再使用let value: unknown = "Hello";

注意:TypeScript 和 JavaScript 没有整数类型。

1、string 字符串

表示文本数据

只能存储字符串,通常用于描述文字信息。

let message: string = "Hello, TypeScript!";
模板字符串

TypeScript 支持 模板字符串,用反引号 `(记住不是单引号 ')来定义,允许在字符串中插入变量或表达式,非常适合多行文本和拼接变量。

let name: string = "Alice";
let greeting: string = `Hello, ${name}! Welcome to TypeScript.`;
console.log(greeting); // 输出:Hello, Alice! Welcome to TypeScript.

2、number 数字

TypeScript 使用 number 表示所有数字,包括整数和浮点数。

let age: number = 25;
let temperature: number = 36.5;

3、boolean 布尔值

表示逻辑值 true 或 false,用于条件判断。

let isCompleted: boolean = false;

4、array 数组

可以表示一组相同类型的元素。可以使用 type[] 或 Array<type> 两种方式表示。

let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["Alice", "Bob"];

5、tuple 元组

表示已知数量和类型的数组。每个元素可以是不同的类型,适合表示固定结构的数据。

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

6、enum 枚举

用来定义一组命名常量。默认情况下枚举的值从 0 开始递增。

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

7、any 类型 

以表示任何类型。适合不确定数据类型的情况,但使用时需谨慎,因为 any 会绕过类型检查。

 不进行类型检查

let randomValue: any = 42;
randomValue = "hello";

使用场景:

  • 变量值会动态改变时
  • 改写现有代码时,允许在编译时可选择地包含或移除类型检查
  • 定义存储各种类型数据的数组时

任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型,它常用于以下三种情况。

1、变量的值会动态改变时,比如来自用户的输入,任意值类型可以让这些变量跳过编译阶段的类型检查

示例:

let x: any = 1;    // 数字类型
x = 'I am who I am';    // 字符串类型
x = false;    // 布尔类型
2、改写现有代码时,任意值允许在编译时可选择地包含或移除类型检查

示例:

let x: any = 4;
x.ifItExists();    // 正确,ifItExists方法在运行时可能存在,但这里并不会检查
x.toFixed();    // 正确
3、定义存储各种类型数据的数组时

示例:

let arrayList: any[] = [1, false, 'fine'];
arrayList[1] = 100;

8、void 空类型

用于没有返回值的函数。声明变量时,类型 void 意味着只能赋值 null 或 undefined。

function logMessage(message: string): void {
  console.log(message);
}

9、null 和 undefined

null 和 undefined分别表示"空值"和"未定义"。在默认情况下,它们是所有类型的子类型,但可以通过设置 strictNullChecks 严格检查。

null

在 JavaScript 中 null 表示 "什么都没有"。

null是一个只有一个值的特殊类型。表示一个空对象引用。

用 typeof 检测 null 返回是 object。

undefined

在 JavaScript 中, undefined 是一个没有设置值的变量。

typeof 一个没有值的变量会返回 undefined。

Null 和 Undefined 是其他任何类型(包括 void)的子类型,可以赋值给其它类型,如数字类型,此时,赋值后的类型会变成 null 或 undefined。

严格空检查

而在TypeScript中启用严格的空校验(--strictNullChecks)特性,就可以使得null 和 undefined 只能被赋值给 void 或本身对应的类型

示例:

// 启用 --strictNullChecks
let x: number;
x = 1; // 编译正确
x = undefined;    // 编译错误
x = null;    // 编译错误

上面的例子中变量 x 只能是数字类型。如果一个类型可能出现 null 或 undefined, 可以用 | 来支持多种类型

示例:

// 启用 --strictNullChecks
let x: number | null | undefined;
x = 1; // 编译正确
x = undefined;    // 编译正确
x = null;    // 编译正确

更多内容可以查看:JavaScript typeof, null, 和 undefinedhttps://www.runoob.com/js/js-typeof.htmlhttps://www.runoob.com/js/js-typeof.htmlhttps://www.runoob.com/js/js-typeof.html

10、never 类型

表示不会有返回值,通常用于抛出错误或进入无限循环的函数,表示该函数永远不会正常结束。

function throwError(message: string): never {
  throw new Error(message);
}

never类型特性:

  • 是其他类型的子类型
  • 变量只能被never类型赋值

never 是其它类型(包括 null 和 undefined)的子类型,代表从不会出现的值。

这意味着声明为 never 类型的变量只能被 never 类型所赋值,在函数中它通常表现为抛出异常或无法执行到终止点(例如无限循环)

示例:

let x: never;
let y: number;

// 编译错误,数字类型不能转为 never 类型
x = 123;

// 运行正确,never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();

// 运行正确,never 类型可以赋值给 数字类型
y = (()=>{ throw new Error('exception')})();

// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {
    throw new Error(message);
}

// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {
    while (true) {}
}

11、object 对象类型

表示非原始类型的值,适用于复杂的对象结构。

let person: object = { name: "Alice", age: 30 };

12、联合类型 (Union)

表示一个变量可以是多种类型之一。通过 | 符号实现。

let id: string | number;
id = "123";
id = 456;

13、unknown 不确定的类型

与 any 类似,但更严格。必须经过类型检查后才能赋值给其他类型变量。

let value: unknown = "Hello";
if (typeof value === "string") {
  let message: string = value;
}

14、.类型断言 (Type Assertions)

类型断言可以让开发者明确告诉编译器变量的类型,常用于无法推断的情况。可以使用 as 或尖括号语法。

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

15、字面量类型

字面量类型可以让变量只能拥有特定的值,用于结合联合类型定义变量的特定状态。

let direction: "up" | "down" | "left" | "right";
direction = "up";

通过这些类型,TypeScript 提供了更强的类型安全性和代码检查能力,使开发者能够更清晰、准确地表达数据和意图,减少运行时错误。

实例

模拟用户对象和操作函数

// 定义枚举类型,用于表示用户的角色
enum Role {
  Admin,
  User,
  Guest,
}

// 使用 interface 定义用户的结构
interface User {
  id: number;
  username: string;
  isActive: boolean;
  roles: Role[];
  contactDetails: [string, string]; // [phoneNumber: string, email: string]
}

// 示例用户对象
let user: User = {
  id: 1,
  username: "alice",
  isActive: true,
  roles: [Role.User, Role.Guest],
  contactDetails: ["123-456-7890", "alice@example.com"],
};

// 获取用户信息的函数
function getUserInfo(user: User): string {
  return `User ID: ${user.id}, Username: ${user.username},
Roles: ${user.roles.map(role => Role[role]).join(', ')}`;
}

// 打印用户信息的函数
function printUserInfo(user: User): void {
  console.log(getUserInfo(user));
}

// 根据ID或用户名查找用户的函数
function findUser(identifier: number | string): User | null {
  // 假设有一个用户列表用于查找
  let users: User[] = [user];
  if (typeof identifier === "number") {
    return users.find(u => u.id === identifier) || null;
  } else {
    return users.find(u => u.username === identifier) || null;
  }
}

// 抛出错误的函数
function throwError(message: string): never {
  throw new Error(message);
}

// 示例使用
printUserInfo(user);
let foundUser = findUser(1);
if (foundUser) {
  console.log(foundUser);
} else {
  console.log("User not found");
}
throwError("An error occurred"); // 这行代码会抛出错误,函数不会继续执行

说明:

枚举类型 (Role):用于定义用户角色的命名常量 AdminUser 和 Guest

接口 (User):定义了 User 对象的结构,包括 idusernameisActive 等属性,展示了 stringnumberbooleanarray 和 tuple 类型的使用。

函数 getUserInfo:返回用户的描述信息,使用了字符串插值并结合 enum

函数 printUserInfo:类型为 void,因为它仅输出信息,不返回任何值。

联合类型 (number | string):用于 findUser 函数的参数,可以接受数字或字符串。

never 类型throwError 函数抛出错误,不会正常返回,因此使用 never 类型。

any 类型:展示如何声明一个可以接收任何类型的变量。

unknown 类型:类似 any,但更加安全,示例中在类型断言之前进行类型检查。

null 和 undefined:演示空值的使用。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值