TypeScript 学习笔记（一）：基础概述与类型系统

1. 引言

TypeScript 是由微软开发的一种开源编程语言，旨在扩展 JavaScript 的功能。它增加了静态类型定义，从而提升代码的可读性、可维护性和开发效率。本系列学习笔记将带你从基础到高级逐步掌握 TypeScript 的核心概念和应用。

2. TypeScript 的安装与配置

2.1 安装 TypeScript

要开始使用 TypeScript，首先需要安装它。你可以通过 npm（Node Package Manager）来安装 TypeScript：

复制代码

npm install -g typescript

安装完成后，可以通过 tsc 命令检查是否安装成功：

复制代码

tsc --version

2.2 创建 TypeScript 项目

我们可以通过以下步骤创建一个简单的 TypeScript 项目：

创建一个项目文件夹：
复制代码
```
mkdir typescript-demo
cd typescript-demo
```
初始化一个新的 package.json 文件：
复制代码
```
npm init -y
```
安装 TypeScript 和 ts-node：
复制代码
```
npm install typescript ts-node --save-dev
```

创建一个 tsconfig.json 文件用于配置 TypeScript 编译选项：

复制代码

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

在项目根目录创建 src 文件夹，并在其中创建第一个 TypeScript 文件 index.ts。

3. TypeScript 基础

3.1 类型注解

TypeScript 的核心是类型系统。通过类型注解，我们可以在代码中明确地指定变量、函数参数和返回值的类型。

复制代码

// 变量类型注解
let isDone: boolean = true;
let decimal: number = 6;
let color: string = "blue";

// 数组类型注解
let list: number[] = [1, 2, 3];
let listGeneric: Array<number> = [1, 2, 3];

// 元组类型注解
let x: [string, number];
x = ["hello", 10];

// 枚举类型
enum Color {Red, Green, Blue}
let c: Color = Color.Green;

// 任意类型
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

// 空值类型
let unusable: void = undefined;

3.2 接口

接口用于定义对象的类型。它可以用来描述对象的结构，例如属性和方法。

复制代码

interface Person {
    firstName: string;
    lastName: string;
    age?: number; // 可选属性
}

function greet(person: Person) {
    return `Hello, ${person.firstName} ${person.lastName}`;
}

let user = { firstName: "John", lastName: "Doe" };
console.log(greet(user));

3.3 类

TypeScript 提供了对类的支持，包括继承、封装和多态性。

复制代码

class Animal {
    private name: string;

    constructor(name: string) {
        this.name = name;
    }

    move(distance: number = 0) {
        console.log(`${this.name} moved ${distance}m.`);
    }
}

class Dog extends Animal {
    bark() {
        console.log('Woof! Woof!');
    }
}

let dog = new Dog("Buddy");
dog.bark();
dog.move(10);

3.4 函数

TypeScript 中的函数可以为参数和返回值定义类型。它还支持可选参数和默认参数。

复制代码

function add(x: number, y: number): number {
    return x + y;
}

let myAdd = function(x: number, y: number): number { return x + y; };

function buildName(firstName: string, lastName: string = "Smith"): string {
    return firstName + " " + lastName;
}

let result1 = buildName("Bob");
let result2 = buildName("Bob", "Adams");

4. TypeScript 编译

TypeScript 文件需要编译成 JavaScript 才能在浏览器或 Node.js 环境中运行。使用 tsc 命令可以将 TypeScript 文件编译为 JavaScript 文件。

复制代码

tsc src/index.ts

编译后，会生成一个与源文件同名的 JavaScript 文件（index.js），可以直接运行这个文件。

5. 总结

在本篇学习笔记中，我们了解了 TypeScript 的基本概念和一些核心功能。我们从安装 TypeScript 开始，逐步介绍了类型注解、接口、类和函数的使用。下一篇学习笔记将深入探讨更复杂的类型系统以及一些高级特性。

希望你能继续关注本系列的学习笔记，逐步掌握 TypeScript 的强大功能和最佳实践。