TypeScript项目实战：从入门到简单应用-原创手记-慕课网

概述

本文将带你深入了解如何从零开始搭建TypeScript开发环境，并通过一系列实战案例详细讲解TypeScript项目开发的全过程，包括控制台应用程序和Web应用的构建。文中还将介绍代码规范、Lint检查、单元测试、集成测试以及版本控制的实用方法，帮助你掌握完整的TypeScript项目实战技能。

TypeScript简介与环境搭建

TypeScript是什么

TypeScript是一种由Microsoft开发的开源编程语言，它是JavaScript的一个超集，保留了JavaScript的所有特性，并增加了静态类型检查。静态类型检查可以提高代码的可读性和可维护性，有助于在编译时发现潜在的错误，并提供更好的工具支持，如智能感知和重构等。

TypeScript可以通过简单的 type 和 interface 来定义变量和函数的类型，这使得开发大型项目变得更加容易和高效。此外，TypeScript还支持面向对象编程中的类、继承和接口等特性，这使得开发者可以更加自然地使用他们习惯的编程方式。TypeScript代码经过编译后可以运行在任何支持JavaScript的环境中。

安装Node.js与npm

安装TypeScript之前，你需要确保系统中已经安装了Node.js和npm。Node.js是一个基于Chrome V8引擎的JavaScript运行时，它允许使用JavaScript来编写服务器端应用程序。npm是Node.js的包管理器，可以用来安装、更新和删除Node.js的第三方库。

你可以从Node.js官网下载最新的稳定版本。安装Node.js时会自动安装npm，因此你无需单独下载npm。

安装完成后，可以通过以下命令检查Node.js和npm是否安装成功：

node -v
npm -v

运行上面的命令后，如果屏幕上显示了Node.js和npm的版本号，说明安装成功。

安装TypeScript

安装TypeScript可以使用npm包管理器。打开命令行界面，运行以下命令：

npm install -g typescript

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

tsc -v

运行上面的命令后，如果屏幕上显示了TypeScript的版本号，说明安装成功。

配置VS Code集成开发环境

Visual Studio Code是一款由Microsoft开发的免费源代码编辑器，支持多种编程语言和操作系统。对于TypeScript开发而言，VS Code提供了良好的支持，包括语法高亮、代码提示、调试等功能。

下载VS Code的安装包并安装。安装完成后，打开VS Code，点击左侧活动栏中的扩展按钮，然后搜索 TypeScript，点击安装。

为了方便使用，你还可以安装一些额外的TypeScript插件，例如 TypeScript Hero 和 TypeScript Intellisense，这些插件可以增强VS Code的TypeScript开发体验。

配置VS Code集成开发环境的主要步骤如下：

打开VS Code，点击左侧活动栏中的扩展按钮（四个方块组成的图标）。
在搜索框中搜索 TypeScript。
找到 TypeScript 插件，点击 安装。
安装完成后，可以在VS Code中使用TypeScript进行开发。

TypeScript基础语法入门

变量与类型声明

在TypeScript中，变量声明时可以指定变量的类型，这有助于提高代码的可读性和可维护性。

let age: number = 25;
let name: string = "Alice";
let isEmployee: boolean = true;
let undefinedValue: undefined = undefined;
let nullValue: null = null;
let anyValue: any = "Hello";
let unknownValue: unknown = "World";

通过指定类型，可以确保变量只能存储特定类型的数据。例如，age 变量只能存储数字类型的数据，name 变量只能存储字符串类型的数据。

函数定义与调用

在TypeScript中，函数定义时可以指定参数和返回值的类型，这有助于提高代码的可读性和可维护性。

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

const result = add(2, 3);
console.log(result); // 输出5

通过指定参数和返回值的类型，可以确保函数的参数只能传递特定类型的数据，返回值也只能是特定类型的数据。例如，add 函数的参数必须是数字类型的数据，返回值也必须是数字类型的数据。

类与接口

在TypeScript中，类和接口是面向对象编程的重要组成部分，它们可以帮助我们更好地组织代码。

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

