第2章 TypeScript基础

引言

在踏入TypeScript与Vue结合开发的广阔天地之前，掌握TypeScript的基础知识是不可或缺的。TypeScript作为JavaScript的一个超集，为JavaScript开发带来了类型系统、编译时类型检查和丰富的语言特性，极大地提升了代码的可维护性和可扩展性。本章将带你深入了解TypeScript的基本概念、语法特性、类型系统以及如何在你的项目中开始使用TypeScript。

2.1 TypeScript简介

2.1.1 TypeScript的诞生与优势

TypeScript由Microsoft开发，并于2012年首次发布。它的主要目标是为JavaScript代码提供类型系统和编译时检查，同时保持与ECMAScript标准的兼容性，确保能够无缝转换为纯JavaScript代码，在任何浏览器或JavaScript环境中运行。TypeScript的优势在于：

• 增强代码的可读性和可维护性：通过显式的类型定义，开发者和工具可以更清晰地理解代码意图。
• 早期发现和修复错误：类型检查能在编译阶段发现潜在的错误，减少运行时错误。
• 支持大型项目：通过模块、命名空间、接口等特性，TypeScript能很好地支持大型项目的组织和管理。
• 社区和工具支持：随着TypeScript的流行，越来越多的库、框架和IDE提供了对TypeScript的内置支持或插件。

2.1.2 TypeScript与JavaScript的关系

TypeScript是JavaScript的超集，这意味着任何有效的JavaScript代码都是合法的TypeScript代码。TypeScript通过添加类型注解和其他特性来扩展JavaScript的功能，但这些特性在编译成JavaScript时会被移除或转换为JavaScript代码。

2.2 基本类型

在TypeScript中，一切皆类型。基本类型包括：

• 布尔值（Boolean）：true 或 false。
• 数字（Number）：所有JavaScript中的数字类型，包括整数和浮点数。
• 字符串（String）：文本数据，使用单引号（'）、双引号（"）或模板字符串（反引号``）表示。
• 数组（Array）：元素类型相同的序列，可以通过类型注解指定数组中元素的类型，如let numbers: number[] = [1, 2, 3];。
• 元组（Tuple）：已知元素数量和类型的数组，各元素的类型不必相同，如let pair: [string, number] = ['hello', 10];。
• 枚举（Enum）：为数值设置易于理解和记忆的名称，如enum Color { Red, Green, Blue }。
• 空值（Void）：表示没有任何类型值的类型，通常用于没有返回值的函数。
• Null 和 Undefined：null 和 undefined 是JavaScript中的两个特殊值，TypeScript将它们视为类型。
• Never：表示那些永不存在的值的类型，常用于函数抛出异常或永远不返回结果时。
• Any：表示任意类型，在TypeScript中，当你不知道某个值的类型时，可以使用any类型，但这会丧失TypeScript带来的类型检查优势。
• Unknown：一个顶级类型，表示任何类型的值。与any不同，unknown类型的值在使用前必须进行类型断言或检查，增加了类型安全性。

2.3 类型注解与推断

2.3.1 类型注解

类型注解是TypeScript中显式指定变量或函数参数等类型的语法。它不会改变代码的运行时行为，但会帮助TypeScript编译器理解代码意图，进行类型检查。例如：

let isDone: boolean = false;
function greet(name: string): void {
    console.log(`Hello, ${name}!`);
}

2.3.2 类型推断

TypeScript具有强大的类型推断能力，能够在很多情况下自动推断出变量的类型，无需手动添加类型注解。例如：

let age = 30; // TypeScript推断出age是number类型
function sum(a, b) {
    return a + b;
}
// 如果没有类型注解，TypeScript会基于调用时传入的参数类型来推断sum函数的参数类型

2.4 接口与类型别名

2.4.1 接口（Interface）

接口是一种结构类型，它定义了一组属性（包括可选属性和只读属性）和方法的形状。接口主要用于描述对象的结构，确保对象遵循特定的形状。

interface Person {
    name: string;
    age?: number; // 可选属性
    readonly id: number; // 只读属性
    greet(): void; // 方法
}
let person: Person = {
    name: 'Alice',
    id: 1,
    greet() {
        console.log(`Hello, my name is ${this.name}.`);
    }
};

2.4.2 类型别名（Type Aliases）

类型别名用于给类型起一个新的名字，主要用于复杂的类型或联合类型，提高代码的可读性。

type Name = string;
type PartialPerson = {
    name?: string;
    age?: number;
};
let name: Name = 'Bob';
let personInfo: PartialPerson = { age: 25 };

2.5 函数

在TypeScript中，函数是一等公民，支持类型注解和类型推断。函数可以拥有参数、返回值，并且可以使用箭头函数或函数声明语法。

2.5.1 函数参数与返回类型

function add(a: number, b: number): number {
    return a + b;
}
const subtract = (a: number, b: number): number => a - b;

2.5.2 可选参数与默认参数

function greet(name: string, greeting?: string): void {
    console.log(greeting ? `${greeting}, ${name}!` : `Hello, ${name}!`);
}
function greetWithDefault(name: string, greeting = 'Hello'): void {
    console.log(`${greeting}, ${name}!`);
}

2.5.3 剩余参数

function sum(...numbers: number[]): number {
    return numbers.reduce((acc, curr) => acc + curr, 0);
}

2.6 类与继承

TypeScript支持ES6中的类（Class）和继承特性，并添加了类型注解的支持，使得面向对象编程在TypeScript中更加安全和灵活。

2.6.1 类的基本结构

class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}
class Dog extends Animal {
    bark() {
        console.log(`${this.name} says Woof!`);
    }
}
const dog = new Dog('Buddy');
dog.bark();
dog.move(5);

2.6.2 访问修饰符

TypeScript支持三种访问修饰符：public（公开的）、private（私有的）和protected（受保护的）。

• public：成员在类的任何地方都可以被访问。
• private：成员只能在类内部被访问，不能通过类的实例访问。
• protected：成员在类内部和子类中可以被访问，但不能通过类的实例访问。

2.7 泛型

泛型（Generics）是TypeScript中一个强大的特性，它允许你定义函数、接口或类时，不预先指定具体的类型，而是在使用时才指定类型。这使得你的代码更加灵活和可重用。

2.7.1 泛型函数

function identity<T>(arg: T): T {
    return arg;
}
const output = identity<string>("myString"); // 显式指定类型
const numOutput = identity(42); // TypeScript会自动推断出类型为number

2.7.2 泛型接口

interface GenericIdentityFn<T> {
    (arg: T): T;
}
let myIdentity: GenericIdentityFn<number> = (x) => x;

2.7.3 泛型类

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
    constructor(zero: T, add: (x: T, y: T) => T) {
        this.zeroValue = zero;
        this.add = add;
    }
}
let myGenericNumber = new GenericNumber<number>(0, (x, y) => x + y);

结语

至此，你已对TypeScript的基础有了全面的了解，包括其基本概念、基本类型、类型注解与推断、接口与类型别名、函数、类与继承以及泛型等核心特性。这些基础知识将为你后续深入学习TypeScript与Vue的结合打下坚实的基础。在下一章中，我们将开始探索如何在Vue项目中使用TypeScript，包括Vue组件的TypeScript化、Vue