TypeScript03-web项目知识

TypeScript03-web项目知识

不懂就学，不会这件事没有什么可丢脸的！

1-知识总结

• 1）Python和TypeScript在AI时代貌似秃燃就优秀了->MCP/OpenMemory等AI应用现在都用TypeScript开发
• 2）Nodejs/Java/Python比较->Java大型企业级应用/Nodejs高性能实时应用/Python人工智能
• 3）如何从0开始创建一个TypeScript项目

  # 1-创建package.json
  npm init -y  # 2-更新package.json并创建package-lock.json
  npm install typescript @types/node --save-dev
  npm install react react-dom axios# 3-创建tsconfig.jso
  npx tsc --init
  

• 4）TypeScript中tsconfig.json文件的作用->[npx tsc --init]可直接创建用于TypeScript的编译
• 5）package和package-lock区别->package记录粗略版本，package-lock记录精确版本
• 6）npm install xxx --save-dev ->添加到开发依赖中，会更新package.json
• 7）react-dom依赖->构建用户界面的 JavaScript 库
• 8）axios依赖->基于 Promise 的 HTTP 客户端
• 9）编辑TypeScript->[npx tsc]直接编译为JavaScript
• 10）运行JavaScript->[node dist/index.js]直接运行指定的JavaScript
• 11）运行package.json中script中指定脚本->npm run dev

{"scripts": {"dev": "nodemon --exec ts-node src/index.ts"}
}

• 12）tsconfig.json作用->TypeScipt配置TypeScript编译选项与项目结构
  • strict->配置是否启用所有严格类型检查选项(strict单词：严格的)
  • noImplicitAny->配置是否未明确指定类型编译报错(implicit单词：隐晦的，容忍的/noImplicitAny不容忍任何，发现就报错)
• 13）TypeScript配置文件总结

- 1）package.json-> 类比Maven,记录项目依赖、脚本等元信息，管理项目。
- 2）package-lock.json->Maven依赖精确版本(貌似Java就缺了这个导致不同环境可能有差别),锁定依赖版本，确保各环境依赖一致。
- 3）tsconfig.json->TypeScipt配置TypeScript编译选项与项目结构。

---

2-参考网址

• TypeScript个人后端测试代码

---

3-动手实操

1-NodeJs/Java/Python比较

从某种程度上来说，Node.js在理论上和Java、Python等语言用于后端服务时有一些相似之处，但也存在明显的差异，以下为你详细分析：

相似点

• 后端服务功能：它们都可以用于构建后端服务。Node.js、Java和Python都能处理网络请求、与数据库交互、处理业务逻辑等。例如，使用Node.js的Express框架、Java的Spring Boot框架以及Python的Django或Flask框架，都可以快速搭建一个Web服务器，接收客户端的HTTP请求并返回响应。
• 模块化和可扩展性：三者都支持模块化编程，允许开发者将代码分割成独立的模块，提高代码的可维护性和可扩展性。在Node.js中，可以使用require或import语句引入模块；Java有包和类的概念；Python则通过import语句导入模块。
• 数据库交互：都能与各种数据库进行交互，如关系型数据库（MySQL、PostgreSQL等）和非关系型数据库（MongoDB、Redis等）。例如，Node.js可以使用mysql2库与MySQL数据库交互，Java可以使用JDBC连接数据库，Python可以使用pymysql库连接MySQL。

不同点

• 执行机制
  • Node.js：基于事件驱动和单线程的非阻塞I/O模型，非常适合处理高并发的I/O密集型任务。它在一个线程上处理多个请求，当遇到I/O操作时，不会阻塞线程，而是继续处理其他请求，等I/O操作完成后再回来处理结果。
  • Java：通常使用多线程模型来处理并发，每个请求会分配一个独立的线程来处理。这种方式在处理CPU密集型任务时表现较好，但在处理大量并发的I/O密集型任务时，可能会因为线程创建和上下文切换的开销而导致性能下降。
  • Python：由于全局解释器锁（GIL）的存在，在CPython解释器中，同一时刻只有一个线程可以执行Python字节码。因此，Python的多线程在处理CPU密集型任务时效果不佳，但可以通过多进程或异步编程来处理并发。
