TypeScript 变量声明-平芜编程栈

TypeScript 变量声明详解

TypeScript 的变量声明方式与现代 JavaScript（ES6+）完全一致，主要使用let、const和var（不推荐）。区别在于 TypeScript 增加了静态类型注解，可以在声明时指定变量的类型，从而在编译阶段捕获错误。

1. 基本声明关键字

关键字	作用域	是否可重新赋值	是否可重新声明	推荐场景
`const`	块级作用域	不可	不可	常量、不会改变的值
`let`	块级作用域	可	不可	需要重新赋值的变量
`var`	函数作用域（或全局）	可	可	不推荐（易导致 bug）

2. 声明语法与类型注解

基本格式：

// 无类型注解（依靠类型推断）letvariableName=value;// 带类型注解letvariableName:type=value;// const 同理constconstantName:type=value;

示例对比

// 1. const（推荐用于不变值）constPI:number=3.14159;// 显式类型注解constusername="Alice";// 类型推断为 string（推荐，简洁）// username = "Bob"; // 错误：const 不可重新赋值// 2. let（用于可变变量）letage:number=25;// 显式注解age=26;// OKletscore=100;// 类型推断为 numberscore=200;// OK// score = "high"; // 错误：类型不匹配// 3. var（不推荐）varoldStyle="legacy";// oldStyle = 123; // JS 中允许，但 TS 会根据首次赋值推断类型

3. 类型注解的位置与类型推断

推荐优先使用类型推断：大多数情况下无需显式写类型，TS 会自动推断。
显式注解的场景：
- 初始化值是null或undefined时。
- 函数参数和返回值。
- 复杂对象、联合类型等。

letname:string;// 声明但未初始化（必须显式类型）name="Alice";letnullable:string|null=null;// 联合类型letdata:any="anything";// 关闭类型检查（慎用）

4. 特殊声明方式

a. 解构赋值（Destructuring）

// 数组解构const[first,second]:[number,number]=[1,2];// 对象解构interfaceUser{name:string;age:number;}const{name,age}:User={name:"Bob",age:30};// 部分解构 + 重命名const{name:userName,age}:{name:string;age:number}={name:"Charlie",age:28};

b. 默认值与可选属性

functiongreet(name:string="Guest"):string{return`Hello${name}`;}greet();// "Hello Guest"greet("Dave");// "Hello Dave"

c. 展开运算符（Spread）

constdefaults={timeout:1000,retries:3};constconfig:typeofdefaults={...defaults,timeout:5000};

5. 作用域示例（let vs var）

if(true){letblockScoped="only here";// 块外不可访问varfunctionScoped="everywhere";}console.log(functionScoped);// OK// console.log(blockScoped); // 错误：未定义

6. 最佳实践建议

优先使用const，需要修改时再改用let。
永远不要使用var（容易造成变量提升和作用域污染）。
大多数情况依靠类型推断，只在必要时添加显式类型。
开启严格模式（strict: true），包括noImplicitAny等。
对于对象和数组，推荐使用接口或类型别名定义结构。

// 推荐：定义接口后声明变量interfacePoint{x:number;y:number;}constorigin:Point={x:0,y:0};letposition:Point={x:10,y:20};

小结：常见声明模式速查

场景	推荐写法
常量字符串/数字	`const NAME = "Alice";`
可变值	`let count = 0;`
明确类型（复杂）	`let ids: number[] = [];`
对象	`const user: { name: string; age: number } = ...`或使用 interface
可能为空	`let element: HTMLElement