首页手记 TypeScript教程：初学者必备指南

TypeScript教程：初学者必备指南

标签：

Typescript

本文全面介绍了TypeScript教程，包括其基本概念、优势、安装方法以及变量声明、函数定义、接口和类型等核心语法。此外，文章还详细讲解了类与继承的使用，并通过实战演练构建了一个简单的TypeScript项目。TypeScript教程涵盖了从入门到进阶的所有关键知识点。

TypeScript简介

什么是TypeScript

TypeScript 是一种由微软开发并开源的编程语言。它是 JavaScript 的超集，也就是说，TypeScript 代码可以被编译成 JavaScript 代码。TypeScript 引入了一些特性，如静态类型检查、接口、泛型等，使得开发者可以编写出更安全、更易于维护的代码。TypeScript 不仅适用于浏览器端开发，也适用于服务器端开发（如通过 Node.js）。

TypeScript的优势

静态类型检查：TypeScript 强制要求变量和函数参数的类型定义，这有助于在编译阶段捕获潜在的类型错误，而不是在运行时才发现。例如，以下代码在 TypeScript 中会触发类型错误，因为 age 被声明为 number 类型，而不能被赋值为 string 类型的值。
```
let age: number = 25;
age = "25"; // 编译错误
```
更好的工具支持：由于 TypeScript 的类型注解，IDE 和其他开发工具能够提供更好的代码补全、重构和错误提示功能。这使得开发过程更加高效。
支持面向对象编程：TypeScript 支持类、接口、继承等面向对象编程特性，使代码结构更加清晰和易于管理。
可维护性：通过添加类型注解，代码变得更加易读和可维护。团队成员能够更容易理解代码的意图和逻辑结构。
通用性：TypeScript 代码可以编译成纯 JavaScript 代码，这使其可以运行在任何支持 JavaScript 的环境中，如浏览器、Node.js、React Native 等。

安装TypeScript

安装 TypeScript 最简单的方法是通过 npm（Node.js 包管理器）。首先，确保已经安装了 Node.js 和 npm。

npm install -g typescript

安装完 TypeScript 后，可以通过以下命令检查版本：

tsc -v

接下来，可以通过 tsc 命令将 TypeScript 文件编译为 JavaScript 文件。例如，假设有一个 hello.ts 文件，可以这样编译它：

tsc hello.ts

这将生成一个 hello.js 文件。如果需要配置编译选项，可以在项目根目录下创建一个 tsconfig.json 文件。

要展示一个简单的使用示例，创建一个 hello.ts 文件，并编写以下内容：

console.log("Hello, TypeScript!");

然后通过以下命令编译此文件：

tsc hello.ts

这将生成一个 hello.js 文件，可以通过 Node.js 运行它：

node hello.js

生成的 JavaScript 文件将输出 "Hello, TypeScript!"。

基本语法

变量声明

在 TypeScript 中，声明变量时需要指定类型，这有助于在编译时进行类型检查。以下是几种常见的变量声明方式：

// 声明一个变量为 number 类型
let age: number = 25;

// 声明一个变量为 string 类型
let name: string = "John Doe";

// 声明一个变量为 boolean 类型
let isStudent: boolean = true;

// 声明一个变量为 void 类型（代表没有返回值）
let voidVar: void = undefined;

TypeScript 还支持使用 let 和 const 关键字声明变量。let 允许变量值在声明之后改变，而 const 则要求变量一旦赋值后就不能改变。

let age: number = 25;
age = 30; // 允许，因为使用了 let

const name: string = "John Doe";
name = "Jane Doe"; // 编译错误，const 变量不允许重新赋值

此外，TypeScript 还支持数组和元组（tuples）类型的变量声明。例如：

// 声明一个字符串数组
let names: string[] = ["Alice", "Bob", "Charlie"];

// 声明一个元组类型，表示一个包含两个元素的数组，第一个元素为 string，第二个元素为 number
let person: [string, number] = ["John Doe", 25];

函数定义

