在这个数字化时代，TypeScript作为一种由微软开发的开源编程语言，逐渐成为了前端开发的热门选择。它不仅为JavaScript添加了静态类型检查，还提供了丰富的工具链和社区支持。如果你已经安装了Node.js和npm，那么就可以开始创建一个属于自己的TypeScript项目了。下面，我们将一步步地引导你完成这个过程。
创建项目
1. 初始化项目
在命令行中，打开你希望存放项目的目录，并执行以下命令：
mkdir my-typescript-project
cd my-typescript-project
这里，我们创建了一个名为my-typescript-project的目录，并将其作为项目的根目录。
2. 初始化npm
接下来，我们需要在项目目录中初始化npm：
npm init -y
这条命令将自动生成一个package.json文件，其中包含了项目的基本信息。使用-y参数是为了自动填充默认值。
3. 安装TypeScript
现在，我们需要安装TypeScript。运行以下命令：
npm install typescript --save-dev
这条命令会将TypeScript作为项目的开发依赖项安装到本地。--save-dev参数表示这个依赖项只会在开发环境中使用。
配置编辑器
1. Visual Studio Code
Visual Studio Code是一个功能强大的代码编辑器，它支持多种编程语言，并且对于TypeScript的开发非常友好。
- 安装Visual Studio Code（可以从官网下载安装包或使用包管理器安装）。
- 打开Visual Studio Code，按下
Ctrl+Shift+P打开命令面板，搜索“安装扩展”。 - 在扩展市场中搜索并安装“TypeScript”和“Path Intellisense”扩展。
2. 配置.vscode/settings.json
在项目根目录中，创建一个名为.vscode/settings.json的文件，并添加以下配置：
{
"typescript.languageVersion": "ESNext", // 设置TypeScript版本
"typescript.tsdk": "${workspaceFolder}/node_modules/typescript/lib", // 指定TypeScript的库目录
"editor.formatOnSave": true, // 保存文件时自动格式化
"editor.codeActionsOnSave": {
"source.fixAll": true // 保存文件时自动修复
}
}
编写代码
1. 创建tsconfig.json
在项目根目录中，创建一个名为tsconfig.json的文件，并添加以下配置：
{
"compilerOptions": {
"target": "ES6", // 编译到ES6
"module": "commonjs", // 生成commonjs模块
"outDir": "./dist", // 输出目录
"rootDir": "./src", // 源目录
"strict": true, // 严格模式
"esModuleInterop": true, // 允许导入非ES模块
"skipLibCheck": true, // 跳过所有声明文件（*.d.ts）的类型检查
"forceConsistentCasingInFileNames": true // 确保文件名的大小写一致性
},
"include": ["src/**/*"], // 包含哪些文件
"exclude": ["node_modules", "**/*.spec.ts"] // 排除哪些文件
}
2. 创建src目录
在项目根目录中，创建一个名为src的目录，并将你的TypeScript代码文件放在这个目录下。
3. 编写代码
在src目录中，创建一个名为index.ts的文件，并编写以下代码：
console.log("Hello, TypeScript!");
保存文件后，按下F5键或在命令行中执行以下命令运行项目：
npx tsc
node dist/index.js
如果一切顺利，你将在控制台中看到“Hello, TypeScript!”的输出。
测试
1. 安装Jest
为了测试TypeScript代码，我们需要安装Jest。运行以下命令：
npm install --save-dev jest ts-jest @types/jest
2. 配置Jest
在package.json中添加以下脚本：
"scripts": {
"test": "jest"
}
3. 编写测试用例
在src目录下创建一个名为index.test.ts的文件，并编写以下测试用例：
import { add } from "./index";
test("adds 1 + 2 to equal 3", () => {
expect(add(1, 2)).toBe(3);
});
保存文件后，在命令行中执行以下命令运行测试：
npm test
如果一切顺利，测试将通过。
部署
1. 构建项目
在项目根目录中，执行以下命令构建项目：
npx tsc
这将编译TypeScript代码并将其输出到dist目录。
2. 部署到服务器
根据你的需求，可以选择将项目部署到不同的服务器上。以下是一些常见的部署方法：
- GitHub Pages：如果你的项目托管在GitHub上，可以通过GitHub Pages快速将项目部署到Web上。
- Netlify：Netlify是一个快速、简单的Web构建服务，可以方便地将静态网站部署到Web上。
- Vercel：Vercel是一个流行的Web平台，提供了丰富的工具和功能，可以帮助你快速部署Web应用。
按照各平台的指南，上传你的项目代码，并选择合适的部署方式。
通过以上步骤，你就可以从零开始搭建一个TypeScript项目了。祝你在TypeScript的世界中探索愉快！