{"_id":"@atom-web/tsconfig","name":"@atom-web/tsconfig","dist-tags":{"latest":"1.0.4-beta.0"},"versions":{"1.0.4-beta.0":{"name":"@atom-web/tsconfig","version":"1.0.4-beta.0","description":"> description: tsconfig的最佳实践","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":[],"author":"","license":"MIT","gitHead":"3a4fcd920a409ba5bee89725bd1600b3909c1e07","_id":"@atom-web/tsconfig@1.0.4-beta.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/5.4.2/node@v14.16.1+x64 (darwin)","dist":{"integrity":"sha512-hX5W+cC+AXhjPLHYkNuUsA3xiI3Q5jHOUlSfS8QApB7CqeyCAdDMNrWT2DnhU+hpQhPAlVfUc5DnJiypPCjZDA==","shasum":"b37eeed4afea5257f3dd4076937b2133ca3d808c","tarball":"https://registry.npmjs.org/@atom-web/tsconfig/-/tsconfig-1.0.4-beta.0.tgz","fileCount":4,"unpackedSize":19384,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWrVVV6kaR4H5Yh+2qI3oQk/A9wjdKz2i32I7lkD69IwIhAL513vhi9WuFhEHrQje3A33awX39czZg9I1aC3K3N4Ez"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi+yzzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCvQ/+Ofmx38+XupO5FkQDqxYSmT8GQcHpMjfSMMCynZUjoB8b9QiZ\r\nAP8dLWFxD/7DT79+zyRtsYS9vzmHGD7f6Xr3m7cmAk6JZcztUGDZEQFyfJQr\r\nJXj4Wvpt11zRvtSsXnVKjjBKKPDOJWrMQW6EI+mzeK3T2RLtNgJncmkzwpB+\r\nvYyPAviLe3oBhEN/x2e+JG5rnUYQ7FnCstpplEHcEAmTClw9jBBNLFqsP75E\r\n67X3pCXw+N9n2PAQZIvTmkFkd0p/dyPcbX2T5VPRUPY8B3gHMUzJgTy56AGb\r\ncBU5ybiv9vjMquCa5ZYyzLCBV95BoT+GHbjC/gAwxcdXhK7JW/9yHjW55vB2\r\n8PEaMAxURUjAx2oVblsRvTSYRBDpf08Wj/TXr8UuUqbrzxgvPDCLqiRfNSot\r\nyd7RXg42JLeKfQp5cZcU6aDfR8Aiwe2aMhJnXENwNtC7GrHAZfndq9IhfI5T\r\nzVYUYt6LBJBaYTx2Ft7lSPfHc/9fPSPrXOlokaMoL5P4wBtaEuWgSBN1GXH6\r\nfmzE/6QHf1RqakvIXdOF0xb6oC5AB7NNAzgCm6Snbfq0oeyY/eZDcWis0gIL\r\nizKLysWD8kwd1Esh+BAACxs9Wv9jDn+nRdNlkbXwVuhtX7kMF9ZhSmDn69YL\r\n45irBT/nfzpACwXZ2S053TtFAMYUVh/lj0Q=\r\n=8QZJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hit-licj","email":"17611269916@163.com"},"directories":{},"maintainers":[{"name":"hit-licj","email":"17611269916@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tsconfig_1.0.4-beta.0_1660628211425_0.8544155409661351"},"_hasShrinkwrap":false}},"time":{"created":"2022-08-16T05:36:51.375Z","1.0.4-beta.0":"2022-08-16T05:36:51.626Z","modified":"2022-08-16T05:36:51.775Z"},"maintainers":[{"name":"hit-licj","email":"17611269916@163.com"}],"description":"> description: tsconfig的最佳实践","keywords":[],"license":"MIT","readme":"# `tsconfig`\n\n> description: tsconfig的最佳实践\n\n- 本包提供基础的typescript config;\n- 收纳各种配置的解释说明（构建的知识网）；\n\n## 配置解释\n\n#### 建议配置\n> moduleResolution (建议： \"Node\")\n- 共有两种可用的模块解析策略：Node和Classic。 你可以使用 --moduleResolution标记来指定使用哪种模块解析策略。若未指定，那么在使用了 --module AMD | System | ES2015时的默认值为Classic，其它情况时则为Node。\n**优先级ts --> tsx --> d.ts； 读取package.json里面的types属性**\n- 详细教程见[模块解析](https://www.tslang.cn/docs/handbook/module-resolution.html)\n> strict (建议：strict)\n- 启用所有严格类型检查选项。\n- strict相当于启用 \n  - noImplicitAny, \n    - 在表达式和声明上有隐含的 any类型时报错。\n  - noImplicitThis,\n    - 表示当 this 表达式值为 any 类型时生成一个错误信息\n  - alwaysStrict，\n    - 以严格模式解析并为每个源文件生成 \"use strict\"语句\n  - strictNullChecks\n    - 在严格的 null检查模式下， null和 undefined值不包含在任何类型里，只允许用它们自己和 any来赋值（有个例外， undefined可以赋值到 void）。\n  - strictFunctionTypes\n    - 禁用函数参数双向协变检查。(todo)\n  - strictPropertyInitialization\n    - 确保类的非undefined属性已经在构造函数里初始化。若要令此选项生效，需要同时启用--strictNullChecks。\n\n> esModuleInterop (建议：true)\n- 由于cjs里面是没有default\n- 当esm引入cjs时（import React from \"react\"）编译报错\n- tsc/babel/webpack都有兼容处理 \n- esModuleInterop为true开启\n**module为esm时失效**\n- 相关文档：\n  - [由 allowSyntheticDefaultImports 引起的思考](https://blog.leodots.me/post/40-think-about-allowSyntheticDefaultImports.html)\n\n> allowSyntheticDefaultImports(建议：true)\n- 允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出，仅为了类型检查。\n- 说明：见esModuleInterop\n- 相关文档：\n  - https://blog.leodots.me/post/40-think-about-allowSyntheticDefaultImports.html\n\n> forceConsistentCasingInFileNames(建议：true)\n- 禁止对同一个文件的不一致的引用。\n- 设置为true时，将强制区分大小写。默认为false。\n```typescript\n//2a.ts\nexport const PI = 3.1415926;\n//1a.ts\nimport {PI} from './2A.ts';\nfunction fun(){\n  return PI;\n}\n```\n以上代码默认可以通过，当强制文件区分大小写时，则提示错误 '2a' !== '2A'\n\n> skipLibCheck\n- 忽略所有的声明文件（ *.d.ts）的类型检查。\n- 一个常见的错误是，类型校验结果中，有 node_modules 第三方包的类型报错。解决方案是：第三方包的 types 指\n\n#### 建议按照默认配置\n> allowJs (建议：false[默认值])\n- JS文件（.js和.jsx）也被包含进来如果allowJs被设置成true\n- 编译器默认包含当前目录和子目录下所有的TypeScript文件（.ts, .d.ts 和 .tsx），排除在\"exclude\"里指定的文件\n\n> typeRoots (建议：不要配置)\n- 默认所有可见的\"@types\"包会在编译过程中被包含进来。 node_modules/@types文件夹下以及它们子文件夹下的所有包都是可见的； 也就是说， ./node_modules/@types/，../node_modules/@types/和../../node_modules/@types/等等。\n- 如果指定了typeRoots，只有typeRoots下面的包才会被包含进来。 比如：\n```json5\n{\n   \"compilerOptions\": {\n       \"typeRoots\" : [\"./typings\"]\n   }\n}\n```\n- 若需要添加自定义包的目录\n建议\n```json5\n{\n   \"compilerOptions\": {\n       \"typeRoots\" : [\"./typings\", \"node_modules/@types\"]\n   }\n}\n```\n> types\n如果指定了types，只有被列出来的包才会被包含进来。 比如：\n```json5\n{\n  \"compilerOptions\": {\n    \"types\" : [\"node\", \"lodash\", \"express\"]\n  }\n}\n```\n- 这个tsconfig.json文件将仅会包含 ./node_modules/@types/node，./node_modules/@types/lodash和./node_modules/@types/express。/@types/。 node_modules/@types/*里面的其它包不会被引入进来。\n指定\"types\": \n- []来禁用自动引入@types包。\n\n**注意，自动引入只在你使用了全局的声明（相反于模块）时是重要的。 如果你使用 import \"foo\"语句，TypeScript仍然会查找node_modules和node_modules/@types文件夹来获取foo包。**\n> preserveConstEnums (建议： false[默认值])\n- 在默认情况下，使用 const 修饰符后，枚举不会生成映射代码。\n- 如下，我们可以看出：使用 const 修饰符后，编译器不会生成任何 RequestMethod 枚举的任何映射代码，在其他地方使用时，内联每个成员的值，节省很大开销。\n```typescript\nconst enum RequestMethod {\n  Get,\n  Post,\n  Put,\n  Delete\n}\n\nlet methods = [\n  RequestMethod.Get,\n  RequestMethod.Post\n]\n```\n- 编译结果\n```typescript\n\"use strict\";\nlet methods = [\n  0 /* Get */,\n  1 /* Post */\n];\n```\n- 当然，我们希望生成映射代码时，也可以设置 tsconfig.json 中的配置，设置 preserveConstEnums 编译器选项为 true ：\n```json5\n{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n      \"preserveConstEnums\": true\n  }\n}\n```\n- 最后编译结果变成：\n```javascript\n\"use strict\";\nvar RequestMethod;\n(function (RequestMethod) {\n  RequestMethod[RequestMethod[\"Get\"] = 0] = \"Get\";\n  RequestMethod[RequestMethod[\"Post\"] = 1] = \"Post\";\n  RequestMethod[RequestMethod[\"Put\"] = 2] = \"Put\";\n  RequestMethod[RequestMethod[\"Delete\"] = 3] = \"Delete\";\n})(RequestMethod || (RequestMethod = {}));\nlet methods = [\n  0 /* Get */,\n  1 /* Post */\n];\n```\n\n#### 其他配置\n> Reference\n- 前端项目和后端node项目在同一个git仓库下开发，两个项目依赖同一个配置文件，但我们希望前后端项目进行灵活的分别打包，那么我们可以配置reference\n\n> baseUrl和paths\n- 最合适做法是将相对路径维护在tsconfg.json的baseUrl和paths中，后续其他配置都读取tsconfig。\n**需要注意，paths只影响tsc编译，但不会对输出内容进行修改。也就是说，ts-loader(或babel-loader)输出的js文件还会是基于相对路径引入的。如果webpack不配置对应的alias，后续构建将会出错。**\n- [基于baseUrl和paths引入模块](https://www.tslang.cn/docs/handbook/module-resolution.html)\n## 参考文档\n- [esModuleInterop 到底做了什么？](https://zhuanlan.zhihu.com/p/148081795)\n- [由 allowSyntheticDefaultImports 引起的思考](https://blog.leodots.me/post/40-think-about-allowSyntheticDefaultImports.html)\n- [如何用 Project Reference 优化 tsc 编译性能](https://juejin.cn/post/7129130418657296421)\n- [漫谈 Typescript 研发体系建设](https://zhuanlan.zhihu.com/p/86276764)\n","readmeFilename":"README.md"}