首页
/ 正文

TypeScript 变量声明（长文解析）

更新时间: 2025-04-16 21:54:00

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习，欢迎点击围观

在编程的世界里，变量就像是构建程序的“积木块”，它们承载着程序运行的核心数据。而 TypeScript 变量声明 的独特之处，在于通过类型系统为这些“积木块”赋予了明确的规则——就像给积木标注尺寸和形状，确保它们能够精准地拼接在一起。无论是编程新手还是有一定经验的开发者，理解变量声明的规则和技巧，都能显著提升代码的健壮性与可维护性。本文将从基础语法到高级用法，逐步解析 TypeScript 变量声明 的核心概念，并通过实际案例帮助读者掌握其应用场景。

一、基础语法：变量声明的三种方式

在 TypeScript 中，变量声明主要通过 let、const 和 var 关键字实现，但它们的特性存在显著差异。

1.1 `var`：古老的变量声明方式

var 是 JavaScript 原生支持的变量声明方式，但在 TypeScript 中仍可使用。它的主要特性包括：

函数作用域：变量的作用域仅限于定义它的函数内部。
变量提升：变量可以在声明之前被访问（但值为 undefined）。

function example() {  
  console.log(a); // 输出 undefined  
  var a = 10;  
}  
example();

注意：由于 var 的作用域规则容易引发逻辑错误，TypeScript 官方推荐优先使用 let 或 const。

1.2 `let`：现代的块级作用域变量

let 是 ES6 引入的关键字，其作用域遵循块级作用域（即由 {} 包裹的代码块）。这一特性避免了变量污染全局或函数作用域的风险。

if (true) {  
  let message = "Hello TypeScript!";  
  console.log(message); // 输出 "Hello TypeScript!"  
}  
console.log(message); // 报错：message 未定义

1.3 `const`：不可变的变量

const 声明的变量具有不可变性，即一旦赋值后无法重新赋值。它适用于声明常量或需要严格约束的变量。

const PI = 3.1415;  
PI = 3.14; // 报错：无法重新赋值

关键区别：
| 关键字 | 作用域 | 是否可变 | 是否变量提升 |
|--------|--------------|----------|--------------|
| var | 函数作用域 | 可变 | 是 |
| let | 块级作用域 | 可变 | 是 |
| const| 块级作用域 | 不可变 | 是 |

二、类型注解与类型推断：为变量赋予“身份”

TypeScript 的核心特性是静态类型检查，而变量声明中的类型注解和类型推断则是实现这一特性的关键。

2.1 显式类型注解

通过在变量名后添加 : 类型 的语法，可以显式指定变量的类型。例如：

let count: number = 0;  
let name: string = "Alice";  
let isActive: boolean = true;

示例场景：假设我们需要定义一个用户对象：

let user: { name: string; age: number } = {  
  name: "Bob",  
  age: 25,  
};

2.2 类型推断：TypeScript 的“聪明之处”

当未显式指定类型时，TypeScript 会通过类型推断自动推导变量的类型。例如：

let message = "Hello"; // 推断为 string 类型  
message = 123; // 报错：类型 "number" 无法赋值给 "string" 类型

类型推断规则：

初始值存在时，类型由初始值推断。
若无初始值，则变量类型为 any（除非启用 --noImplicitAny 编译选项）。

2.3 联合类型与交叉类型：灵活定义复杂场景

当变量需要兼容多种类型时，可以使用 联合类型（|）或 交叉类型（&）。

联合类型示例

let mixedValue: string | number;  
mixedValue = "TypeScript"; // 合法  
mixedValue = 42; // 合法  
mixedValue = true; // 报错：类型 "boolean" 不符合联合类型

交叉类型示例

interface User {  
  name: string;  
  age: number;  
}  

interface Address {  
  city: string;  
  country: string;  
}  

let userInfo: User & Address = {  
  name: "Eva",  
  age: 30,  
  city: "Paris",  
  country: "France",  
};

三、作用域与生命周期：变量的“生存空间”

变量的作用域决定了其在代码中的可见性和生命周期。

3.1 块级作用域与闭包

块级作用域（如 if、for 块）内的变量仅在该块内有效。而闭包（Closure）允许函数访问其外部作用域的变量，这在函数式编程中极为常见。

function createCounter(): () => number {  
  let count = 0; // 块级作用域变量  
  return function () {  
    return ++count; // 通过闭包访问外部变量  
  };  
}  

const counter = createCounter();  
console.log(counter()); // 1  
console.log(counter()); // 2

3.2 变量提升与暂时性死区

let 和 const 的变量提升存在暂时性死区（Temporal Dead Zone, TDZ）。在变量声明前访问它会导致错误：

console.log(x); // 报错：x 未定义（在 TDZ 中）  
let x = 10;

而 var 没有这一限制，变量提升后初始值为 undefined。

四、高级技巧：类型断言与可选链操作符

掌握进阶语法能显著提升代码的灵活性与安全性。

4.1 类型断言：告诉 TypeScript “你更了解类型”

