1. 选择合适的环境
首先，确保你的计算机上安装了Node.js和npm（Node.js包管理器）。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，而npm则是Node.js的包管理器，用于安装和管理项目依赖。
你可以通过以下命令检查Node.js和npm的版本：
node -v
npm -v
如果未安装，可以从Node.js官网下载并安装。
2. 创建项目文件夹
使用命令行创建一个新文件夹，例如：
mkdir my-typescript-project
cd my-typescript-project
3. 初始化项目
在项目文件夹中运行以下命令来初始化项目，根据提示创建一个package.json文件：
npm init -y
-y参数表示接受所有默认值。
4. 安装TypeScript
运行以下命令来安装TypeScript：
npm install --save-dev typescript
这会将TypeScript添加到项目的package.json文件中的devDependencies部分。
5. 配置TypeScript
在项目根目录下创建一个tsconfig.json文件，用于配置TypeScript编译选项。以下是一个基本的tsconfig.json示例：
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true
},
"include": ["src/**/*"]
}
这个配置将编译TypeScript代码为目标JavaScript版本为ES5，使用CommonJS模块系统，并启用所有严格类型检查选项。
6. 编写代码
在项目文件夹中创建一个名为src的文件夹，并在其中创建.ts文件，例如src/index.ts。开始编写TypeScript代码：
// src/index.ts
function greet(name: string): string {
return `Hello, ${name}!`;
}
console.log(greet('World'));
7. 编译TypeScript
在命令行中运行以下命令来编译TypeScript代码为JavaScript：
npm run build
或者直接运行：
tsc
这将在项目根目录下生成一个dist文件夹，其中包含编译后的JavaScript代码。
8. 集成构建工具（可选）
如果你需要更高级的构建功能，可以安装Webpack、Gulp等工具。以下是一个使用Webpack的示例：
npm install --save-dev webpack webpack-cli
创建一个webpack.config.js文件，并配置Webpack：
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.ts',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.ts', '.js'],
},
};
然后，在package.json中添加一个构建脚本：
"scripts": {
"build": "webpack --mode development"
}
再次运行npm run build来使用Webpack编译代码。
9. 测试
编写测试用例，并使用测试框架（如Jest）来测试你的TypeScript代码。以下是一个使用Jest的示例：
npm install --save-dev jest ts-jest @types/jest
创建一个jest.config.js文件，并配置Jest：
// jest.config.js
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
};
编写测试用例：
// src/greet.test.ts
import { greet } from './greet';
test('greet function returns correct message', () => {
expect(greet('World')).toBe('Hello, World!');
});
运行测试：
npm test
10. 部署
将编译后的JavaScript代码部署到服务器或静态站点托管服务上。例如，你可以使用GitHub Pages、Netlify或Vercel等平台来托管你的项目。
在GitHub Pages的例子中，你需要在项目的根目录下创建一个名为.github/workflows/deploy.yml的文件，并配置部署脚本：
name: Deploy to GitHub Pages
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Use Node.js
uses: actions/setup-node@v2
with:
node-version: '14'
- run: npm ci
- run: npm run build
- name: Deploy to GitHub Pages
uses: JamesIves/github-pages-action@v3
with:
BRANCH: main
运行此工作流将自动将你的项目部署到GitHub Pages。
通过以上步骤，你就可以从零开始搭建一个TypeScript项目，并完成从环境搭建到部署的整个过程。祝你搭建成功！