JsweetA / dynamic-form

学习前端工程化的地方,其中包括rollup,webpack,组件库的封装,动态表单的封装,工程化的构建
3 stars 1 forks source link

关于.d.ts作用范围和tsconfig.json作用范围的问题 #1

Open JsweetA opened 12 months ago

JsweetA commented 12 months ago

当在根目录的 .d.ts 文件中声明 @monorepo/utils 时,它并不会自动地在 src 目录下的 index.vue 文件中生效。这是因为 TypeScript 默认只会解析与当前文件相同目录或子目录下的 .d.ts 文件。

要使根目录的 .d.ts 文件中的声明在 src 目录下的 index.vue 文件中生效,你可以采取以下几种方式:

  1. 使用相对路径引入:在 index.vue 文件中使用相对路径引入根目录的 .d.ts 文件。例如,如果根目录的 .d.ts 文件名为 global.d.ts,可以在 index.vue 文件中添加以下引入语句:
import '@/global.d.ts';

这样,根目录的 .d.ts 文件中的声明就会在 index.vue 文件中生效。

  1. 配置 TypeScript 编译选项:在 TypeScript 配置文件 tsconfig.json 中,可以将根目录的 .d.ts 文件包含到编译过程中。在 tsconfig.json 文件的 include 字段中添加根目录的 .d.ts 文件的路径。例如:
{
  "compilerOptions": {
    // ...
  },
  "include": [
    "src",
    "global.d.ts"
  ]
}

这样,根目录的 .d.ts 文件中的声明也会在 src 目录下的文件中生效。

  1. .d.ts 文件放置在与 index.vue 同级的目录:将根目录的 .d.ts 文件放置在与 index.vue 同级的目录中,这样它会被默认解析并在 index.vue 文件中生效。

请注意,以上方法只是使根目录的 .d.ts 文件中的声明在 index.vue 文件中生效的一些常见方式。具体的解决方法可能会因项目结构和配置而有所不同。

JsweetA commented 12 months ago

问题1:tsconfig.json 配置文件继承后再重写。

当 TypeScript 配置文件 tsconfig.json 继承了另一个 JSON 文件后,并且在继承的 JSON 文件中重写了 include 字段,新的 include 字段会覆盖原始配置中的 include 字段,而不是合并。

具体来说,如果在继承的 JSON 文件中重写了 include 字段,那么最终的配置将只包含重写后的 include 字段中的路径。原始配置中的 include 字段将被完全忽略。

例如,假设有以下两个配置文件:

tsconfig.base.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs"
  },
  "include": [
    "src"
  ]
}

tsconfig.json

{
  "extends": "./tsconfig.base.json",
  "include": [
    "tests"
  ]
}

在这种情况下,最终的配置将只包含 "include": ["tests"],而不会包含 "include": ["src"]。也就是说,tsconfig.json 中的 include 字段会覆盖 tsconfig.base.json 中的 include 字段。

因此,当继承了另一个 JSON 文件后,在继承的 JSON 文件中重写 include 字段时,请确保你提供了完整的路径列表,以便在最终的配置中包含所有需要的文件和目录。

问题2:tsconfig的作用范围

在 TypeScript 中,当存在多个 tsconfig.json 文件时,编译器会按照以下规则来确定使用哪个配置文件:

  1. 当在命令行中指定了 --project-p 参数来指定特定的配置文件时,编译器将使用该指定的配置文件。
  2. 如果没有指定特定的配置文件,编译器会在当前工作目录中查找最近的 tsconfig.json 文件,并使用该文件作为根配置文件。
  3. 如果存在嵌套的 tsconfig.json 文件,编译器会根据就近原则,逐级向上查找父目录,直到找到根配置文件为止。在这个过程中,编译器会将每个找到的配置文件视为子配置文件,并将其与父配置文件合并。

例如,假设存在以下目录结构:

- project
  |- tsconfig.json
  |- src
     |- tsconfig.json
  |- src
     |- file.ts

在这种情况下,当在 project/src/file.ts 文件所在的目录中执行 TypeScript 编译命令时,编译器会使用 project/src/tsconfig.json 作为配置文件,而不是使用根目录中的 project/tsconfig.json

总结来说,TypeScript 编译器会按照就近原则查找 tsconfig.json 文件,从当前工作目录开始逐级向上查找,直到找到根配置文件为止。如果存在多个配置文件,编译器会将它们合并,并使用最终的合并结果来进行编译。