• 性能特点
  • Node.js：在处理高并发的I/O密集型任务时性能表现出色，因为它的非阻塞I/O模型可以高效地处理大量并发连接。
  • Java：在处理CPU密集型任务时性能较好，因为它可以充分利用多核CPU的优势。Java的JIT（Just-In-Time）编译器可以在运行时将字节码编译成机器码，提高执行效率。
  • Python：由于其动态类型和解释执行的特性，在处理CPU密集型任务时性能相对较低。但可以通过使用Cython、NumPy等工具来提高性能。
• 应用场景
  • Node.js：常用于构建实时性要求较高的应用，如实时聊天应用、在线游戏、实时数据处理等。此外，由于Node.js的前后端语言统一（JavaScript），在全栈开发中也有广泛应用。
  • Java：广泛应用于企业级应用开发，如大型电子商务系统、金融系统、分布式系统等。Java的生态系统丰富，有大量的开源框架和工具可供使用。
  • Python：在数据科学、机器学习、人工智能等领域有广泛应用，同时也用于Web开发、自动化脚本编写等。Python有丰富的科学计算库和机器学习框架，如NumPy、Pandas、Scikit-learn等。

---

2-如何从0开始创建一个TypeScript项目

在 TypeScript 项目中引入新的依赖，比如 cors（通常跨域资源共享相关的依赖是 cors），一般可以按照以下步骤进行：

1. 初始化项目（如果尚未初始化）

如果你还没有初始化项目，需要先在项目根目录下运行以下命令来创建 package.json 文件，它用于管理项目的依赖和脚本等信息：

npm init -y

-y 选项表示使用默认配置快速初始化。

2. 安装 TypeScript 相关依赖（如果尚未安装）

确保你的项目已经安装了 TypeScript 及其类型定义文件：

npm install typescript @types/node --save-dev

• typescript 是 TypeScript 编译器。
• @types/node 是 Node.js 的类型定义文件，为 Node.js 的 API 提供类型支持。

3. 配置 TypeScript

如果项目中没有 tsconfig.json 文件，可以使用以下命令生成默认的 TypeScript 配置文件：

npx tsc --init

你可以根据项目需求对 tsconfig.json 进行进一步的配置。

4. 安装目标依赖

使用 npm 或 yarn 安装 cors 依赖：

npm install cors

这将在 package.json 的 dependencies 字段中添加 cors 依赖，并将其安装到 node_modules 目录下。

5. 安装类型定义文件（如果需要）

对于一些 JavaScript 库，可能需要额外安装类型定义文件来获得 TypeScript 的类型支持。cors 有官方的类型定义文件，可以使用以下命令安装：

npm install @types/cors --save-dev

6. 在 TypeScript 代码中引入并使用依赖

在你的 TypeScript 文件中引入 cors 并使用它。以下是一个使用 Express 框架和 cors 的示例：

// 引入所需的模块
import express from 'express';
import cors from 'cors';// 创建 Express 应用实例
const app = express();// 使用 cors 中间件
app.use(cors());// 定义一个简单的路由
app.get('/', (req, res) => {res.send('Hello, CORS Enabled!');
});// 启动服务器
const port = 3000;
app.listen(port, () => {console.log(`Server is running on port ${port}`);
});

7. 编译和运行项目

• 编译 TypeScript 代码：
  使用以下命令将 TypeScript 代码编译为 JavaScript 代码：

npx tsc

这将根据 tsconfig.json 的配置将 src 目录下的 .ts 文件编译为 .js 文件，默认输出到 dist 目录。

• 运行编译后的 JavaScript 代码：

node dist/index.js

这里假设编译后的文件是 dist/index.js，你需要根据实际情况修改路径。

8. 开发过程中使用热重载（可选）

为了提高开发效率，可以使用 nodemon 和 ts-node 实现代码修改后自动重启服务器：

• 安装 nodemon 和 ts-node：

npm install nodemon ts-node --save-dev

• 在 package.json 中添加启动脚本：

{"scripts": {"dev": "nodemon --exec ts-node src/index.ts"}
}

• 运行开发脚本：

npm run dev

通过以上步骤，你就可以在 TypeScript 项目中成功引入并使用 cors 依赖。

---

3-TypeScript中tsconfig.json文件的作用

在 TypeScript 项目里，tsconfig.json 文件起着关键作用，它用来对 TypeScript 编译器的编译选项进行配置，明确项目的编译规则和编译行为。以下将详细介绍其具体作用：

1. 定义项目根目录和编译输出目录