当 TypeScript 的类型推断不满足需求时，可通过类型断言（as 类型）覆盖推断结果：

const element = document.getElementById("myButton") as HTMLButtonElement;  
element.disabled = true; // 直接操作按钮属性

4.2 可选链操作符（Optional Chaining）

通过 ?. 操作符，可以安全访问可能存在 null 或 undefined 的对象属性：

interface User {  
  name: string;  
  address?: { city: string }; // 可选属性  
}  

const user: User = { name: "John" };  
const city = user.address?.city; // city 的值为 undefined，而非报错

五、实践案例：从 JavaScript 迁移到 TypeScript

假设我们有一个 JavaScript 函数，需要迁移到 TypeScript 并加强类型约束：

原始 JavaScript 代码：

function calculateTotal(price, quantity, discount = 0) {  
  return price * quantity * (1 - discount);  
}

TypeScript 版本：

function calculateTotal(  
  price: number,  
  quantity: number,  
  discount?: number // 可选参数，默认值设为 0  
): number {  
  return price * quantity * (1 - (discount ?? 0)); // 使用空值合并操作符  
}

改进点：

显式声明参数类型，避免传入非数字值。
使用可选参数 discount 并指定默认值逻辑。
返回值类型明确为 number，便于后续调用。

结论

TypeScript 变量声明 是构建类型安全代码的基石。从基础的语法差异到高级的类型推断和操作符，每一步都体现了 TypeScript 对代码健壮性的追求。通过本文的讲解，读者应能掌握如何通过变量声明减少运行时错误，并利用 TypeScript 的特性提升开发效率。

无论是初学者还是中级开发者，建议在实际项目中逐步实践这些概念，例如：

将现有 JavaScript 代码逐步迁移为 TypeScript，观察类型系统的反馈。
在复杂项目中使用联合类型和交叉类型，管理对象的动态属性。
利用类型断言和可选链操作符，安全地处理可能存在的空值或未定义值。

记住，TypeScript 的类型系统不是束缚，而是帮助开发者构建更可靠程序的“导航仪”。通过持续学习和实践，你将能更自信地驾驭这一工具，写出优雅且无懈可击的代码。

TypeScript 变量声明（长文解析）

一、基础语法：变量声明的三种方式

1.1 `var`：古老的变量声明方式

1.2 `let`：现代的块级作用域变量

1.3 `const`：不可变的变量

二、类型注解与类型推断：为变量赋予“身份”

2.1 显式类型注解

2.2 类型推断：TypeScript 的“聪明之处”

2.3 联合类型与交叉类型：灵活定义复杂场景

联合类型示例

交叉类型示例

三、作用域与生命周期：变量的“生存空间”

3.1 块级作用域与闭包

3.2 变量提升与暂时性死区

四、高级技巧：类型断言与可选链操作符

4.1 类型断言：告诉 TypeScript “你更了解类型”

4.2 可选链操作符（Optional Chaining）

五、实践案例：从 JavaScript 迁移到 TypeScript

结论

最新发布

jQuery.each()方法（长文解析）

jQuery.extend()方法（长文解析）

jQuery.fn.extend()方法（千字长文）

jQuery.globalEval()方法（长文讲解）

jQuery.grep() 方法（长文讲解）

jQuery.inArray() 方法（长文讲解）

jQuery.isArray() 方法（手把手讲解）

jQuery.isEmptyObject() 方法（千字长文）

jQuery.isFunction() 方法（建议收藏）

jQuery.isNumeric() 方法（手把手讲解）

TypeScript 变量声明（长文解析）

一、基础语法：变量声明的三种方式

1.1 var：古老的变量声明方式

1.2 let：现代的块级作用域变量

1.3 const：不可变的变量

二、类型注解与类型推断：为变量赋予“身份”

2.1 显式类型注解

2.2 类型推断：TypeScript 的“聪明之处”

2.3 联合类型与交叉类型：灵活定义复杂场景

联合类型示例

交叉类型示例

三、作用域与生命周期：变量的“生存空间”

3.1 块级作用域与闭包

3.2 变量提升与暂时性死区

四、高级技巧：类型断言与可选链操作符

4.1 类型断言：告诉 TypeScript “你更了解类型”

4.2 可选链操作符（Optional Chaining）

五、实践案例：从 JavaScript 迁移到 TypeScript

结论

最新发布

jQuery.each()方法（长文解析）

jQuery.extend()方法（长文解析）

jQuery.fn.extend()方法（千字长文）

jQuery.globalEval()方法（长文讲解）

jQuery.grep() 方法（长文讲解）

jQuery.inArray() 方法（长文讲解）

jQuery.isArray() 方法（手把手讲解）

jQuery.isEmptyObject() 方法（千字长文）

jQuery.isFunction() 方法（建议收藏）

jQuery.isNumeric() 方法（手把手讲解）

1.1 `var`：古老的变量声明方式

1.2 `let`：现代的块级作用域变量

1.3 `const`：不可变的变量