首页手记 TypeScript项目实战：入门与初级教程

TypeScript项目实战：入门与初级教程

标签：

Typescript

概述

本文介绍了从环境搭建到基础语法，再到项目实战的TypeScript学习路径，详细步骤包括安装Node.js和TypeScript，配置开发环境，创建简单的待办事项列表应用。此外，还涵盖了常见错误处理和性能优化建议。通过本文的学习，读者可以掌握TypeScript项目实战所需的各项技能。

TypeScript简介与环境搭建

TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的超集，也就是说，任何有效的 JavaScript 代码都是有效的 TypeScript 代码。TypeScript 的主要优点在于它提供了静态类型检查，这有助于开发者在编译阶段捕获更多的错误，从而提高代码质量和开发效率。

什么是TypeScript

TypeScript 增加了静态类型检查和面向对象编程特性，使得开发者可以编写更大规模、更复杂的 JavaScript 应用程序。它支持现代 JavaScript 的特性，如模板字符串、箭头函数等，同时也提供了诸如接口、泛型等高级功能，使开发者能够编写更清晰和可维护的代码。

安装Node.js和TypeScript

安装Node.js

访问 Node.js 官方网站（https://nodejs.org/）下载最新版本的 Node.js。
按照安装向导完成安装过程。
安装完成后，在命令行界面中输入 node -v 来验证安装是否成功。如果安装成功，会显示当前安装的 Node.js 版本号。

安装TypeScript

使用 Node.js 的包管理工具 npm 来安装 TypeScript。在命令行界面中输入以下命令：
```
npm install -g typescript
```
安装完成后，可以使用 tsc -v 命令来验证 TypeScript 的安装是否成功，输出的将是当前版本的 TypeScript。

配置开发环境

创建项目文件夹

在命令行界面中，创建一个新的项目文件夹，并进入该文件夹：
```
mkdir myTypeScriptProject
cd myTypeScriptProject
```

初始化项目

使用 npm init 命令来初始化项目，会生成一个 package.json 文件。
```
npm init -y
```

创建 TypeScript 配置文件

使用 tsc 命令生成 TypeScript 配置文件 tsconfig.json，默认配置即可满足基本需求。
```
tsc --init
```

tsconfig.json 文件的内容如下：

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

创建源代码目录

在项目根目录下创建一个 src 文件夹，用于存放源代码。

创建入口文件

在 src 文件夹下创建一个 index.ts 文件，作为项目的入口文件。
```
// src/index.ts
console.log("Hello, TypeScript!");
```

编译TypeScript代码

在命令行界面中，使用 tsc 命令编译 TypeScript 代码，生成 JavaScript 文件。
```
tsc
```
编译后的文件将放置在 dist 文件夹中。
运行生成的 JavaScript 文件，验证代码是否正确：
```
node dist/index.js
```

TypeScript基础语法

在掌握了 TypeScript 的基本环境搭建后，接下来将深入介绍 TypeScript 的基础语法，包括数据类型、函数与方法、类与继承等。

数据类型

基本类型

Boolean 类型

Boolean 类型表示布尔值，可以是 true 或 false。

let isReady: boolean = true;

Number 类型

Number 类型表示数字。在 TypeScript 中，数字可以是整数或浮点数。

let age: number = 25;
let pi: number = 3.14;

String 类型

String 类型表示字符串，可以使用单引号或双引号。

let message: string = "Hello, TypeScript!";

Void 类型

Void 类型表示没有返回值。常用于定义没有返回值的函数。

function sayHello(): void {
    console.log("Hello!");
}

Undefined 类型

Undefined 类型表示未定义的值。

let undefinedValue: undefined = undefined;

Null 类型

Null 类型表示空值。

let nullValue: null = null;

Any 类型

Any 类型表示任意类型，可以避免类型检查。但不推荐在生产环境中使用。

let value: any = 5;
value = "Hello";

Unknown 类型

Unknown 类型表示未知类型，可以避免在编译时的类型错误。

let value: unknown = 5;
value = "Hello";

复合类型

Array 类型

Array 类型表示数组，可以指定数组元素的类型。

