返回 导航

其他

hangge.com

TypeScript - 数据类型详解1（继承自JS类型：number、boolean、string、array等）

作者：hangge | 2026-07-30 08:54
        TypeScript 继承了 JavaScript 的全部数据类型，并为每种类型提供了类型注解支持。在 TypeScript 中声明变量时，可以明确指定变量的类型，从而获得编译时的类型检查。本文将详细介绍 TypeScript 中的 JavaScript 数据类型，包括 number、boolean、string、array、object、null、undefined 和 symbol，帮助大家掌握 TypeScript 的类型系统基础。

一、number 类型

1，基本使用

（1）number 数字类型是开发中经常使用的类型。与 JavaScript 一样，TypeScript 不区分整数型（int）和浮点型（double），而是统一使用 number 类型：
// 定义整数和浮点数
let num1: number = 100;      // 整数
let num2: number = 6.66;    // 浮点数

console.log(num1, num2);    // 输出: 100 6.66

（2）在 ES6 中可以用二进制、八进制、十进制、十六进制来表示数字，TypeScript 也支持这些表示方式：
提示：虽然可以使用不同进制表示数字，但最终输出时都会转换为十进制。二进制使用 0b 前缀，八进制使用 0o 前缀，十六进制使用 0x 前缀。
// 不同进制表示数字
let decimal: number = 100;    // 十进制
let binary: number = 0b110;   // 二进制，以 0b 开头
let octal: number = 0o555;    // 八进制，以 0o 开头
let hex: number = 0xf23;      // 十六进制，以 0x 开头

console.log(decimal, binary, octal, hex);  // 输出: 100 6 365 3875

2，特殊数值

（1）number 类型还包含几个特殊的数值：
// 特殊数值
let infinity: number = Infinity;      // 正无穷
let negInfinity: number = -Infinity; // 负无穷
let nan: number = NaN;               // 非数字（Not a Number）

console.log(infinity, negInfinity, nan);

（2）可以使用 Number 对象的属性来获取最大、最小等特殊值：
// 使用 Number 对象的属性
let max: number = Number.MAX_VALUE;          // 最大数值
let min: number = Number.MIN_VALUE;          // 最小正数值
let maxSafe: number = Number.MAX_SAFE_INTEGER; // 安全整数上限

console.log(max, min, maxSafe);

二、boolean 类型

1，基本使用

（1）boolean 布尔类型只有两个取值：true 和 false。常用于条件判断和开关状态：
// boolean 类型基本使用
let isDone: boolean = true;
let hasError: boolean = false;

console.log(isDone, hasError);  // 输出: true false

（2）布尔值通常由比较运算符或逻辑运算符产生：
// 通过比较运算产生布尔值
let flag: boolean = 20 > 30;  // false
let isActive: boolean = true;

// 通过逻辑运算产生布尔值
let isDone: boolean = true;
let hasError: boolean = false; 
let result: boolean = isDone && !hasError;  // true

console.log(flag, result);

2，注意事项

需要注意的是，Boolean（大写）和 boolean（小写）是不同的：
  • boolean 是 TypeScript 中的原始类型，而 Boolean 是 JavaScript 的构造函数。
  • 在 TypeScript 中应该始终使用小写的原始类型（boolean、number、string 等）。
// 正确写法：使用小写的 boolean
let flag1: boolean = true;

// 错误写法：使用大写的 Boolean
let flag2: Boolean = new Boolean(true);  // 不推荐

三、string 类型

1，基本使用

string 字符串类型，可以使用单引号或双引号表示：
提示：如果 VS Code 安装了 TSLint 或 ESLint 插件，默认情况下推荐使用双引号。实际项目中应保持统一的代码风格。
// string 类型基本使用
let message1: string = "Hello World";    // 双引号
let message2: string = 'Hello TypeScript'; // 单引号

console.log(message1, message2);

2，模板字符串