• rootDir：此选项用于指定 TypeScript 源文件的根目录。编译器会从该目录开始查找源文件。
• outDir：该选项用于指定编译后生成的 JavaScript 文件的输出目录。

示例：

{"compilerOptions": {"rootDir": "./src","outDir": "./dist"}
}

上述配置表明，TypeScript 源文件存于 src 目录，编译后的 JavaScript 文件会被输出到 dist 目录。

2. 配置编译选项

compilerOptions 是 tsconfig.json 里的核心部分，它涵盖了众多编译选项，可对 TypeScript 编译器的行为进行细致控制。

类型检查相关选项

• strict：当设置为 true 时，会启用所有严格类型检查选项，像 noImplicitAny、noImplicitThis 等，有助于提升代码的类型安全性。
• noImplicitAny：若设置为 true，在变量未明确指定类型且编译器无法推断其类型时，会抛出错误。

示例：

{"compilerOptions": {"strict": true,"noImplicitAny": true}
}

模块系统相关选项

• module：用于指定生成代码所使用的模块系统，例如 commonjs、esnext 等。
• target：指定编译后的 JavaScript 版本，像 es5、es6 等。

示例：

{"compilerOptions": {"module": "commonjs","target": "es6"}
}

3. 排除和包含文件

• include：该选项用来指定需要编译的文件或目录。可以使用 glob 模式来匹配文件。
• exclude：用于指定不需要编译的文件或目录。

示例：

{"include": ["src/**/*.ts"],"exclude": ["node_modules", "dist"]
}

此配置意味着，仅编译 src 目录下的所有 .ts 文件，同时排除 node_modules 和 dist 目录。

4. 引用其他配置文件

• extends：借助该选项，可以引用其他 tsconfig.json 文件的配置，从而实现配置的复用。

示例：

{"extends": "./base.tsconfig.json","compilerOptions": {"outDir": "./dist"}
}

上述配置表明，当前配置文件继承了 base.tsconfig.json 的配置，并且在此基础上对 outDir 选项进行了覆盖。

总结

tsconfig.json 文件是 TypeScript 项目不可或缺的一部分，它能让开发者依据项目需求灵活配置编译选项，保证代码的质量和可维护性。

---

4-react/react-dom/axios依赖

在 npm install react react-dom axios 这个命令中，react、react-dom 和 axios 是三个不同的依赖包，下面分别介绍它们的作用和使用示例。

1. react

作用

react 是 React 库的核心包，它提供了创建 React 组件、管理组件状态、处理组件生命周期等基础功能。React 是一个用于构建用户界面的 JavaScript 库，它采用虚拟 DOM（Virtual DOM）来提高渲染性能，通过组件化的方式来构建复杂的 UI。

使用示例

// 导入 React
import React from 'react';// 创建一个函数式组件
const MyComponent = () => {return (<div><h1>Hello, React!</h1></div>);
};export default MyComponent;

2. react-dom

作用

react-dom 是 React 专门用于操作 DOM 的包，它提供了将 React 组件渲染到浏览器 DOM 中的方法。在浏览器环境中，react-dom 负责将虚拟 DOM 转换为真实的 DOM 节点，并将其插入到指定的 HTML 元素中。

使用示例

// 导入 React 和 react-dom
import React from 'react';
import ReactDOM from 'react-dom/client';
import MyComponent from './MyComponent';// 获取根 DOM 元素
const root = ReactDOM.createRoot(document.getElementById('root'));// 将组件渲染到根 DOM 元素中
root.render(<MyComponent />);

3. axios

作用

axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境。它可以发送各种类型的 HTTP 请求（如 GET、POST、PUT、DELETE 等），支持请求和响应拦截器、转换请求和响应数据、取消请求等功能，并且在浏览器中可以自动处理 CORS（跨域资源共享）问题。

使用示例