let numbers: number[] = [1, 2, 3];
let names: string[] = ["Alice", "Bob"];
let mixed: any[] = [1, "hello", true];

Tuple 类型

Tuple 类型表示元组，可以指定多个不同类型的元素。

let person: [string, number] = ["Alice", 25];
console.log(person[0]); // "Alice"
console.log(person[1]); // 25

Enum 类型

Enum 类型表示枚举，可以定义一组命名的常量。

enum Color { Red = 1, Green, Blue };
let color: Color = Color.Red;
console.log(color); // 1

类型推断

TypeScript 可以根据赋值自动推断变量的类型。

let name = "Alice"; // 类型推断为 string
let age = 25; // 类型推断为 number

字面量类型

String 类型的字面量

可以通过字面量类型来限制字符串的值。

type Color = "red" | "green" | "blue";
let favoriteColor: Color = "red";

Number 类型的字面量

可以通过字面量类型来限制数字的值。

type Size = 1 | 2 | 3;
let size: Size = 2;

函数与方法

函数定义

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

console.log(greet("Alice")); // "Hello, Alice"

函数参数

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

console.log(add(1, 2)); // 3

可选参数与默认参数

function greet(name: string, message?: string): string {
    return message ? `Hello, ${name}! ${message}` : `Hello, ${name}!`;
}

console.log(greet("Alice")); // "Hello, Alice!"
console.log(greet("Alice", "Nice to meet you.")); // "Hello, Alice! Nice to meet you."

可变参数

function concat(...items: any[]): string {
    return items.join(", ");
}

console.log(concat("Hello", "TypeScript", "World")); // "Hello, TypeScript, World"

函数重载

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: any, b: any): any {
    if (typeof a === "number" && typeof b === "number") {
        return a + b;
    }
    return a + " " + b;
}

console.log(add(1, 2)); // 3
console.log(add("Hello", "TypeScript")); // "Hello TypeScript"

箭头函数

const power = (x: number, y: number): number => x ** y;

console.log(power(2, 3)); // 8

命名函数

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

console.log(greet("Alice")); // "Hello, Alice"

匿名函数

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

log("Hello, TypeScript!"); // "Hello, TypeScript!"

类型推断

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

console.log(add(1, 2)); // 3

方法

实例方法

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

    greet(message: string): string {
        return `${message}, ${this.name}`;
    }
}

const person = new Person("Alice");
console.log(person.greet("Hello")); // "Hello, Alice"

静态方法

class Math {
    static add(a: number, b: number): number {
        return a + b;
    }
}

console.log(Math.add(1, 2)); // 3

类与继承

类定义

class Person {
    name: string;
    age: number;

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

    greet(message: string): string {
        return `${message}, ${this.name}`;
    }
}

const person = new Person("Alice", 25);
console.log(person.greet("Hello")); // "Hello, Alice"

继承