在 TypeScript 中，可以定义带有类型注解的函数，这有助于确保函数的参数和返回值类型是正确的。函数声明的基本语法如下：

function sayHello(name: string): string {
    return "Hello, " + name;
}

这个例子中，sayHello 函数接受一个 string 类型的参数 name，并返回一个 string 类型的值。

更复杂的函数定义可以包括默认参数和可选参数：

function greet(name: string, greeting?: string): string {
    if (greeting) {
        return `${greeting}, ${name}`;
    } else {
        return `Hello, ${name}`;
    }
}

console.log(greet("Alice")); // 输出: Hello, Alice
console.log(greet("Bob", "Hi")); // 输出: Hi, Bob

这里 greeting 参数是可选的，可以通过传递 undefined 或不传递该参数来省略它。

对象和数组

TypeScript 中的对象通常通过接口（Interface）或类型别名（Type Alias）来定义。这两种方式都可以用来描述对象的结构。

对象

使用接口来描述对象：

interface Person {
    name: string;
    age: number;
}

let person: Person = {
    name: "Alice",
    age: 25
};

使用类型别名来描述对象：

type Person = {
    name: string;
    age: number;
}

let person: Person = {
    name: "Alice",
    age: 25
};

数组

TypeScript 支持多种方式来处理数组，其中一种是使用接口来描述数组的元素类型：

interface NumberArray {
    [index: number]: number;
}

let numbers: NumberArray = [1, 2, 3, 4];

此外，也可以使用类型别名来定义数组：

type NumberArray = number[];

let numbers: NumberArray = [1, 2, 3, 4];

接口与类型

接口（Interface）的定义和使用

在 TypeScript 中，接口（Interface）用于描述对象的结构。接口可以描述对象的属性、方法、索引签名等。下面是一个简单的接口定义及其使用：

interface Person {
    name: string;
    age: number;
    greet(): void;
}

