MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

TypeScript基本语法之变量声明与数据类型

2024-01-151.7k 阅读

变量声明

在TypeScript中，变量声明是开始编程的基础步骤。与JavaScript类似，TypeScript支持使用var、let和const关键字来声明变量。然而，TypeScript在变量声明上增加了类型注解，这使得代码更加健壮和易于维护。

var关键字

var是JavaScript早期用于声明变量的关键字，在TypeScript中仍然可用。使用var声明的变量存在函数作用域，并且有变量提升的特性。

function varExample() {
    console.log(x); // 输出: undefined
    var x = 10;
    console.log(x); // 输出: 10
}
varExample();

在上述代码中，var x虽然在console.log(x)之后声明，但由于变量提升，它在函数顶部就已经被声明，只是初始值为undefined。

let关键字

let是ES6引入的声明变量的关键字，在TypeScript中被广泛使用。let声明的变量具有块级作用域，这意味着它只在包含它的块（{}）内有效。

function letExample() {
    let y = 20;
    if (true) {
        let y = 30; // 这里的y是一个新的变量，仅在这个块内有效
        console.log(y); // 输出: 30
    }
    console.log(y); // 输出: 20
}
letExample();

在上述代码中，块内的let y声明创建了一个新的变量，与块外的y不同。这避免了在JavaScript中使用var时可能出现的意外变量覆盖问题。

const关键字

const用于声明常量，一旦声明，其值就不能再被修改。const声明的常量也具有块级作用域。

function constExample() {
    const z = 40;
    // z = 50; // 这会导致编译错误，因为常量不能重新赋值
    console.log(z); // 输出: 40
}
constExample();

在上述代码中，尝试对const声明的z重新赋值会导致编译错误，确保了常量值的不可变性。

变量的类型注解

TypeScript的强大之处在于它支持类型注解，通过类型注解，我们可以明确变量的数据类型，从而在编译时捕获类型错误。

基本类型注解

常见的基本数据类型包括number、string、boolean等。我们可以在声明变量时添加类型注解。

let num: number = 10;
let str: string = "Hello, TypeScript";
let isDone: boolean = true;

在上述代码中，num被注解为number类型，str被注解为string类型，isDone被注解为boolean类型。如果我们尝试给这些变量赋与注解类型不匹配的值，TypeScript编译器会报错。

// num = "not a number"; // 这会导致编译错误，因为类型不匹配

联合类型注解

联合类型允许一个变量具有多种类型。我们使用|符号来表示联合类型。

let value: string | number;
value = "a string";
console.log(value); // 输出: a string
value = 123;
console.log(value); // 输出: 123

在上述代码中，value可以是string类型或number类型，根据赋值的不同而确定具体类型。

类型别名

类型别名可以为一个类型定义一个新的名字，使代码更易读和维护。

type MyNumber = number;
let myNum: MyNumber = 50;

这里我们定义了一个类型别名MyNumber，它是number类型的别名。使用MyNumber来声明变量与直接使用number效果相同，但在某些复杂类型场景下，类型别名能提高代码的可读性。

type StringOrNumber = string | number;
let mixedValue: StringOrNumber = "a value";
mixedValue = 456;

接口类型

接口是TypeScript中用于定义对象类型的一种方式。它可以明确对象具有哪些属性以及属性的类型。

interface Person {
    name: string;
    age: number;
}
let person: Person = {
    name: "Alice",
    age: 30
};

在上述代码中，Person接口定义了一个对象应该具有name属性（类型为string）和age属性（类型为number）。如果我们尝试创建一个不符合这个接口的对象，TypeScript编译器会报错。

// let wrongPerson: Person = { name: "Bob" }; // 这会导致编译错误，因为缺少age属性

数组类型

TypeScript提供了几种方式来定义数组类型。

  1. 类型 + 方括号
let numbers: number[] = [1, 2, 3];

这里numbers是一个number类型的数组。

  1. 数组泛型
let strings: Array<string> = ["a", "b", "c"];

Array<string>表示一个字符串类型的数组，这种方式更常用于泛型编程场景。

元组类型

元组是一种特殊的数组，它允许我们定义一个固定长度且每个位置有特定类型的数组。

let user: [string, number] = ["John", 25];

在上述代码中，user是一个元组，第一个元素必须是string类型，第二个元素必须是number类型。如果我们尝试给元组赋不符合类型或长度不匹配的值，会导致编译错误。

// user = [25, "John"]; // 这会导致编译错误，因为类型顺序不匹配
// user = ["John", 25, "extra"]; // 这会导致编译错误，因为长度不匹配

数据类型

TypeScript拥有丰富的数据类型，除了前面提到的基本类型外，还有一些其他重要的数据类型。

any类型

any类型表示可以是任意类型。当我们不确定一个变量的类型，或者希望它可以接受任何类型的值时，可以使用any类型。

let anyValue: any = "a string";
anyValue = 123;
anyValue = true;

虽然any类型提供了很大的灵活性，但过度使用会削弱TypeScript的类型检查优势，因此应谨慎使用。

void类型

void类型表示没有任何类型，通常用于函数返回值类型。当一个函数不返回任何值时，可以将其返回值类型注解为void。

function logMessage(message: string): void {
    console.log(message);
}

在上述代码中，logMessage函数只打印消息，不返回任何值，所以其返回值类型为void。

null和undefined类型