class Employee extends Person {
    position: string;

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

const employee = new Employee("Bob", 30, "Engineer");
console.log(employee.greet("Hello")); // "Hello, Bob"
console.log(employee.position); // "Engineer"

接口

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

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

const alice: Person = {
    name: "Alice",
    age: 25
};

console.log(greet(alice)); // "Hello, Alice"

抽象类与抽象方法

abstract class Animal {
    abstract makeSound(): void;
}

class Dog extends Animal {
    makeSound(): void {
        console.log("Woof!");
    }
}

const dog = new Dog();
dog.makeSound(); // "Woof!"

TypeScript项目结构与模块化

项目目录结构

一个典型的 TypeScript 项目目录结构如下：

myTypeScriptProject/
├── src/
│   ├── index.ts
│   ├── app/
│   │   ├── main.ts
│   │   └── util.ts
│   └── model/
│       └── person.ts
├── dist/
├── package.json
└── tsconfig.json

入口文件

入口文件通常位于 src 目录下，例如 index.ts。

// src/index.ts
import { main } from "./app/main";

main();

模块文件

模块文件可以分布在不同的子目录中，例如 app 和 model。

// src/app/main.ts
import { log } from "./util";

log("Hello, main module!");

export function main(): void {
    log("Starting main function...");
}

// src/app/util.ts
export function log(message: string): void {
    console.log(`Logger: ${message}`);
}

// src/model/person.ts
export class Person {
    name: string;
    age: number;

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

模块化开发

导入与导出

在 TypeScript 中，可以使用 import 和 export 语句来实现模块化开发。

// src/app/main.ts
import { log } from "./util";

log("Hello, main module!");

export function main(): void {
    log("Starting main function...");
}

// src/app/util.ts
export function log(message: string): void {
    console.log(`Logger: ${message}`);
}

模块解析方式

TypeScript 支持多种模块解析方式，包括 CommonJS、ES6、AMD 等。在 tsconfig.json 文件中通过 module 选项来指定模块解析方式。

{
    "compilerOptions": {
        "module": "commonjs",
        // 其他配置选项...
    }
}

样例代码

以下是示例代码，展示了如何在项目中使用模块化开发。

// src/app/main.ts
import { log } from "./util";
import { Person } from "../model/person";

log("Hello, main module!");

export function main(): void {
    const person = new Person("Alice", 25);
    log(`Person: ${person.name}, ${person.age}`);
}

// src/app/util.ts
export function log(message: string): void {
    console.log(`Logger: ${message}`);
}

// src/model/person.ts
export class Person {
    name: string;
    age: number;

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

// src/index.ts
import { main } from "./app/main";

main();

编译与运行

在命令行界面中，使用 tsc 命令编译 TypeScript 代码，并运行生成的 JavaScript 文件。

tsc
node dist/index.js

实战：创建一个简单的TypeScript项目

项目需求分析

为了更好地理解 TypeScript 的实际应用，我们将创建一个简单的待办事项列表应用。该应用将具有以下功能：

添加新的待办事项。
标记待办事项为已完成。
删除待办事项。

代码实现步骤

创建项目结构

创建项目目录结构，如下：

todo-app/
├── src/
│   ├── index.ts
│   ├── todo.ts
│   └── util.ts
├── dist/
├── package.json
└── tsconfig.json

编写主入口文件

在 src/index.ts 中编写主入口文件。

// src/index.ts
import { TodoList } from "./todo";
import { log } from "./util";

const list = new TodoList();
list.add("Learn TypeScript");
list.add("Finish TODO App");

log("Initial list:");
list.print();

list.markComplete(0);
log("List after marking complete:");
list.print();

list.remove(1);
log("Final list:");
list.print();

定义待办事项类

在 src/todo.ts 中定义待办事项类。

// src/todo.ts
export class TodoItem {
    constructor(public description: string, public completed: boolean = false) {}
}

export class TodoList {
    private items: TodoItem[] = [];

    add(description: string): void {
        this.items.push(new TodoItem(description));
    }

    markComplete(index: number): void {
        if (index >= 0 && index < this.items.length) {
            this.items[index].completed = true;
        }
    }

    remove(index: number): void {
        if (index >= 0 && index < this.items.length) {
            this.items.splice(index, 1);
        }
    }