let person: Person = {
    name: "Alice",
    age: 25,
    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

person.greet(); // 输出: Hello, my name is Alice and I am 25 years old.

在上面的例子中，Person 接口定义了一个 name 属性（类型为 string）、一个 age 属性（类型为 number），以及一个 greet 方法（没有返回值）。接口可以用于声明变量、函数参数等。

接口的继承

TypeScript 支持接口之间的继承，可以利用这一点来扩展接口的功能：

interface Employee extends Person {
    id: number;
    role: string;
}

let employee: Employee = {
    name: "John Doe",
    age: 30,
    id: 101,
    role: "Developer",
    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old. My ID is ${this.id} and my role is ${this.role}.`);
    }
}

employee.greet(); // 输出: Hello, my name is John Doe and I am 30 years old. My ID is 101 and my role is Developer.

在这个例子中，Employee 接口继承了 Person 接口，并添加了两个新的属性 id 和 role。

类型（Type）的定义和使用

在 TypeScript 中，类型别名（Type Alias）可以用于定义一个类型名称，可以在声明变量、函数参数等时使用该名称作为类型。类型别名与接口类似，但它们可以用于描述类型而不是对象结构。

类型别名

类型别名的定义：

type Name = string;
type Age = number;
type PersonType = {
    name: Name;
    age: Age;
}

使用类型别名：

let person: PersonType = {
    name: "Alice",
    age: 25
};

字面量类型

TypeScript 还支持字面量类型（Literal Types），允许指定变量只能取特定的几个值，例如：

type Role = "Admin" | "User" | "Guest";
let userRole: Role = "Admin";

在上面的例子中，userRole 变量只能取 "Admin"、"User" 或 "Guest" 三个值中的一个。

联合类型

联合类型（Union Types）允许变量取多种类型的值，例如：

type NumberOrString = number | string;

let value: NumberOrString = 25;
value = "Alice"; // 合法
value = true; // 编译错误

在这个例子中，value 变量可以取 number 类型或 string 类型的值，但不能取 boolean 类型的值。

函数类型和泛型

函数类型声明

在 TypeScript 中，可以定义函数类型来描述函数的参数和返回值类型。例如：

type AddFunction = (x: number, y: number) => number;

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

console.log(add(10, 20)); // 输出: 30

这里定义了一个 AddFunction 类型，表示一个接受两个 number 类型参数并返回 number 类型值的函数。然后声明了一个变量 add，并将其赋值为一个符合 AddFunction 类型的函数。

泛型的概念和应用

泛型允许编写可以处理多种类型数据的函数或类。例如，以下是一个泛型函数，它可以接受任何类型的参数并返回相同类型的值：

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

let output = identity<string>("Hello, World!");
console.log(output); // 输出: Hello, World!

let output2 = identity<number>(42);
console.log(output2); // 输出: 42

在上面的例子中，identity 函数声明了一个类型参数 T，表示它可以接受任何类型的参数，并返回相同类型的值。调用时可以指定具体类型，如 identity<string> 和 identity<number>。

泛型接口

泛型也可以应用于接口和类：

interface Box<T> {
    contents: T;
}

let numberBox: Box<number> = { contents: 42 };
let stringBox: Box<string> = { contents: "Hello" };

这里定义了一个泛型接口 Box，表示一个可以装任何类型内容的盒子。然后声明了两个具体的 Box 类型变量，一个装数字，一个装字符串。

泛型类

泛型也可以应用于类：

class GenericClass<T> {
    value: T;

    constructor(value: T) {
        this.value = value;
    }
}

let numberClass = new GenericClass<number>(42);
console.log(numberClass.value); // 输出: 42

let stringClass = new GenericClass<string>("Hello");
console.log(stringClass.value); // 输出: Hello

在上面的例子中，定义了一个泛型类 GenericClass，它可以存储任何类型的值。然后创建了两个具体的类实例，一个存储数字，一个存储字符串。

类与继承

类的概念和使用

在 TypeScript 中，类是一种面向对象编程的工具，用于定义对象的结构和行为。类可以包含属性（成员变量）和方法（成员函数）。

基本类

定义一个简单的类：

class Person {
    name: string;
    age: number;

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

    greet(): void {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

let person = new Person("Alice", 25);
person.greet(); // 输出: Hello, my name is Alice and I am 25 years old.

在这个例子中，Person 类有两个属性 name 和 age，以及一个 greet 方法。通过构造函数 constructor 可以初始化这些属性。

静态成员

类还可以包含静态成员，这些成员不属于类的实例，而是直接属于类本身：

class Person {
    static species: string = "Homo sapiens";
    name: string;
    age: number;

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

    greet(): void {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

console.log(Person.species); // 输出: Homo sapiens

在这个例子中，species 是一个静态属性，可以通过类名直接访问。

访问修饰符

TypeScript 支持多种访问修饰符，包括 public、private 和 protected：

class Person {
    public name: string;
    private age: number;

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

    public greet(): void {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }

    private celebrateBirthday(): void {
        this.age++;
    }

    public getAge(): number {
        this.celebrateBirthday();
        return this.age;
    }
}

let person = new Person("Alice", 25);
person.greet(); // 输出: Hello, my name is Alice and I am 25 years old.
console.log(person.age); // 编译错误，age 是 private 的
console.log(person.getAge()); // 输出: 26

在这个例子中，name 是 public 的，可以直接访问。age 是 private 的，只能在类内部访问。greet 方法是 public 的，可以直接调用。celebrateBirthday 方法是 private 的，只能在类内部调用。getAge 方法是一个 public 的方法，它内部调用了 celebrateBirthday 方法。

类的属性初始化

类的属性可以在声明时初始化：

class Person {
    name: string = "Unknown";
    age: number = 0;

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

    greet(): void {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

let person = new Person("Alice", 25);
person.greet(); // 输出: Hello, my name is Alice and I am 25 years old.

在这个例子中，name 和 age 属性在声明时被初始化为默认值，然后在构造函数中被赋予实际值。

继承的基本用法

继承允许一个类继承另一个类的属性和方法。被继承的类称为基类（或超类），继承的类称为派生类（或子类）。

基本继承

定义一个基类和一个派生类：

class Person {
    name: string;
    age: number;

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

    greet(): void {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

class Employee extends Person {
    id: number;
    role: string;

    constructor(name: string, age: number, id: number, role: string) {
        super(name, age);
        this.id = id;
        this.role = role;
    }

    work(): void {
        console.log(`My ID is ${this.id} and my role is ${this.role}.`);
    }
}

let employee = new Employee("John Doe", 30, 101, "Developer");
employee.greet(); // 输出: Hello, my name is John Doe and I am 30 years old.
employee.work(); // 输出: My ID is 101 and my role is Developer.

在这个例子中，Employee 类继承了 Person 类，并添加了 id 和 role 属性以及 work 方法。

覆写基类的方法

子类可以覆写（override）基类的方法：

class Person {
    name: string;
    age: number;

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

    greet(): void {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

class Employee extends Person {
    id: number;
    role: string;

    constructor(name: string, age: number, id: number, role: string) {
        super(name, age);
        this.id = id;
        this.role = role;
    }

    greet(): void {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old. My ID is ${this.id} and my role is ${this.role}.`);
    }
}

