TypeScript 变量

这一章讲 TS 里怎么声明变量。如果你已经会 JS 的 let/const,那 TS 这部分你基本就会了——它只是在声明时多了一个可选的类型标注。重点是搞清楚:什么时候必须显式写类型,什么时候该让 TS 自动推断。

1. let / const / var

TS 声明变量的方式和 JS 完全一样,三种关键字:let(可重新赋值)、const(不可重新赋值)、var(已不推荐)。唯一区别是后面可以跟类型注解:

// TS 里声明变量和 JS 完全一样:let / const / var
// (var 已经不推荐,这里只讲 let 和 const)

let age: number = 20;          // let:可重新赋值
age = 21;

const name: string = "小明";   // const:不可重新赋值
// name = "小红";              // ❌ 报错:无法分配到 "name",因为是常量

// var:函数作用域,有变量提升,几乎不再使用
var old = 1;

2. 类型注解的写法

类型注解的语法是变量名 + 冒号 + 类型

类型可以是 TS 内置的基础类型(stringnumberboolean),也可以是数组(number[])、自定义的接口、联合类型等。下一篇会专门讲基础类型。

3. 类型推断:能不写就不写

这是 TS 最贴心的特性之一。当你用初始值声明变量时,TS 会自动推断它的类型,你不需要手写:

// 类型推断:不写类型时,TS 会根据初始值自动推断
let city = "北京";        // 推断为 string
let pi = 3.14;            // 推断为 number
let tags = ["ts", "js"];  // 推断为 string[]
let active = true;        // 推断为 boolean

// 推断出来后,赋别的类型会报错
city = 123;
// ❌ 不能将类型"number"分配给类型"string"

// 所以:能推断的就别手写,代码更干净
let list: number[] = [1, 2, 3];  // 写了也行,但不必要

初学者常犯的错是到处手写类型,把代码搞得啰嗦。原则是:TS 能推断出来的,就别手写。手写只在必要的时候。

4. 什么时候必须显式写类型?

有三类场景,你必须显式标注类型:

// 什么时候该显式写类型?三类场景:

// 1. 没有初始值时——TS 推断不出来
let count: number;
count = 5;

// 2. 函数参数——必须写(没有初始值)
function add(a: number, b: number): number {
  return a + b;
}

// 3. 复杂对象/联合类型——推断结果可能不是你想要的
let data: string | number = "ok";
data = 42;

总结一下:有初始值的简单变量靠推断,没初始值的、函数参数、复杂类型靠手写。这是写 TS 代码的总原则。

5. 解构变量

解构是 ES6 的特性,TS 完全支持,也可以标类型。但实际开发里,更常见的是先定义一个 interface,再用它约束变量,最后解构:

// 解构也可以标类型,但要注意写法
const user: { name: string; age: number } = { name: "小明", age: 20 };

// 解构出来的变量各自标类型
const { name, age }: { name: string; age: number } = user;

// 数组解构同理
const [first, second]: number[] = [10, 20];

// 实际开发里,更多是先有 interface,再解构
interface User { name: string; age: number; }
const u: User = { name: "小明", age: 20 };
const { name: n, age: a } = u;   // 解构并重命名

6. let vs const:怎么选?

这条规则和 JS 一样:默认用 const,只有需要重新赋值时才改用 let。这能避免变量被意外修改,代码意图也更清晰。TS 里有个额外好处——const 声明的字面量会被推断成更精确的字面量类型

这种"更精确的类型"在写常量配置、状态机时特别有用。

7. 变量的作用域

TS 的作用域规则和 JS 完全一样:let/const块级作用域(只在最近的花括号内有效),var 是函数作用域。没有特别需要讲的——这部分请参考 JS 系列的作用域与闭包

小结

TS 的变量声明 = JS 的变量声明 + 可选的类型注解。掌握两个要点就够了:类型注解的写法(冒号 + 类型),类型推断的原则(能推断就别写)。下一篇我们系统讲 TS 的基础类型——string、number、boolean、数组、元组等。

← 上一篇 TypeScript 基础语法

下一篇 TypeScript 基础类型

✈️💬