class Employee implements Person {
    name: string;
    age: number;
    job: string;

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

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

const alice = new Employee("Alice", 25, "Engineer");
alice.introduce(); // 输出Hello, my name is Alice, I am 25 years old, and I work as a Engineer.

通过定义接口，可以确保类实现接口时必须实现接口中定义的所有属性和方法。例如，Employee 类实现了 Person 接口，必须实现 name 和 age 属性，以及 introduce 方法。

泛型与属性装饰器

在TypeScript中，泛型和属性装饰器可以帮助我们更好地组织代码。

function readOnly(target: any, propertyKey: string) {
    const value = target[propertyKey];

    const getter = function () {
        return value;
    };

    Object.defineProperty(target, propertyKey, {
        get: getter,
        set: () => { throw new Error(`Cannot set read-only property ${propertyKey}`); }
    });
}

class Person {
    @readOnly
    name: string;

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

const alice = new Person("Alice");
console.log(alice.name); // 输出Alice
alice.name = "Bob"; // 抛出Cannot set read-only property name

通过定义属性装饰器，可以确保属性只能读取，不能修改。例如，name 属性被标记为只读，因此不能修改。

创建简单的TypeScript项目

初始化项目结构

创建一个新的文件夹，用于存放你的TypeScript项目。打开命令行界面，进入该文件夹，运行以下命令：

npm init -y

这将创建一个 package.json 文件，用于管理项目的依赖关系和配置。

编写第一个TypeScript文件

在项目文件夹中创建一个新的文件 index.ts，并在其中编写你的第一个TypeScript代码：

let message: string = "Hello, TypeScript!";
console.log(message);

编译TypeScript代码为JavaScript

在命令行界面中，运行以下命令：

tsc

这将编译项目中的所有TypeScript文件，并将它们转换为相应的JavaScript文件。编译后的JavaScript文件将存放在 dist 文件夹中。

运行编译后的JavaScript代码

在命令行界面中，运行以下命令：

node dist/index.js

这将运行编译后的JavaScript代码，并在控制台上输出 Hello, TypeScript!。

示例文件：app.ts

在项目文件夹中创建一个新的文件 app.ts，并在其中编写以下代码：

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

const a: number = +process.argv[2];
const b: number = +process.argv[3];
const result: number = add(a, b);
console.log(`The sum of ${a} and ${b} is ${result}`);

这个程序定义了一个 add 函数，用于计算两个数字的和。程序还会读取从命令行输入的两个数字，计算它们的和，并将结果输出到控制台。

示例文件：package.json

在项目文件夹中创建一个新的文件 package.json，并在其中编写以下代码：

{
    "name": "typescript-app",
    "version": "1.0.0",
    "description": "A simple TypeScript application",
    "main": "dist/app.js",
    "scripts": {
        "start": "node dist/app.js"
    },
    "dependencies": {},
    "devDependencies": {
        "typescript": "^4.4.3"
    }
}

这将定义程序的启动命令，并将 dist/app.js 文件指定为程序的入口点。

实战：构建一个TypeScript控制台应用程序

设计应用程序需求

假设我们正在开发一个简单的控制台应用程序，该应用程序可以计算用户输入的两个数字的和。

使用TypeScript实现应用程序

在项目文件夹中创建一个新的文件 app.ts，并在其中编写以下代码：

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

const a: number = +process.argv[2];
const b: number = +process.argv[3];
const result: number = add(a, b);
console.log(`The sum of ${a} and ${b} is ${result}`);

这个程序定义了一个 add 函数，用于计算两个数字的和。程序还会读取从命令行输入的两个数字，计算它们的和，并将结果输出到控制台。

调试与测试

为了确保程序的正确性，我们可以在命令行输入不同的数字，运行程序并验证输出结果是否正确。例如，运行以下命令：

node dist/app.js 2 3

这将输出 The sum of 2 and 3 is 5。

发布与部署

为了将程序发布到生产环境，你需要确保程序经过充分的测试，并且没有任何已知的错误。你还可以创建一个 package.json 文件，用于定义程序的启动命令和其他配置。

在项目文件夹中创建一个新的文件 package.json，并在其中编写以下代码：

{
    "name": "typescript-app",
    "version": "1.0.0",
    "description": "A simple TypeScript application",
    "main": "dist/app.js",
    "scripts": {
        "start": "node dist/app.js",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "dependencies": {},
    "devDependencies": {
        "typescript": "^4.4.3",
        "eslint": "^7.32.0",
        "typescript-eslint-parser": "^4.32.0",
        "chai": "^4.3.4",
        "mocha": "^9.1.1"
    }
}

这将定义程序的启动命令，并将 dist/app.js 文件指定为程序的入口点。

示例文件：.eslintrc.js

在项目文件夹中创建一个新的文件 .eslintrc.js，并在其中编写以下代码：

module.exports = {
    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaVersion: 2020,
        sourceType: 'module'
    },
    plugins: ['@typescript-eslint'],
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended'
    ],
    rules: {
        'no-unused-vars': 'error',
        'prefer-const': 'warn'
    }
};

这将配置代码规范和Lint检查规则。

示例文件：.eslintignore

在项目文件夹中创建一个新的文件 .eslintignore，并在其中编写以下内容：

node_modules
dist

这将忽略 node_modules 和 dist 文件夹中的文件，使其不被Lint检查。

示例文件：index.spec.ts

在项目文件夹中创建一个新的文件夹 tests，并在其中创建一个新的文件 index.spec.ts，并在其中编写以下代码：

import { expect } from 'chai';

describe('add', () => {
    it('should return the sum of two numbers', () => {
        const result = add(2, 3);
        expect(result).to.equal(5);
    });
});

这将定义一个简单的单元测试，用于验证 add 函数的正确性。

示例文件：mocha.opts

在项目文件夹中创建一个新的文件 mocha.opts，并在其中编写以下内容：

--require ts-node/register
--recursive

这将配置Mocha以使用 ts-node 运行测试。

示例文件：Dockerfile

在项目文件夹中创建一个新的文件 Dockerfile，并在其中编写以下内容：

FROM node:14

WORKDIR /usr/src/app

COPY package.json ./
RUN npm install

COPY tsconfig.json ./
COPY app.ts ./
COPY tests/index.spec.ts ./
COPY .eslintrc.js ./
COPY .eslintignore ./
COPY mocha.opts ./

RUN tsc

CMD ["node", "dist/app.js"]

这将配置Docker容器以运行TypeScript应用程序。

示例文件：Procfile

在项目文件夹中创建一个新的文件 Procfile，并在其中编写以下内容：

web: node dist/app.js

这将定义应用程序的启动命令。

示例文件：.gitignore

在项目文件夹中创建一个新的文件 .gitignore，并在其中编写以下内容：

node_modules
dist
.eslintrc.js
.eslintignore
mocha.opts

这将忽略 node_modules 和 dist 文件夹中的文件，使其不被Git版本控制。

发布新版本

为了发布新版本，运行以下命令：

npm version patch
npm publish

这将发布一个新的版本，并将其推送到npm仓库。

实战：构建一个TypeScript Web应用

使用TypeScript开发简单的Web应用

我们可以使用TypeScript来开发一个简单的Web应用，该应用可以在浏览器中显示一个欢迎消息。

在项目文件夹中创建一个新的文件夹 src，并在其中创建一个新的文件 index.ts，并在其中编写以下代码：

document.body.innerHTML = '<h1>Hello, TypeScript Web App!</h1>';

结合前端框架（如React或Vue）

我们可以使用TypeScript与React或Vue框架结合，开发更复杂的Web应用。

首先，安装React相关的依赖：

npm install react react-dom typescript @types/react @types/react-dom --save

然后，在 index.ts 中编写以下代码：

import React from 'react';
import ReactDOM from 'react-dom';

const App: React.FC = () => (
    <div>
        <h1>Hello, TypeScript React App!</h1>
    </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

接下来，在项目文件夹中创建一个 index.html 文件，并在其中编写以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeScript React App</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

最后，修改 package.json 文件，添加构建命令：

{
    "name": "typescript-react-app",
    "version": "1.0.0",
    "description": "A simple TypeScript React application",
    "main": "dist/index.js",
    "scripts": {
        "build": "tsc && webpack"
    },
    "dependencies": {
        "react": "^17.0.2",
        "react-dom": "^17.0.2"
    },
    "devDependencies": {
        "typescript": "^4.4.3",
        "webpack": "^5.11.0",
        "webpack-cli": "^4.3.1",
        "@types/react": "^17.0.2",
        "@types/react-dom": "^17.0.2"
    }
}

安装构建工具：

npm install webpack webpack-cli --save-dev

创建 webpack.config.js 文件，配置打包器：

const path = require('path');

module.exports = {
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist')
    }
};

运行构建命令：

npm run build

在浏览器中打开 index.html 文件，就可以看到应用程序的运行结果。

部署到Web服务器

为了将Web应用部署到Web服务器，我们需要将编译后的代码上传到服务器，并配置好服务器以运行这些代码。

在服务器上安装Node.js和npm，然后将编译后的代码上传到服务器。在服务器上安装项目依赖：

npm install

最后，启动服务器：

npm start

TypeScript项目维护与扩展

代码规范与Lint检查

为了保证代码的一致性和可读性，我们可以在项目中引入代码规范和Lint检查工具。

在项目文件夹中，创建一个新的文件 .eslintrc.js，并在其中编写以下代码：

module.exports = {
    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaVersion: 2020,
        sourceType: 'module'
    },
    plugins: ['@typescript-eslint'],
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended'
    ],
    rules: {
        'no-unused-vars': 'error',
        'prefer-const': 'warn'
    }
};