let employee = new Employee("John Doe", 30, 101, "Developer");
employee.greet(); // 输出: Hello, my name is John Doe and I am 30 years old. My ID is 101 and my role is Developer.

在这个例子中，Employee 类覆写了 Person 类的 greet 方法，添加了有关员工的信息。

重载方法

在 TypeScript 中，可以使用重载（Overload）来定义一个函数或方法可以接受不同类型或数量的参数：

class Person {
    name: string;
    age: number;

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

    greet(): void;
    greet(message: string): void;
    greet(message?: string): void {
        if (message) {
            console.log(`${message}, my name is ${this.name} and I am ${this.age} years old.`);
        } else {
            console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
        }
    }
}

let person = new Person("Alice", 25);
person.greet(); // 输出: Hello, my name is Alice and I am 25 years old.
person.greet("Hi"); // 输出: Hi, my name is Alice and I am 25 years old.

在这个例子中，greet 方法有两种重载形式：一种不接受参数，一种接受一个 string 类型的参数。通过判断参数的存在与否来决定输出的内容。

保护访问修饰符

protected 访问修饰符允许派生类访问基类的成员，但外部实例无法访问：

class Person {
    protected name: string;
    private age: number;

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

    readonly getAge(): number {
        return this.age;
    }
}

class Employee extends Person {
    id: number;
    role: string;

    constructor(name: string, age: number, id: number, role: string) {
        super(name, age);
        this.id = id;
        this.role = role;
    }

    work(): void {
        console.log(`My ID is ${this.id} and my role is ${this.role}.`);
    }
}

let employee = new Employee("John Doe", 30, 101, "Developer");
console.log(employee.getAge()); // 输出: 30
console.log(employee.name); // 编译错误，name 是 protected 的
employee.name = "Jane Doe"; // 编译错误，name 是 protected 的

在这个例子中，name 是 protected 的，只能在 Person 类及其派生类 Employee 内部访问。然而，外部实例无法访问或修改 name 属性。

静态成员的继承

静态成员也可以被继承：

class Person {
    static species: string = "Homo sapiens";

    constructor() {
        console.log(`My species is ${Person.species}`);
    }
}

class Employee extends Person {
    static role: string = "Employee";

    constructor() {
        super();
        console.log(`My role is ${Employee.role}`);
    }
}

let employee = new Employee(); // 输出: My species is Homo sapiens, My role is Employee

在这个例子中，species 是一个静态属性，被继承到 Employee 类，并在构造函数中被访问。

实战演练：构建简单的TypeScript项目

在这个部分，我们将通过构建一个简单的 TypeScript 项目来实践前面所学的概念。我们将创建一个项目结构，编写并运行 TypeScript 代码，并讨论调试和优化的方法。

创建项目结构

首先，创建一个新的文件夹来存放我们的项目：

mkdir ts-project
cd ts-project

然后，在项目文件夹中创建一个 index.ts 文件：

