当前位置：首页 > news >正文

【ts语法学习】主要数据类型与变量声明时的类型注解

news 来源：原创 2025/6/23 0:42:34

一、ts中的主要数据类型

1.布尔类型 (boolean)
2.数值类型 (number)
3.字符串类型 (string)
4.数组类型 (Array)
5.对象类型 (object)
6.null 和 undefined
7.元组类型 (Tuple)
8.枚举类型 (enum)
9.任意类型 (any)
10.never
11.unknown
12.void

TypeScript（简称 TS）是强类型语言,存在类型推断
TS中的类型推断是指编译器会根据上下文自动推断变量,表达式或返回值的类型，而不需要显式地声明类型注解,例如:

let num = 10;  // TypeScript 推断 num 为 number 类型
let str = "Hello";  // TypeScript 推断 str 为 string 类型function add(a: number, b: number) {return a + b;  // TypeScript 推断返回值为 number
}let arr = [1, 2, 3];  // TypeScript 推断 arr 为 number[] 类型
let obj = { name: "Alice", age: 25 };  // TypeScript 推断 obj 为 { name: string, age: number } 类型

二、变量声明

1.布尔类型

let isTrue:boolean = true

2.数值类型 (number)

let age: number = 25;

3.字符串类型 (string)

let name: string = "John Doe";

4.数组类型 (Array)

//传统方式
let list: number[] = [1, 2, 3];
//泛型方式（更推荐）
let list: Array<number> = [1, 2, 3];

5.对象类型 (object)

在 TypeScript 中，对象类型的变量声明和使用非常灵活，可以提供强大的类型检查和代码提示。声明一个对象,可以使用接口(interface)和类型别名(type)的方式
对象的基本声明:
1.使用对象字面量

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

2.使用类型别名

type Person = {name: string;age: number;
};let person: Person = {name: "Alice",age: 30
};

3.使用接口

interface Person {name: string;age: number;
}let person: Person = {name: "Alice",age: 30
};

对象属性的可选性

interface Person {name: string;age?: number; // age 是可选属性
}let person1: Person = {name: "Alice"
};let person2: Person = {name: "Bob",age: 25
};

对象的只读属性

interface Person {readonly id: number;name: string;age?: number;
}let person: Person = {id: 1,name: "Alice"
};person.name = "Bob"; // 合法
person.id = 2; // 错误: 无法分配到 "id"，因为它是只读属性

对象的扩展与继承

interface Shape {color: string;
}interface Square extends Shape {sideLength: number;
}let square: Square = {color: "blue",sideLength: 10
};

6.null 和 undefined

//在 TypeScript 中，let obj: null | undefined = null; 
//这种写法被称为联合类型（Union Types）的变量声明。
//表示当前obj对象,可以被赋值null,也可以是undefined
let obj:null | undefined = null

7.元组类型 (Tuple)

在 TypeScript 中，元组（Tuple）是一种特殊的数组类型，它允许你在数组中明确指定每个位置的元素类型。元组可以确保数组的长度和每个位置的元素类型是固定的
基本元祖类型声明:

let tuple: [string, number];tuple = ["Alice", 25]; // 正确
// tuple = ["Bob", 25, true]; // 错误: 元组长度不匹配
// tuple = [25, "Bob"]; // 错误: 元素类型不匹配console.log(tuple[0]); // 输出: "Alice"
console.log(tuple[1]); // 输出: 25

访问元组元素:

let tuple: [string, number, boolean] = ["Alice", 25, true];console.log(tuple[0]); // 输出: "Alice"
console.log(tuple[1]); // 输出: 25
console.log(tuple[2]); // 输出: true

元组的可选元素:

let tuple: [string, number?, boolean?];tuple = ["Alice"]; // 合法
tuple = ["Alice", 25]; // 合法
tuple = ["Alice", 25, true]; // 合法
// tuple = ["Alice", 25, true, false]; // 错误: 元组长度不匹配console.log(tuple[0]); // 输出: "Alice"
console.log(tuple[1]); // 输出: 25 (如果存在)
console.log(tuple[2]); // 输出: true (如果存在)

元祖的剩余元素:

let tuple: [string, ...number[]];tuple = ["Alice", 25, 30, 35];console.log(tuple[0]); // 输出: "Alice"
console.log(tuple[1]); // 输出: 25
console.log(tuple[2]); // 输出: 30
console.log(tuple[3]); // 输出: 35

元祖的类型断言:
使用as关键字进行类型断言

let arr: any[] = ["Alice", 25, true];
let tuple = arr as [string, number, boolean];console.log(tuple[0]); // 输出: "Alice"
console.log(tuple[1]); // 输出: 25
console.log(tuple[2]); // 输出: true

8.枚举类型 (enum)

None 是枚举的第一个成员，且没有显式地赋值,它的值默认为 0
如果在枚举中没有显式地定义 None 成员，TypeScript 会根据枚举成员的定义顺序自动赋值。
数字枚举:

