TypeScript项目实战：从入门到简单应用
本文将带你深入了解如何从零开始搭建TypeScript开发环境，并通过一系列实战案例详细讲解TypeScript项目开发的全过程，包括控制台应用程序和Web应用的构建。文中还将介绍代码规范、Lint检查、单元测试、集成测试以及版本控制的实用方法，帮助你掌握完整的TypeScript项目实战技能。
TypeScript简介与环境搭建 TypeScript是什么TypeScript是一种由Microsoft开发的开源编程语言，它是JavaScript的一个超集，保留了JavaScript的所有特性，并增加了静态类型检查。静态类型检查可以提高代码的可读性和可维护性，有助于在编译时发现潜在的错误，并提供更好的工具支持，如智能感知和重构等。
TypeScript可以通过简单的 type 和 interface 来定义变量和函数的类型，这使得开发大型项目变得更加容易和高效。此外，TypeScript还支持面向对象编程中的类、继承和接口等特性，这使得开发者可以更加自然地使用他们习惯的编程方式。TypeScript代码经过编译后可以运行在任何支持JavaScript的环境中。
安装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中，变量声明时可以指定变量的类型，这有助于提高代码的可读性和可维护性。
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项目。打开命令行界面，进入该文件夹，运行以下命令：
npm init -y这将创建一个 package.json 文件，用于管理项目的依赖关系和配置。
在项目文件夹中创建一个新的文件 index.ts，并在其中编写你的第一个TypeScript代码：
let message: string = "Hello, TypeScript!";
console.log(message);在命令行界面中，运行以下命令：
tsc这将编译项目中的所有TypeScript文件，并将它们转换为相应的JavaScript文件。编译后的JavaScript文件将存放在 dist 文件夹中。
在命令行界面中，运行以下命令：
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实现应用程序在项目文件夹中创建一个新的文件 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>';我们可以使用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服务器，我们需要将编译后的代码上传到服务器，并配置好服务器以运行这些代码。
在服务器上安装Node.js和npm，然后将编译后的代码上传到服务器。在服务器上安装项目依赖：
npm install最后，启动服务器：
npm start为了保证代码的一致性和可读性，我们可以在项目中引入代码规范和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仓库。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