安装Lint检查工具：

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

创建 .eslintignore 文件，忽略不需要检查的文件：

node_modules
dist

在命令行界面中，运行以下命令：

npx eslint src --ext .ts

这将检查 src 文件夹中的所有TypeScript文件，并输出Lint检查的结果。

单元测试与集成测试

为了确保代码的质量，我们需要编写单元测试和集成测试。

首先，安装测试工具：

npm install mocha chai --save-dev

然后，在项目文件夹中创建一个新的文件夹 tests，并在其中创建一个新的文件 index.spec.ts，并在其中编写以下代码：

import { expect } from 'chai';

describe('add', () => {
    it('should return the sum of two numbers', () => {
        const result = add(2, 3);
        expect(result).to.equal(5);
    });
});

创建 mocha.opts 文件，配置Mocha：

--require ts-node/register
--recursive

在命令行界面中，运行以下命令：

npx mocha tests --require ts-node/register

这将运行所有的测试文件，并输出测试的结果。

项目版本控制与发布

为了更好地管理项目的版本，我们可以在项目中使用版本控制系统，例如Git。

首先，安装Git：

git init

创建 .gitignore 文件，忽略不需要版本控制的文件：

node_modules
dist

提交代码到远程仓库：

git add .
git commit -m "Initial commit"
git remote add origin <remote-repo-url>
git push -u origin master

最后，发布新版本：

npm version patch
npm publish

这将发布一个新的版本，并将其推送到npm仓库。