前端面试题138（ts项目中，如何使用node_modules里面定义的全局类型包到自己项目src下面使用）

要在 TypeScript 项目中使用 node_modules 中的全局类型定义，并将其应用到项目的源代码 (src) 中，你可以按照以下步骤操作：

第一步：安装全局类型包

首先，你需要安装所需的全局类型包。这些类型包通常以 .d.ts 文件的形式存在，可以通过 npm 或 yarn 安装。例如，如果你想要使用 @types/react 类型定义，可以执行以下命令：

npm install --save-dev @types/react

或者使用 yarn:

yarn add --dev @types/react

第二步：配置 TypeScript

接着，你需要确保 TypeScript 编译器能够识别这些全局类型。这通常通过修改项目的 tsconfig.json 文件来完成。

1. 添加 typeRoots 或 types 配置

在 tsconfig.json 文件中添加 typeRoots 或 types 配置项来指定全局类型的位置。这里我们使用 types 作为示例：

{
  "compilerOptions": {
    // 其他编译选项...
    "types": ["node", "@types/react"]
  },
  "include": [
    "src/**/*"
  ]
}

• "types" 数组列出所有全局类型的名称。
• "include" 配置项指定了哪些文件会被 TypeScript 编译器考虑。这里设置为 "src/**/*" 表示编译器会考虑 src 目录下的所有文件。

2. 使用 import 语句

尽管这些类型是全局的，但在实际开发中，通常推荐显式地使用 import 语句导入类型。这样可以提高代码的可读性和可维护性。例如：

// src/components/MyComponent.tsx
import React from 'react';

interface Props {
  name: string;
}

const MyComponent: React.FC<Props> = ({ name }) => (
  <div>Hello, {name}!</div>
);

export default MyComponent;

在这个例子中，我们导入了 React 并使用它的类型定义来创建组件。

第三步：确保项目编译

最后，确保你的项目能够正确编译。运行 tsc 或者 npm run build（如果构建脚本已定义的话），检查是否有任何类型错误。

总结

1. 安装类型定义包：通过 npm 或 yarn 安装全局类型定义。
2. 配置 tsconfig.json：在 tsconfig.json 文件中添加 types 配置项。
3. 使用类型：在项目源代码中通过 import 显式地导入类型。

这样，你就可以在 TypeScript 项目中使用 node_modules 中的全局类型定义了。

记住，最好的做法是不要把包当成全局包来使用，即使它们是全局的。通过显式地导入所需的模块，
可以有助于工具如linters和bundlers更好地追踪依赖关系，并可以在以后的代码分析和维护中发挥
重要作用。
此外，全局变量或全局模块通常指的是在项目的多个部分中无需导入就可以直接使用的变量或模块。
如果你确实需要将某些模块定义为全局可用，并且无法通过导入来使用，你可能需要更新你的
TypeScript配置文件（ tsconfig.json ）来包括这些全局声明。但这通常不是一个推荐的做法，
因为它可能会导致命名冲突和代码可维护性问题。