TypeScript 类型声明_js声明类型-CSDN博客

本文链接：https://blog.csdn.net/panpanpan233/article/details/148685893

JavaScript 数据类型与 TypeScript 类型声明

在 Web 开发领域，JavaScript 凭借其灵活性和易用性成为构建动态网页的首选语言。然而，随着项目规模不断扩大，JavaScript 动态类型特性带来的类型不确定性逐渐成为开发效率的瓶颈。TypeScript 的出现完美地解决了这一痛点，它通过静态类型系统和类型声明机制，为 JavaScript 赋予了更强大的类型管理能力。本文将深入探讨 JavaScript 的数据类型体系，并展示 TypeScript 如何通过类型声明构建更健壮的代码基础。

一、JavaScript 动态类型体系解析

JavaScript 采用弱类型、动态类型的特性，变量类型在运行时确定，这种灵活性在小型项目中能提升开发速度，但在复杂场景中可能引发难以追踪的错误。其数据类型可分为两大阵营：

1. 原始类型（Primitive Types）

String：表示文本数据，使用单引号、双引号或反引号包裹。现代 JavaScript 支持 Unicode 字符，反引号还支持模板字符串特性。
```
let greeting = 'Hello';
let multiLine = `Line 1
Line 2`;
```
Number：采用 IEEE 754 标准表示整数和浮点数，包含特殊值 Infinity 和 NaN。ES6 新增 BigInt 类型处理大整数。
```
let count = 42;
let pi = 3.14159;
let bigNumber = 9007199254740991n;
```
Boolean：逻辑值，仅有 true 和 false 两个值，常用于条件判断。
```
let isReady = true;
if (isReady) { /* ... */ }
```
Symbol：ES6 新增原始类型，生成全局唯一的值，常用于对象属性键防止命名冲突。
```
const uniqueKey = Symbol('desc');
```
Null & Undefined：表示空值，null 是显式赋值表示"无值"，undefined 是未初始化变量的默认值。
```
let emptyVar = null;
let uninitialized; // undefined
```

2. 引用类型（Reference Types）

Object：所有对象的基类，包含普通对象、数组、函数、日期等复杂数据结构。
```
const person = { name: 'Alice', age: 30 };
const numbers = [1, 2, 3];
```

二、TypeScript 类型声明：静态类型革命

TypeScript 作为 JavaScript 的超集，通过类型注解系统将动态语言转化为静态类型语言，在编译阶段而非运行时捕获类型错误。

1. 基础类型声明

显式类型注解：使用 : 语法定义变量类型。

let message: string = 'TypeScript';
let isActive: boolean = true;

类型推断：编译器自动推导类型，简化代码。
```
let num = 10; // 推断为 number 类型
```

2. 复合类型系统

联合类型（Union Types）：允许变量有多种可能类型。
```
let id: string | number = 'TS-1001';
```

交叉类型（Intersection Types）：合并多个类型定义。

type Admin = { role: 'admin' };
type User = { name: string } & Admin;

泛型（Generics）：创建可重用的类型组件。

function identity<T>(arg: T): T {
  return arg;
}

3. 高级类型工具

接口（Interfaces）：定义对象结构契约。

interface User {
  id: number;
  name: string;
  isActive?: boolean; // 可选属性
}

类型别名（Type Aliases）：为类型创建新名称。
```
type Point = {
  x: number;
  y: number;
};
```

字面量类型：限制变量只能取特定值。

type Direction = 'left' | 'right' | 'top' | 'bottom';

三、类型安全实践对比

场景	JavaScript 动态类型	TypeScript 静态类型
函数参数验证	运行时检查，易遗漏	编译时检查，确保类型正确性
对象属性访问	潜在运行时错误	智能提示和类型保护
API 接口定义	依赖文档说明	通过类型声明自动生成文档
代码重构	需全面测试	编译器辅助捕获类型相关变更