touch index.ts

这个文件将作为我们项目的入口点，用于编写主要的业务逻辑。

编写并运行TypeScript代码

在 index.ts 文件中，我们开始编写一些基本的 TypeScript 代码。例如，定义一个 Person 类，然后创建几个实例来测试它的功能。

// index.ts
class Person {
    name: string;
    age: number;

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

    greet(): void {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

let alice = new Person("Alice", 25);
let bob = new Person("Bob", 30);

alice.greet(); // 输出: Hello, my name is Alice and I am 25 years old.
bob.greet(); // 输出: Hello, my name is Bob and I am 30 years old.

接下来，需要配置 TypeScript 编译设置。在项目根目录下创建一个 tsconfig.json 文件，并在其中定义一些编译选项：

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs",
        "outDir": "./dist",
        "rootDir": "./src"
    },
    "include": [
        "src/**/*.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

这个配置文件指定了编译目标为 ES6，输出目录为 dist，源代码目录为 src，并排除 node_modules 目录。接下来，将 index.ts 文件移动到 src 目录下：

mkdir src
mv index.ts src/

现在，可以通过以下命令编译代码：

tsc

这将生成一个 dist 目录，并在其中生成编译后的 JavaScript 文件。

调试与优化

调试

TypeScript 支持在代码中插入断点并进行调试。通常，这需要一个支持 TypeScript 的 IDE，如 Visual Studio Code。

在 Visual Studio Code 中，可以将 tsconfig.json 文件配置为项目文件，然后在代码中插入断点并启动调试会话。例如，在 index.ts 文件中插入一个断点：

// index.ts
class Person {
    name: string;
    age: number;

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

    greet(): void {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);

        // 在这里插入一个断点
        debugger;
    }
}

let alice = new Person("Alice", 25);
let bob = new Person("Bob", 30);

alice.greet();
bob.greet();

然后，在 Visual Studio Code 中启动调试会话，运行代码时会在断点处暂停，可以检查变量值、调用栈等。

优化

优化 TypeScript 代码可以从多个维度入手，包括代码结构、性能、可读性等。

减少重复代码：避免重复编写相同的代码，可以使用函数、类等来抽象和复用代码。
类型检查：利用 TypeScript 的类型系统来确保代码的正确性，减少运行时错误。
代码审查：定期进行代码审查，确保代码符合项目规范和最佳实践。
性能优化：尽量减少不必要的计算和数据复制，使用更高效的算法和数据结构。
使用 TypeScript 的高级特性：如泛型、装饰器等，来简化代码和提高代码的可维护性。

例如，上面的 Person 类可以进一步抽象和优化：

// index.ts
interface Person {
    name: string;
    age: number;
    greet(): void;
}

class Employee implements Person {
    name: string;
    age: number;
    id: number;
    role: string;

    constructor(name: string, age: number, id: number, role: string) {
        this.name = name;
        this.age = age;
        this.id = id;
        this.role = role;
    }

    greet(): void {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old. My ID is ${this.id} and my role is ${this.role}.`);
    }

    work(): void {
        console.log(`My ID is ${this.id} and my role is ${this.role}.`);
    }
}

let alice = new Person("Alice", 25) as Person;
let bob = new Employee("Bob", 30, 101, "Developer");

alice.greet();
bob.greet();
bob.work();

在这个例子中，定义了一个 Person 接口，并让 Employee 类实现该接口。这种方法可以使代码结构更加清晰，并且可以自由地扩展 Employee 类的功能。

通过以上步骤，我们完成了一个简单的 TypeScript 项目的构建，并进行了基本的调试和优化。这只是一个起点，更多的实践和学习将使你能够更好地掌握 TypeScript 的高级特性和最佳实践。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕仙森

手记
篇

粉丝

37

获赞与收藏

103

关注作者，订阅最新文章

阅读免费教程

TypeScript 入门教程

38个小节 93707 667

后端通用面试教程

41个小节 30980 346

网络编程入门教程

20个小节 12758 240

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空