import React, { useEffect, useState } from 'react';
import axios from 'axios';const DataFetchingComponent = () => {const [data, setData] = useState([]);useEffect(() => {const fetchData = async () => {try {// 发送 GET 请求const response = await axios.get('https://jsonplaceholder.typicode.com/posts');// 更新状态setData(response.data);} catch (error) {console.error('Error fetching data:', error);}};fetchData();}, []);return (<div><h1>Posts</h1><ul>{data.map(post => (<li key={post.id}>{post.title}</li>))}</ul></div>);
};export default DataFetchingComponent;

在上述示例中，DataFetchingComponent 组件使用 axios 发送一个 GET 请求来获取 JSONPlaceholder API 提供的文章数据，并将数据渲染到页面上。

---

5-两种node运行方式区别

nodemon --exec ts-node src/server/server.ts 对比 node dist/server/server.js

nodemon --exec ts-node src/server/server.ts 和 node dist/server/server.js 是两种不同的运行 Node.js 应用程序的方式，它们在使用场景、处理的文件类型、自动重启机制等方面存在明显区别，以下是详细分析：

1. 命令功能概述

• nodemon --exec ts-node src/server/server.ts：
  • nodemon 是一个工具，用于在开发过程中监测项目文件的变化。当文件发生更改时，它会自动重启 Node.js 应用程序，提高开发效率。
  • --exec 是 nodemon 的一个选项，用于指定执行命令。
  • ts-node 是一个 TypeScript 执行器，它可以直接运行 TypeScript 文件，而无需事先将其编译为 JavaScript。
  • src/server/server.ts 是要执行的 TypeScript 文件的路径。
• node dist/server/server.js：
  • node 是 Node.js 的运行时环境，用于执行 JavaScript 文件。
  • dist/server/server.js 是要执行的 JavaScript 文件的路径，一般 dist 目录是项目编译后生成的文件存放目录。

2. 详细区别

文件类型

• nodemon --exec ts-node src/server/server.ts：直接运行 TypeScript 文件（.ts），适用于 TypeScript 项目的开发阶段，开发者可以直接编写和运行 TypeScript 代码，无需手动编译。
• node dist/server/server.js：运行的是已经编译好的 JavaScript 文件（.js），通常是在项目开发完成后，经过 TypeScript 编译器（如 tsc）将 TypeScript 代码编译成 JavaScript 代码后执行。

自动重启机制

• nodemon --exec ts-node src/server/server.ts：使用 nodemon 工具，当 src/server/server.ts 文件或项目中其他相关文件发生变化时，nodemon 会自动重启应用程序，方便开发者实时看到代码修改后的效果。
• node dist/server/server.js：node 本身没有自动重启机制，当代码发生变化时，需要手动停止并重新运行应用程序。

运行环境和性能

• nodemon --exec ts-node src/server/server.ts：由于 ts-node 需要在运行时将 TypeScript 代码转换为 JavaScript 代码，会有一定的性能开销，不太适合在生产环境中使用，主要用于开发和测试阶段。
• node dist/server/server.js：直接运行已经编译好的 JavaScript 文件，性能较高，适合在生产环境中部署和运行。

依赖和配置

• nodemon --exec ts-node src/server/server.ts：需要安装 nodemon 和 ts-node 这两个依赖，并且可能需要进行一些配置，如配置 nodemon 的监测文件范围等。
• node dist/server/server.js：只需要 Node.js 运行时环境，无需额外的依赖，只要确保 JavaScript 文件是正确编译生成的即可。

3. 使用场景总结

• nodemon --exec ts-node src/server/server.ts：适用于 TypeScript 项目的开发阶段，开发者可以专注于编写代码，利用自动重启机制快速验证代码修改的效果。
• node dist/server/server.js：适用于项目的生产环境部署，将 TypeScript 代码编译成 JavaScript 代码后，使用 node 直接运行，以获得更好的性能和稳定性。

---

6-tsconfig.json中编译目标esnext和ES2020区别

tsconfig.json 文件用于配置 TypeScript 编译器的行为。下面详细分析你给出的两种配置的区别：

1. 目标 ECMAScript 版本（target）

• 第一种配置："target": "esnext"
  • 表示编译后的 JavaScript 代码将遵循 ECMAScript 最新版本的标准。这意味着 TypeScript 会尽可能保留现代 JavaScript 的语法特性，适合用于支持最新 JavaScript 特性的环境，如较新的浏览器或 Node.js 版本。
• 第二种配置："target": "ES2020"
  • 明确指定编译后的代码遵循 ECMAScript 2020 标准。这会将代码中的一些较新的语法特性转换为符合 ES2020 规范的代码，兼容性相对更好，但可能会失去一些更新的 JavaScript 特性。

2. 模块系统（module）

• 第一种配置："module": "nodenext"
  • 适用于 Node.js 环境，使用 Node.js 最新的模块解析规则。它支持 ESM（ES Modules）和 CommonJS 模块的混合使用，并且会根据文件扩展名（.mjs 或 .cjs）来决定使用哪种模块系统。
• 第二种配置："module": "commonjs"
  • 明确指定使用 CommonJS 模块系统，这是 Node.js 传统的模块系统，使用 require 和 module.exports 进行模块的导入和导出。

3. 类型定义（types 和 lib）

• 第一种配置："types": []
  • 表示不引入任何全局类型定义文件。通常在不需要额外的类型定义时使用，比如项目中没有使用第三方库的类型定义。
• 第二种配置："lib": ["ES2020", "DOM"]
  • 明确指定包含 ES2020 的标准库类型定义以及 DOM 相关的类型定义。这意味着在代码中可以使用 ES2020 的 API 和 DOM 相关的对象和方法，并且 TypeScript 会对其进行类型检查。

4. 输出目录和根目录（outDir 和 rootDir）

• 第一种配置：未指定 outDir 和 rootDir
  • 编译后的文件会默认输出到与源文件相同的目录结构中。
• 第二种配置：
  • "outDir": "./dist"：指定编译后的文件输出到 dist 目录下。
  • "rootDir": "./src"：指定源文件的根目录为 src 目录，这样可以确保编译后的文件目录结构与源文件目录结构保持一致。

5. 其他配置项差异

• 第一种配置：
  • "noUncheckedIndexedAccess": true：启用后，当访问对象的索引属性时，如果没有明确的类型定义，TypeScript 会发出警告，有助于避免潜在的运行时错误。
  • "exactOptionalPropertyTypes": true：要求可选属性的类型必须与赋值的类型完全匹配，增强了类型检查的严格性。
  • "jsx": "react-jsx"：指定使用 React 17 及以上版本引入的新 JSX 转换，需要配合 React 的新 JSX 运行时使用。
  • "verbatimModuleSyntax": true：确保模块导入和导出的语法在编译后保持不变，适用于使用 ESM 模块系统的项目。
  • "isolatedModules": true：要求每个文件都可以作为单独的模块进行编译，这在使用一些工具（如 Babel）进行编译时很有用。
  • "noUncheckedSideEffectImports": true：检查模块导入是否有副作用，如果有副作用但没有明确的类型定义，TypeScript 会发出警告。
  • "moduleDetection": "force"：强制 TypeScript 检测模块类型，确保模块的使用符合规范。
• 第二种配置：
  • "esModuleInterop": true：允许在 CommonJS 模块中更方便地导入 ESM 模块，解决了 ESM 和 CommonJS 模块之间的互操作性问题。
  • "forceConsistentCasingInFileNames": true：确保文件名称的大小写在整个项目中保持一致，避免在不同操作系统上因大小写敏感问题导致的编译错误。
  • "resolveJsonModule": true：允许在 TypeScript 代码中直接导入 JSON 文件，方便处理配置文件等。

综上所述，第一种配置更适合使用现代 JavaScript 特性和新的模块系统的项目，而第二种配置更注重兼容性和传统的 Node.js 开发方式。

---

4-单词释义

1-strict严格的

“strict”常见释义如下：

1. 严格的；严厉的

指对规则、要求等执行得非常认真，不允许有丝毫违反；也可用于形容人在管理、教导等方面要求很严。

• 例：Our parents were very strict with us.（我们的父母对我们要求非常严格。）
• 例：The school has strict rules about punctuality.（学校对准时到校有严格规定。）

2. 精确的；严密的

用于描述定义、解释、规则等非常精确、准确，没有模糊不清的地方。

• 例：You must follow the strict terms of the contract.（你必须严格按照合同条款办事。）
• 例：In strict logic, this argument is flawed.（从严密的逻辑角度来看，这个论点是有缺陷的。）

3. 完全的；绝对的

强调某种状态或情况是纯粹的、不掺杂其他因素的。

• 例：He’s a strict vegetarian and doesn’t eat any animal products.（他是个彻底的素食者，不吃任何动物制品。）

---

2-implicit隐晦的,含蓄的（noImplicitAny不容忍任何，发现就报错）

“implicit”常见释义如下：

1. 含蓄的；不直接言明的
   • 例句：an implicit threat（一个含蓄的威胁）
2. 内含的；固有的
   • 例句：The ability to think is implicit in our human nature.（思考能力是我们人类本性中固有的。）
3. 无疑问的；无保留的
   • 例句：implicit trust（绝对的信任）

---