//默认情况下，枚举的成员是数字类型。枚举中的第一个成员默认值为 0，后面的成员依次递增。
enum Direction {Up,      // 0Down,    // 1Left,    // 2Right    // 3
}let direction: Direction = Direction.Up;console.log(direction); // 输出: 0//也可以手动赋值
enum Direction {Up = 1,      // 1Down = 2,    // 2Left = 3,    // 3Right = 4    // 4
}let direction: Direction = Direction.Up;console.log(direction); // 输出: 1

字符串枚举:

enum Direction {Up = "UP",Down = "DOWN",Left = "LEFT",Right = "RIGHT"
}let direction: Direction = Direction.Up;console.log(direction); // 输出: "UP"

常量枚举:
常量枚举（const enum）在编译时会被完全移除，所有的访问都会被替换为直接的值。这可以减少编译后的代码量。

const enum Direction {Up,Down,Left,Right
}let direction: Direction = Direction.Up;console.log(direction); // 输出: 0

异构枚举:
异构枚举允许你混合使用数字和字符串类型的枚举成员。

enum BooleanLikeHeterogeneousEnum {No = 0,Yes = "YES",
}console.log(BooleanLikeHeterogeneousEnum.No);  // 输出: 0
console.log(BooleanLikeHeterogeneousEnum.Yes); // 输出: "YES"

枚举的计算成员:
枚举的成员可以是一个表达式,详略

9.任意类型 (any)

在 TypeScript 中，any 类型是一种特殊的类型，它允许变量可以是任意类型。使用 any 类型可以绕过 TypeScript 的类型检查，使得变量可以接受任何类型的值。然而，过度使用 any 会削弱 TypeScript 的类型系统优势，因此在实际开发中应谨慎使用。

let value: any;  // value 可以是任意类型
value = 42;      // 合法
value = "Hello"; // 合法
value = false;   // 合法

any的缺点:
当你使用 any 类型时，编辑器将无法提供代码提示和自动补全功能，这会降低开发效率。

解决办法:
使用unknown类型,unknown 是 any 的安全替代品。与 any 不同，unknown 类型在使用前需要进行类型检查或类型断言。

let value: unknown;
value = 42;
value = "Hello";if (typeof value === "string") {//toUpperCase用于将字符串中的所有字母转换为大写形式console.log(value.toUpperCase()); // 合法
}

10.never类型

在 TypeScript 中，never 类型表示那些永远不会发生的值的类型。never 类型是所有类型的子类型，并且可以赋值给任何类型，但 never 类型本身不能赋值给除了 never 类型之外的任何类型。
(这里可以理解为,never虽然是所有类型的子类型,但它表示的是一个永远不会发生的值的类型,赋值的本质是将一个变量的值复制到另一个变量中,如果源变量没有值，那么这个赋值操作就没有意义)

never 类型的基本声明:
never类型的出现有以下两种情况
1.无法到达的代码
当一个函数永远不会返回时，其返回类型声明为 never。

function throwError(message: string): never {throw new Error(message);
}// 函数抛出异常，永远不会返回
throwError("Something went wrong");

2.无限循环

function infiniteLoop(): never {while (true) {// 无限循环}
}// 函数进入无限循环，永远不会返回
infiniteLoop();

11.unknown类型

参考上文any类型的用法

12.void类型

在 TypeScript 中，void 类型表示一个函数没有返回值，或者一个变量不持有任何有意义的值。void 类型在 TypeScript 中主要用于函数的返回类型声明，而不是用于变量声明。

void 类型的变量声明:
void 类型的变量只能被赋值为 undefined 或 null（在 strict null checks 关闭的情况下）

let voidVar: void;voidVar = undefined; // 合法，因为 undefined 是 void 类型的值
voidVar = null; // 合法（如果 strict null checks 关闭）
voidVar = 42; // 错误: Type '42' is not assignable to type 'void'
voidVar = "hello"; // 错误: Type '"hello"' is not assignable to type 'void'

void类型的使用场景:
表示函数不返回任何值

function logMessage(message: string): void {console.log(message);
}logMessage("Hello, world!"); // 函数没有返回值

回调函数的返回类型,处理不需要返回值的回调

function doSomething(callback: () => void): void {callback();
}doSomething(() => {console.log("Callback executed");
});

void与undefined,never 的区别:
undefined 是一个实际的值：undefined 是一个 JavaScript 内置的值，表示一个变量未被赋值。

never 表示永远不会返回：never 表示函数永远不会返回，通常用于抛出异常或进入无限循环的函数。

void 是一个类型：void 表示一个函数没有返回值，或者一个变量不持有任何有意义的值。

补充null与undefined的区别:
null 是显式的空值：null 通常由开发者显式地赋值，表示“这里没有值”。

undefined 是隐式的空值：undefined 通常由 JavaScript 引擎自动赋值，表示“变量未定义”或“属性不存在”。