【NodeJs】从头到尾构建一个Typescript项目

文章目录

• 前言
• 一、明确需求
• 二、创建项目
• • 1. 新建文件夹
  • 2. 初始化项目
  • 4. 创建项目结构
  • 5. 配置 ts
  • 6. 配置项目启动命令
  • 7. 运行项目
  • 8. 测试多模块

前言

试想一下这么一个情况，你想要对一些数据或文件进行批量处理，但是你用的编程语言比较顺手的或者工作使用的编程语言是 Typescript 或者 Javascript，因此想要使用 Typescript 来实现这些操作。

当然，要想完成这个工作，哪怕你使用 python,shell 也是可以完成的，但是这里只谈论使用 Typescript.

现在就是这个情况，我想要写一个 nodejs 的 TS 项目，能够编译我写的代码，并且执行代码，得到我想要的结果。

一、明确需求

既然知道了目标，那么就要先明确一下需求。

现在就是这个情况，我想要写一个 nodejs 的 TS 项目，能够编译我写的代码，并且执行代码，得到我想要的结果。

从这里可得到以下信息：

1. 项目是使用 nodejs，编程语言是 Typescript
2. 要能编译 ts 代码
3. 最后执行 ts 代码，得到想要的输出结果。

粗略设计

1. 首先定义一个 build 输出目录，遵从一般的项目标准，使用./dist
2. 定义一个入口文件，ts 编译后是 js，那么入口文件就是./dist/index.js
3. 使用命令来执行操作，一个 build 用来编译代码，一个 dev 来编译和执行。
4. 源码的入口文件是src/index.ts

二、创建项目

使用你的包管理工具（我使用的是 pnpm，如果你使用的是npm、yarn 或者其他包管理工具，则执行相同的操作即可），初始化一个项目

1. 新建文件夹

mkdir my_project
cd my_project

2. 初始化项目

pnpm init

然后就是输入各种项目信息，创建完毕后当前目录会多出一个 package.json 文件，内容如下

{
  "name": "my_project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo"Error: no test specified"&& exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

3. 安装依赖

这里主要是安装 typescript 的编译依赖和支持 nodejs 库的一些依赖。

pnpm install typescript @types/node

然后使用 npx 来初始化一下 typescript 的配置文件

npx tsc --init

此时当前目录下会多出一个tsconfig.json，这个是全局的 ts 配置文件，内容如下

{
  "compilerOptions": {
    

    
    
    
    
    
    
    

    
    "target": "es2016",                                  
    
    
    
    
    
    
    
    
    
    
    

    
    "module": "commonjs",                                
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    
    
    
    "esModuleInterop": true,                             
    
    "forceConsistentCasingInFileNames": true,            

    
    "strict": true,                                      
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    "skipLibCheck": true                                 
  }
}

文件中有一些注释，读者可自行观看，我们这里只实现我们的目的。

4. 创建项目结构

接下来创建项目的目录结构，其实最主要的就是创建 src 目录，然后在 src 目录下新建个index.ts，至于其他的目录我们还是要用代码去创建。目录结构创建好后，如下图所示

5. 配置 ts

ts 的配置的话主要是以下内容

1. 保存时编译
2. 语法用最新的
3. 开启 sourceMap, 方便调试
4. 设置输出目录
5. 设置源码目录
6. 设置包含的 ts 文件
7. 设置排除的 ts 文件

如果你有兴趣可以到上面的文档或者 ts 官方学习一下如何配置，我这里给出完整配置

{
  "compileOnSave": true,
  "compilerOptions": {
    "module": "ES2022",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "ES2023",
    "moduleResolution": "Node",
    "outDir": "./dist",
    "lib": ["ESNext"],
    "esModuleInterop": true,
    "rootDir": "./src"
  },
  "files": ["./src/index.ts"],
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules", "tmp"]
}

6. 配置项目启动命令

按照之前的需求，来编写项目启动命令。

{
  "name": "schemas",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo"Error: no test specified"&& exit 1",
    "dev": "tsc && node dist/index.js"
  },
  "keywords": [],
  "type": "module",
  "author": "",
  "license": "ISC",
  "dependencies": {
    "typescript": "^5.6.3"
  },
  "devDependencies": {
    "@types/node": "^22.7.5"
  }
}

在工程的 package.json 中，scripts字段是定义执行的命令的，后面的命令代表两个意思

1. tsc 编译当前项目
2. node dist/index.js执行 dist/index.js 文件（这是因为编译了以后，输出的就是那个地方的 index.js 文件，这个在 package.json 和tsconfig.json中写了的，如果你不理解可以返回去看看）

7. 运行项目

在经过以上操作后，运行以下命令即可看到 ts 被编译执行了。

pnpm run dev

8. 测试多模块

对于一个 ts 项目来说，能创建多个 ts 文件是至关重要的，本来就是想着这么点便利的地方。

此时创建个 test.ts 文件，里面导出个 test 方法

const test_hello = (data: string) => {
    return `hello ${data}`;
}

export default test_hello;

然后在 index.ts 中测试

当前只能以 js 后缀导入，还是感觉不太舒服的，但是这就需要集成打包工具了，这就很麻烦。