null和undefined在TypeScript中有自己的类型，分别为null和undefined。在严格模式下，它们只能赋值给自身类型或void类型的变量。

let n: null = null;
let u: undefined = undefined;
// let num: number = null; // 这会导致编译错误，在严格模式下null不能赋值给number类型

然而，在非严格模式下，null和undefined可以赋值给任何类型的变量。

never类型

never类型表示永远不会出现的值的类型。通常用于函数抛出异常或永远不会返回的函数。

function throwError(message: string): never {
    throw new Error(message);
}
function infiniteLoop(): never {
    while (true) { }
}

在上述代码中，throwError函数总是抛出异常，不会正常返回，所以返回值类型为never；infiniteLoop函数是一个无限循环，永远不会结束，也返回never类型。

枚举类型

枚举类型是TypeScript中特有的一种数据类型，用于定义一组命名的常量。

  1. 数字枚举
enum Color {
    Red,
    Green,
    Blue
}
let myColor: Color = Color.Green;
console.log(myColor); // 输出: 1

在上述代码中，Color是一个枚举类型，Red默认值为0，Green为1，Blue为2。我们可以通过枚举成员名来访问其对应的值。

  1. 字符串枚举
enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT"
}
let myDirection: Direction = Direction.Right;
console.log(myDirection); // 输出: RIGHT

字符串枚举中，每个成员都必须有一个字符串值，这种枚举类型更适用于表示一组有明确字符串含义的常量。

  1. 异构枚举（不推荐）
enum MixedEnum {
    First = "one",
    Second = 2
}

异构枚举混合了数字和字符串类型，虽然TypeScript支持，但这种方式可能会导致代码可读性和维护性下降，一般不推荐使用。

字面量类型

字面量类型允许我们使用具体的值作为类型。例如，我们可以定义一个变量只能是特定的字符串值。

let status: "success" | "error";
status = "success";
// status = "unknown"; // 这会导致编译错误，因为unknown不在允许的字面量类型中

在上述代码中，status变量只能是"success"或"error"这两个字符串字面量之一。

类型推断

TypeScript具有类型推断机制，这意味着在很多情况下，我们不需要显式地添加类型注解，TypeScript可以根据变量的赋值自动推断出其类型。

let inferredNumber = 10; // TypeScript推断inferredNumber为number类型
let inferredString = "Hello"; // TypeScript推断inferredString为string类型

在函数参数和返回值类型推断方面，TypeScript同样表现出色。

function add(a, b) {
    return a + b;
}
let result = add(5, 3); // TypeScript推断add函数参数为number类型，返回值也为number类型

然而，类型推断也有局限性。在某些复杂场景下，例如函数重载、泛型等，我们可能仍然需要显式地添加类型注解以确保代码的正确性和可读性。

类型兼容性

在TypeScript中，类型兼容性用于判断一个类型是否可以赋值给另一个类型。主要遵循以下规则：

基本类型兼容性

基本类型之间的兼容性比较直接。例如，number类型的变量可以赋值给number类型的变量，但不能赋值给string类型的变量。

let num1: number = 10;
let num2: number = num1;
// let str: string = num1; // 这会导致编译错误，类型不兼容

对象类型兼容性

对于对象类型，TypeScript采用结构类型系统。只要一个对象具有另一个对象类型所需的所有属性，就认为它们是兼容的。

interface A {
    x: number;
}
interface B {
    x: number;
    y: string;
}
let a: A = { x: 10 };
let b: B = a; // 这是允许的，因为a具有b所需的x属性

函数类型兼容性

函数类型兼容性主要考虑参数和返回值类型。参数类型是双向协变的，即目标函数的参数类型可以比源函数的参数类型更宽松；返回值类型是协变的，即目标函数的返回值类型可以比源函数的返回值类型更具体。

let func1: (a: number) => number = (x) => x;
let func2: (a: number | string) => number | string = func1; // 允许，参数类型更宽松，返回值类型更宽松

类型断言

类型断言允许我们手动指定一个值的类型，告诉TypeScript编译器“相信我，这个值就是这个类型”。类型断言有两种语法形式：尖括号语法和as语法。

尖括号语法

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

as语法

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

在TypeScript中，当我们使用JSX时，必须使用as语法进行类型断言，因为尖括号语法会与JSX语法冲突。

类型断言在我们确定某个值的类型，但TypeScript无法自动推断时非常有用。然而，过度使用类型断言可能会掩盖潜在的类型错误，所以应谨慎使用。

小结

变量声明与数据类型是TypeScript编程的基础。通过使用var、let和const关键字进行变量声明，并合理运用类型注解、类型推断、类型兼容性、类型断言等特性，我们可以编写出更加健壮、易于维护的前端代码。理解并熟练掌握这些基本语法，是深入学习TypeScript以及进行复杂前端项目开发的关键一步。在实际项目中，根据具体需求选择合适的变量声明方式和数据类型，充分发挥TypeScript的类型系统优势，将有助于提高代码质量和开发效率。

在后续的学习中，我们还将深入探讨TypeScript的函数、类、模块等高级特性，进一步提升我们在前端开发中的能力。通过不断地实践和学习，我们能够更好地利用TypeScript构建大型、可靠的前端应用程序。希望本文对您理解TypeScript的变量声明与数据类型有所帮助，祝您在TypeScript的学习和开发之路上取得成功。