    print(): void {
        for (let i = 0; i < this.items.length; i++) {
            const item = this.items[i];
            console.log(`${i + 1}: ${item.description} - ${item.completed ? "Completed" : "Incomplete"}`);
        }
    }
}

实现辅助函数

在 src/util.ts 中实现日志记录函数。

// src/util.ts
export function log(message: string): void {
    console.log(`Logger: ${message}`);
}

编译与运行

在命令行界面中，使用 tsc 命令编译 TypeScript 代码，并运行生成的 JavaScript 文件。

tsc
node dist/index.js

运行与调试

运行编译后的代码，验证功能是否按预期工作：

node dist/index.js

输出结果：

Logger: Initial list:
1: Learn TypeScript - Incomplete
2: Finish TODO App - Incomplete
Logger: List after marking complete:
1: Learn TypeScript - Completed
2: Finish TODO App - Incomplete
Logger: Final list:
1: Learn TypeScript - Completed

常见问题与解答

常见错误处理

未定义类型错误

let value: number;
console.log(value); // TypeScript 编译错误：Cannot read properties of undefined (reading 'toString')

解决方法：

let value: number | undefined = undefined;
console.log(value); // 不再出现 TypeScript 编译错误

类型不匹配错误

function add(a: number, b: number): number {
    return a + b;
}
console.log(add("1", "2")); // 参数类型不匹配错误

解决方法：

function add(a: number, b: number): number {
    return a + b;
}
console.log(add(1, 2)); // 正确调用

模块导入错误

import { log } from "./util"; // 模块导入错误

解决方法：

import { log } from "./util"; // 确保路径正确且模块已导出

类型推断问题

let value = 5;
value = "Hello"; // TypeScript 编译错误：Cannot assign string to number

解决方法：

let value: any = 5;
value = "Hello"; // 不再出现 TypeScript 编译错误

性能优化建议

减少不必要的类型检查

function greet(name: string): void {
    console.log(`Hello, ${name}`);
}

greet(123); // TypeScript 编译错误：Argument of type 'number' is not assignable to parameter of type 'string'

解决方法：

function greet(name: string): void {
    console.log(`Hello, ${name}`);
}

const name: string = "Alice";
greet(name); // 正确调用

使用 `const` 替代 `let`

let value = 5;
value = 10; // 不推荐，减少不必要的变量修改

解决方法：

const value = 5; // 常量，不可修改

限制函数参数数量

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

add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 推荐限制参数数量

解决方法：

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

add(1, 2); // 推荐使用固定参数数量

使用静态方法优化类

class Math {
    static add(a: number, b: number): number {
        return a + b;
    }
}

console.log(Math.add(1, 2)); // 使用静态方法优化

减少不必要的属性初始化

class Person {
    name: string;
    age: number = 0; // 不必要的默认值
}

const person = new Person();
person.name = "Alice";
person.age = 25;

解决方法：

class Person {
    name: string;
    age?: number; // 可选属性
}

const person = new Person();
person.name = "Alice";
person.age = 25;

总结与进阶学习方向

本章所学内容回顾

环境搭建：安装 Node.js 和 TypeScript，配置开发环境。
基础语法：学习 TypeScript 的数据类型、函数与方法、类与继承。
项目结构：了解项目目录结构与模块化开发。
实战案例：创建一个简单的待办事项列表应用。
常见问题：处理 TypeScript 的常见错误。
性能优化：提供一些性能优化建议。

推荐资源与工具

慕课网：提供丰富的 TypeScript 和 JavaScript 课程，包括实践项目和实战演练。
TypeScript 官方文档：深入了解 TypeScript 的语法和特性。
VS Code：推荐使用 Visual Studio Code 作为开发环境，它提供了强大的 TypeScript 支持和丰富的插件生态系统。
TypeScript Playground：在线编写和测试 TypeScript 代码的在线工具。
GitHub：查找开源项目，了解实际应用中的 TypeScript 代码。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕森卡

手记
篇

粉丝

120

获赞与收藏

527

关注作者，订阅最新文章

阅读免费教程

TypeScript 入门教程

38个小节 93062 666

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

TypeScript项目实战：入门与初级教程

安装Node.js

安装TypeScript

创建项目文件夹

初始化项目

创建 TypeScript 配置文件

创建源代码目录

创建入口文件

编译TypeScript代码

基本类型

Boolean 类型

Number 类型

String 类型

Void 类型

Undefined 类型

Null 类型

Any 类型

Unknown 类型

复合类型

Array 类型

Tuple 类型

Enum 类型

类型推断

字面量类型

String 类型的字面量

Number 类型的字面量

函数定义

函数参数

可选参数与默认参数

可变参数

函数重载

箭头函数

命名函数

匿名函数

类型推断

方法

实例方法

静态方法

类定义

继承

接口

抽象类与抽象方法

入口文件

模块文件

导入与导出

模块解析方式

样例代码

编译与运行

创建项目结构

编写主入口文件

定义待办事项类

实现辅助函数

编译与运行

未定义类型错误

类型不匹配错误

模块导入错误

类型推断问题

减少不必要的类型检查

使用 const 替代 let

限制函数参数数量

使用静态方法优化类

减少不必要的属性初始化

阅读免费教程

使用 `const` 替代 `let`