（1）字符串类型也支持 ES6 的模板字符串，使用反引号（`）包裹，可以嵌入变量和表达式：
// 模板字符串
const name: string = "coder";
const age: number = 18;
const height: number = 1.88;

// 使用模板字符串拼接变量
const info: string = `My name is ${name}, age is ${age}, height is ${height}`;

console.log(info);
// 输出: My name is coder, age is 18, height is 1.88

（2）模板字符串还支持多行文本：
// 多行文本
const multiline: string = `第一行
第二行
第三行`;

console.log(multiline);

（3）在模板字符串中也可以使用表达式：
// 在模板字符串中使用表达式
const a: number = 10;
const b: number = 20;

const result: string = `${a} + ${b} = ${a + b}`;
console.log(result);  // 输出: 10 + 20 = 30

四、array 类型

1，定义数组

（1）在 TypeScript 中，数组类型的定义有两种方式。第一种方式是使用方括号 类型[]：
const names: string[] = ["abc", "cba", "nba"];
const numbers: number[] = [1, 2, 3, 4, 5];

console.log(names, numbers);

（2）第二种方式是使用 Array<类型> 泛型语法：
注意：不推荐使用第二种方式（Array<类型>），因为它会与 React、JSX 语法产生冲突。建议使用方括号方式定义数组。
const names2: Array<string> = ["abc", "cba", "nba"];
const numbers2: Array<number> = [1, 2, 3, 4, 5];
 
console.log(names2, numbers2);

2，数组操作

（1）定义了特定类型的数组后，只能向数组中添加该类型的数据：
const names: string[] = ["abc", "cba"];

// 正确：添加字符串
names.push("hangge");

// 错误：添加其他类型会报错
// names.push(123);  // Argument of type 'number' is not assignable to parameter of type 'string'.

（2）数组的其他操作：
const numbers: number[] = [1, 2, 3, 4, 5];

// 获取数组长度
console.log(numbers.length);  // 5

// 访问数组元素
console.log(numbers[0]);      // 1

// 遍历数组
numbers.forEach(num => console.log(num));

// 数组方法
const doubled: number[] = numbers.map(n => n * 2);
console.log(doubled);  // [2, 4, 6, 8, 10]

五、object 类型

1，基本使用

（1）object 类型用于表示非原始类型，即除 number、string、boolean、bigint、symbol、null、undefined 之外的类型。但在实际开发中，我们通常让 TypeScript 自动推导对象类型：
// 不推荐：使用 object 类型
const info: object = {
  name: "hangge",
  age: 88
};

// 错误：无法访问具体属性
// console.log(info.name);  // Property 'name' does not exist on type 'object'.

（2）推荐的做法是让 TypeScript 自动推导对象类型，或者使用更精确的类型定义：
提示：使用类型推导可以让 TypeScript 自动推断出对象的具体类型，从而获得完整的类型提示和检查。
// 推荐：让 TypeScript 自动推导
const person = {
  name: "hangge",
  age: 88
};

// 可以正常访问属性
console.log(person.name);  // hangge
console.log(person.age);   // 88

2，明确的类型定义

如果需要明确定义对象的类型，可以使用类型别名或接口：
提示：关于对象类型的详细用法，将在后续文章中详细介绍。
// 使用类型别名
type Person = {
  name: string;
  age: number;
};
 
const person: Person = {
  name: "hangge",
  age: 88
};
 
console.log(person.name);  // hangge

六、null 和 undefined 类型

1，基本使用

（1）在 JavaScript 中，null 和 undefined 是两个基本数据类型。在 TypeScript 中，它们既是实际的值，也是自己的类型：
let n1: null = null;
let n2: undefined = undefined;

console.log(n1, n2);  // null undefined

（2）如果没有显式指定类型，TypeScript 会将初始值为 null 或 undefined 的变量推导为 any 类型：
// 自动推导为 any 类型
let n3 = null;        // 类型为 any
let n4 = undefined;   // 类型为 any

console.log(n3, n4);

2，区别与用途

（1）undefined 表示值缺失，当变量声明但未赋值时，其值默认为 undefined：
let name: string;
console.log(name);  // undefined（如果 strict 模式开启会报错）

（2）null 表示对象缺失，常用于显式地表示空值：
提示：在严格模式下，null 和 undefined 只能赋值给它们各自的类型或 any/unknown 类型。这有助于避免常见的空值引用错误。
// null 表示空值
let element: HTMLElement | null = document.getElementById("app");

if (element !== null) {
  // 确保元素存在后再操作
  element.innerHTML = "Hello";
}

七、symbol 类型

1，基本使用

（1）symbol 是 ES6 新增的原始数据类型，表示独一无二的值。通过 Symbol() 函数创建：
// 创建 symbol
const s1: symbol = Symbol("identity");
const s2: symbol = Symbol("identity");

// 每个 Symbol 都是唯一的
console.log(s1 === s2);  // false

（2）Symbol 函数可以接受一个字符串作为描述，但这个描述仅用于调试，不影响 Symbol 的唯一性：
// Symbol 的描述
const sym = Symbol("mySymbol");
console.log(sym.description);  // mySymbol
console.log(sym.toString());   // Symbol(mySymbol)

2，作为对象属性

（1）Symbol 的主要用途是作为对象属性的键，避免属性名冲突：
// 使用 Symbol 作为属性键
const s1 = Symbol("identity");
const s2 = Symbol("identity");

const person = {
  [s1]: "程序员",
  [s2]: "老师"
};

console.log(person);  // { [Symbol(identity)]: '程序员', [Symbol(identity)]: '老师' }

（2）由于每个 Symbol 值都是独一无二的，所以可以定义相同描述的属性而不会冲突：
提示：Symbol 属性不会出现在 for...in、Object.keys() 等常规遍历中，因此常用于定义对象的私有属性。
// 访问 Symbol 属性
const identity = Symbol("identity");

const user = {
  name: "hangge",
  [identity]: "123456"  // 用 Symbol 作为私有属性
};

console.log(user[identity]);  // 123456

附、JavaScript 数据类型速查表

类型 说明 示例
number 数字类型（整数和浮点数） let n: number = 100;
boolean 布尔类型（true/false） let b: boolean = true;
string 字符串类型 let s: string = "hello";
array 数组类型 let arr: number[] = [1，2，3];
object 对象类型 let obj = { name: "hangge" };
null 空值类型 let n: null = null;
undefined 未定义类型 let u: undefined = undefined;
symbol 唯一值类型 let s: symbol = Symbol();
评论

全部评论（0）

回到顶部