第 2 章 TypeScript基础 -TypeScript和Vue从入门到精通(一)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(一)

### 第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编译器理解代码意图，进行类型检查。例如：

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

**2.3.2 类型推断**

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

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

#### 2.4 接口与类型别名

**2.4.1 接口（Interface）**

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

```typescript
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）**

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

```typescript
type Name = string;
type PartialPerson = {
    name?: string;
    age?: number;
};

let name: Name = 'Bob';
let personInfo: PartialPerson = { age: 25 };
```

#### 2.5 函数

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

**2.5.1 函数参数与返回类型**

```typescript
function add(a: number, b: number): number {
    return a + b;
}

const subtract = (a: number, b: number): number => a - b;
```

**2.5.2 可选参数与默认参数**

```typescript
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 剩余参数**

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

#### 2.6 类与继承

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

**2.6.1 类的基本结构**

```typescript
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 泛型函数**

```typescript
function identity<T>(arg: T): T {
    return arg;
}

const output = identity<string>("myString"); // 显式指定类型
const numOutput = identity(42); // TypeScript会自动推断出类型为number
```

**2.7.2 泛型接口**

```typescript
interface GenericIdentityFn<T> {
    (arg: T): T;
}

let myIdentity: GenericIdentityFn<number> = (x) => x;
```

**2.7.3 泛型类**

```typescript
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

该分类下的相关小册推荐：

Vue.js从入门到精通(三)

TypeScript和Vue从入门到精通(三)

Vue源码完全解析

移动端开发指南

Vue原理与源码解析

Vue.js从入门到精通(四)

Vue.js从入门到精通(二)

TypeScript和Vue从入门到精通(二)

Vue.js从入门到精通(一)

VUE组件基础与实战

TypeScript和Vue从入门到精通(四)

TypeScript和Vue从入门到精通(五)