Typescript - 2.变量声明

114 阅读3分钟

在 TypeScript 中,变量声明与 JavaScript 类似,但 TypeScript 提供了额外的类型注解和一些新的特性来增强代码的可读性和安全性。以下是 TypeScript 中常见的变量声明方式及其用法:

1. let 声明

let 是最常用的变量声明方式,它具有块级作用域,这意味着它只能在声明的块(例如函数、循环或条件语句)内部访问。

let name: string = "John";
let age: number = 25;

if (true) {
    let blockScopedVariable: string = "I'm only accessible within this block";
    console.log(blockScopedVariable);  // 输出: I'm only accessible within this block
}
// console.log(blockScopedVariable);  // Error: blockScopedVariable 在此处不可访问

2. const 声明

const 声明用于声明不可变的变量,或者说常量。它也具有块级作用域。一旦使用 const 声明变量,就不能再重新赋值。

const pi: number = 3.14;
const greeting: string = "Hello, World!";

// pi = 3.14159;  // Error: 不能对常量重新赋值

请注意,虽然 const 定义的变量引用不能更改,但如果变量是对象或数组,其内容是可以改变的。

const arr: number[] = [1, 2, 3];
arr.push(4);  // 这是合法的操作
console.log(arr);  // 输出: [1, 2, 3, 4]

// arr = [5, 6, 7];  // Error: 不能对常量重新赋值

3. var 声明

var 声明具有函数作用域或全局作用域,而不是块级作用域。这可能会导致一些意外的行为,尤其是在循环和条件语句中,因此不推荐使用 var

function varTest() {
    var x: number = 1;
    if (true) {
        var x: number = 2;  // 同样的变量x被重新声明并赋值
        console.log(x);  // 输出: 2
    }
    console.log(x);  // 输出: 2 (不是预期的1)
}

varTest();

4. 类型注解

TypeScript 允许在变量声明时添加类型注解,以明确指定变量的类型。这有助于提高代码的可读性和可维护性,并在编译时提供类型检查。

let isDone: boolean = false;
let total: number = 100;
let name: string = "Alice";
let list: number[] = [1, 2, 3];
let person: [string, number] = ["Alice", 25];

5. 类型推断

TypeScript 具有类型推断功能,如果在声明变量时没有显式地指定类型,TypeScript 会根据变量的初始值自动推断出类型。

let inferredString = "This is a string";  // 类型被推断为 string
// inferredString = 42;  // Error: 不能将 number 类型赋给 string 类型

6. 解构

TypeScript 支持从数组和对象中解构出变量,可以简化变量的声明和赋值。

数组解构

let input: number[] = [1, 2];
let [first, second]: [number, number] = input;
console.log(first);  // 输出: 1
console.log(second);  // 输出: 2

对象解构

let user = { name: "Alice", age: 25 };
let { name, age }: { name: string; age: number } = user;
console.log(name);  // 输出: Alice
console.log(age);  // 输出: 25

7. 默认值

在解构时,可以为变量提供默认值。

let [x = 3, y = 4]: [number, number] = [1];
console.log(x);  // 输出: 1
console.log(y);  // 输出: 4

8. 展开运算符

使用展开运算符可以方便地创建新数组或对象。

let arr1: number[] = [1, 2, 3];
let arr2: number[] = [...arr1, 4, 5];
console.log(arr2);  // 输出: [1, 2, 3, 4, 5]

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 };
console.log(obj2);  // 输出: { a: 1, b: 2, c: 3 }

通过这些变量声明和类型注解,TypeScript 提供了一种更安全、更清晰的方式来书写 JavaScript 代码,从而减少潜在的错误,提高代码的可维护性。