首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使tsc在使用yarn工作区时仅加载从node_modules使用的类型

在使用yarn工作区时,可以通过以下步骤使tsc仅加载从node_modules使用的类型:

  1. 确保你的项目使用了yarn工作区。在项目根目录下的package.json文件中,添加"workspaces"字段,并指定工作区的路径。例如:
代码语言:txt
复制
"workspaces": [
  "packages/*"
]
  1. 在项目根目录下创建一个tsconfig.json文件,用于配置TypeScript编译器的选项。在tsconfig.json中,添加以下配置:
代码语言:txt
复制
{
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "declarationMap": true,
    "outDir": "dist",
    "rootDir": "src",
    "types": [],
    "typeRoots": [
      "./node_modules/@types"
    ]
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

解释一下这些配置项的含义:

  • "composite": true 表示启用项目的组合编译模式,以便在工作区中进行增量编译。
  • "declaration": true 表示生成声明文件(.d.ts)。
  • "declarationMap": true 表示生成声明文件的映射文件(.d.ts.map)。
  • "outDir": "dist" 表示编译输出目录。
  • "rootDir": "src" 表示源代码目录。
  • "types": [] 表示禁用自动加载类型声明文件。
  • "typeRoots": ["./node_modules/@types"] 表示只加载从node_modules中安装的类型声明文件。
  1. 在每个工作区的package.json文件中,添加以下配置:
代码语言:txt
复制
{
  "name": "your-package-name",
  "scripts": {
    "build": "tsc"
  },
  "devDependencies": {
    "typescript": "^4.4.3"
  }
}

这将确保在每个工作区中安装TypeScript作为开发依赖项,并且可以通过运行"yarn build"命令来编译工作区。

  1. 运行"yarn install"命令安装所有依赖项。
  2. 在每个工作区中的源代码目录(通常是src目录)中创建一个tsconfig.json文件,用于配置该工作区的TypeScript编译选项。根据你的项目需求进行配置。
  3. 在每个工作区中的源代码目录中编写你的TypeScript代码。
  4. 运行"yarn build"命令编译工作区。

通过以上步骤,你可以使tsc在使用yarn工作区时仅加载从node_modules使用的类型。这样可以提高编译速度,并避免加载不必要的类型声明文件。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云开发者平台:https://cloud.tencent.com/developer
  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版:https://cloud.tencent.com/product/cdb-for-mysql
  • 云原生应用引擎(TKE):https://cloud.tencent.com/product/tke
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云区块链服务(TBC):https://cloud.tencent.com/product/tbc
  • 腾讯云物联网平台(IoT):https://cloud.tencent.com/product/iotexplorer
  • 腾讯云移动开发平台(MPS):https://cloud.tencent.com/product/mps
  • 腾讯云音视频处理(MPS):https://cloud.tencent.com/product/mps
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

搭建node服务(三):使用TypeScript

本文将介绍如何在node服务中使用TypeScript。...@types/koa-router --save … 或者 yarn add @types/koa yarn add @types/koa-router … 二、 tsconfig.json 当使用tsc...四、 自定义类型 TypeScript 会自动 node_modules/@types 目录获取模块类型定义,引用模块都需要安装对应类型库,如: npm install @types/koa --...由于src/types/koa/index.d.ts自定义类型已经扩展了Koa.Request这两个属性,执行npm run build命令,使用 tsc 进行编译,可以编译成功。...但是当执行 npm run dev ,会提示编译错误,那是因为ts-node默认不会根据配置中files、include 和 exclude 加载所有ts文件,而是入口文件开始根据引用和依赖加载文件

2.8K20

搭建node服务(三):使用TypeScript

本文将介绍如何在node服务中使用TypeScript。... @types/koa-router --save … 或者 yarn add @types/koa yarn add @types/koa-router … 二、 tsconfig.json 当使用tsc...四、 自定义类型 TypeScript 会自动 node_modules/@types 目录获取模块类型定义,引用模块都需要安装对应类型库,如: npm install @types/koa --...由于src/types/koa/index.d.ts自定义类型已经扩展了Koa.Request这两个属性,执行npm run build命令,使用 tsc 进行编译,可以编译成功。...但是当执行 npm run dev ,会提示编译错误,那是因为ts-node默认不会根据配置中files、include 和 exclude 加载所有ts文件,而是入口文件开始根据引用和依赖加载文件

2.2K30

基于 Yarn Monorepo 实践

引入插件 参照 yarn 文档引入必要插件: Typescript 插件是用于改进使用体验,它会在你安装包 A 同时去尝试帮你安装其类型 @types/A,这里不多介绍。...,平时你可能需要用到以下技巧: 有时候变动依赖后某个工作不冲突依赖未提升到根目录 node_modules (https://www.yarnpkg.cn/cli/dedupe) yarn dedupe...workspace 插件给 yarn 提供了批量给工作(包)执行命令方式: yarn workspaces foreach .........但是它识别工作命令执行完成方式比较弱,就是进程退出,所以当我执行 yarn ws:dev tsc -w 编译挂起后使得拓扑执行就是个鸡肋了,而且控制台输出也不好。...据我自身经验来说 link 功能实现其实挺复杂,往往不是一个简单创建一个软链就可以,要考虑: 当加载到软链模块执行其 require ,require 加载常常会寻址到其自身 node_modules

1.5K20

TypeScript与Babel、webpack关系以及IDE对TS类型检查

简单来讲,webpack运行指定entry文件开始,顶层开始分析依赖内容,依赖内容可以是任何内容(只要是import或require了),而loader可以专门来处理各种类型文件。...babel-loader 前面我们简单介绍了如何使用babel对一份ts进行编译,那么webpack中,如何使用babel呢?...很难去指责 TypeScript 编译器,它在做很多工作。它在扫描那些包括 node_modules 在内类型定义文件(*.d.ts),并确保你代码正确使用。...譬如,有些类型定义文件哪里查找,是否允许较新语法等,这些配置依然是由tsconfig.json来提供,但若未提供,则IDE会使用一份默认配置。...babel部分处理,根类型没有根本关系,而类型检查使用tsconfig和tsc则只作用在类型检查部分,根ts代码编译没有任何关系。

44930

153.精读《snowpack》

浏览器完全模块化加载文件,不存在资源重复加载问题,这种原生 TreeShaking 还可以做到访问文件再编译,做到单文件级别的按需构建。...snowpack dev 命令几乎是零耗时,因为文件会在被浏览器访问进行按需编译,因此构建速度是理想最快速。...执行一次,可以用来做 lint,也可以用来配合批量文件处理命令,比如 tsc: "run:tsc": "tsc" "mount:*": "mount DIR [--to /PATH]" 将文件部署到某个...我们可以构建命令体会到 snowpack 理念,将源码以流式方式编译后,直接部署到本地 server 提供 URL 地址,浏览器通过一个 main 入口以 ESM import 方式加载这些文件...所以我们要看到未来趋势,也要理解当下存在问题,不要在生态尚未成熟时候贸然使用,但也要跟进前端规范化步伐,合适时机跟上节奏,毕竟 bundleless 模式带来开发效率提升是非常明显

56610

如何提升vscode扩展速度

您是否曾经注意到启动VS Code某些扩展需要一些时间来初始化?是什么导致这种延迟? 你能为这个做什么?实际上很多。和我在一起,看看如何帮助您最喜欢扩展程序快速加载!...使扩展更快 最近,VS Code团队发布了使用WebPack捆绑扩展文件功能。 本文涵盖了所有内容,并且可以在打包扩展提供帮助。 我发现我Peacock扩展程序包中放入了48个文件。...launch.json 该方法使我既可以使用webpack tsc进行编译,也可以进行测试和调试。...使用“ 保存收藏夹颜色 ” 保存用户定义颜色 通过使受影响元素变暗或变浅来调整它们颜色,以它们之间提供微妙视觉对比 将颜色保存到.vscode/settings.json文件中工作 它会产生什么样影响...调试器中本地运行扩展(并测试您是否可以遇到断点) 打包扩展并从菜单加载VSIX加载使用调试器运行测试(测试可以达到断点) 运行您测试脚本 npm test 完成后,您可以再次检查激活时间。

3.4K10

webpack打包typescript

一个新 TypeScript 文件中写下代码,它处于全局命名空间中,使用全局变量空间是危险,因为它会与文件内代码命名冲突 所以可以使用import或者export,在当前文件中创建一个本地作用域...// 使用export 在当前文件中创建一个本地作用域, 防止变量冲突 export { } 但是当我使用命令tsc tsc05.ts -w运行生成一个js文件使用标签导入进html...我之前运行生成js使用都是tsc命令直接生成,但是在有些情况下,生成js文件直接引入浏览器中是不支持,所以平时练习可以使用,如果到正式项目中最好还是使用webpack等打包工具进行打包生成...,一般是取最新版本来使用安装方式是yarn安装,当然大家也可以直接用npm或者cnpm进行安装,都是较为简单 命令: yarn add webpack webpack-cli 基础配置中,...此错误翻译为:无法加载类型脚本。尝试使用“添加类型脚本”或“npm安装类型脚本”安装。

2.1K00

TypeScript必知三部曲(一)TypeScript编译方案以及IDE对TS类型检查

tsc编译错误代码 可以结果很清楚看到,使用tsc编译错误代码时候,tsc类型检查帮助我们找到了代码错误点,符合我们预期。...很难去指责 TypeScript 编译器,它在做很多工作。它在扫描那些包括 node_modules 在内类型定义文件(*.d.ts),并确保你代码正确使用。...于是,babel编译方案中,整个体系如下: 主流IDE对TS项目如何进行类型检查 不知道有没有细心读者使用IDEA时候,会发现如果是IDE当前打开TS文件,IDEA右下角会展示一个typescript...当然,你也可以IDE中手动切换: 最后,我们简单梳理下IDE是如何在对应代码位置展示代码类型错误,流程如下: 但是,同样是IDE中ts类型检查也要有一定依据。...譬如,外部库类型定义文件哪里查找,是否允许较新语法等,这些配置依然是由tsconfig.json来提供,但若未提供,则IDE会使用一份默认配置。

39620

Angular10配置webpack打包 「详细教程」

使用CLI创建一个新Angular项目 零搭建Angular10项目 先决条件 开始之前,请确保你开发环境已经包含了 Node.js® 和 npm 包管理器。...第二步:创建工作和初始应用 Angular 工作就是你开发应用的上下文环境。 每个工作包含一些供一个或多个项目使用文件。 每个项目都是一组由应用、库或端到端(e2e)测试构成文件。...如果你使用yarn 客户端,那么该文件就是 yarn.lock。 src/ 根项目的源文件。 node_modules/ 向整个工作空间提供npm包。...新生成应用包含一个根模块源文件,包括一个根组件及其模板。 当工作空间文件结构到位,可以命令行中使用 ng generate 命令往该应用中添加功能和数据。...允许您添加一些块(例如,单元测试块) chunksSortMode {String、Function} auto 允许控制将块包含到HTML中之前应如何对其进行排序。

4.8K20

TypeScript学习笔记(三)—— 编译选项、声明文件

但是能直接使用tsc命令前提,要先在项目根目录下创建一个ts配置文件 tsconfig.json tsconfig.json是一个JSON文件,添加配置文件后,只需只需 tsc 命令即可完成对整个项目的编译...目录下使用tsc --init 生成tsconfig.json文件 1.1、tsconfig.json 作⽤ ⽤于标识 TypeScript 项⽬根路径; ⽤于配置 TypeScript 编译器...抛出错误 "noUnusedParameters": true, // 有未使参数,抛出错误 "noImplicitReturns": true, // 并不是所有函数⾥代码都有返回值...: true 配置可以 typescript 工程使用这些库,但是没法知道库里面变量类型以及方法参数类型,很不友好。...我们期待: Vscode 开发,只要敲出方法,编辑器可以自行提示该方法参数类型是什么,这样我就不会把原本该写成数值类型参数写成字符串类型了,大大降低代码出错风险。

2.4K20

手把手搭建koa2后端服务器-项目初始化

// 安装类型提示 yarn add -D @types/koa @types/koa-router 安装 typescript、ts-node // 因为我们用 ts 来开发,所以需要 ts-node...来运行项目 yarn add -D ts-node typescript 配置 ts tsc --init tsconfig.json 文件中将 target 修改为 EXNEXT,moduleResolution...项目结构调整 koa2可以完全使用单文件开发服务器,但是我相信没有人会这样做,为了方便开发,我们需要调整项目结构,使项目目录清晰明朗,为后期扩展打下基础。..."watch": ["src/**/*.ts"], // 忽略目录 "ignore": ["node_modules"], // 执行命令 "exec": "ts-node.../src/main.ts", // 监听文件后缀 "ext": "ts" } 配置环境变量读取 yarn add dotenv yarn add -D @types/dotenv 加载环境变量

1.9K20

Bun 1.0 发布了,以后 Node.js 项目谁还用 Webpack 与 pnpm?!是时候祭出大杀器 Bun了(一)

2,为了解决 JS 类型问题,发明了 TypeScript,并由此诞生了.ts 文件及编译 ts 文件 tsc、babel 编译器。...、style-loader、url-loader、font-loader、svg-loader 等,不要纠结它们名字,只需要知道这些加载器都是针对某一个文件类型预处理程序就可以了。...如果你没有遇到过,只能说你还没有走到工程化前沿,边缘地带什么地雷都可能踩到。 7,为了解决包冲突问题,大牛程序员发明了 yarn。一般情况下,团队规范能被允许使用 yarn,就不会使用 npm。...于是,团队规范允许情况下,能使用 pnpm,就不使用 yarn 和 npm。...我选了我博客项目,使用下面的指令依次清扫上次安装留下痕迹: rm -rf node_modules pnpm-lock.yaml rm -rf node_modules yarn.lock rm -

1.5K20

都 2022 年了,手动搭建 React 开发环境很难吗?

配置文件 yarn tsc --init 根据需要,稍微改改后如下: // tsconfig.json { "compilerOptions": { "target": "ES2015...scripts/webpack.prod.js", + "ts:checker": "tsc --noEmit", 同时安装一下 cross-env,该模块主要是用于支持不同操作系统下保证环境变量正确...Home 页面,按需加载对应组件 另外由于拆包之后可能组件容易因网络抖动原因加载失败,所以还需要做自动重试拉取组件方案,这里也不赘述了,参考之前写文章:《性能优化竟白屏,难道真是我锅?》.../ 文件夹,因为只需要在该文件夹下处理 Arco Design *.less 样式文件,我们自己项目推荐使用 *.scss 来编写。...整一个自己搭建过程还是非常麻烦,步骤较多,因此这种重复工作可以直接放到团队项目脚手架“模板”中,其他同学初始化一个项目就可以开箱即用,这对于统一团队研发风格和提升质量都有好处。

4.7K40

Deno: 你并不总是需要NodeJS

并且根据 yarn 官方文档说明,yarn 会忽略依赖包内 yarn.lock,支持 top-level yarn.lock。...require 需要处理多种情况 Y 目录下 require(X) : 如果 X 是内置模块,加载该模块; 如果 X 以 / 开头,设置 Y 为文件系统根部 (root); 当 X 以 ./..., / , ../ 开头加载该文件或者加载该目录; 否则加载 node_modules 目录下模块: LOAD_NODE_MODULES(X, dirname(Y)) 用一幅图来开涮一下 node_modules.../service.js"; // 绝对路径导入 import X from "/index.js"; Node 当中一些引用语法, Deno 当中并不得到支持。..."world"; return ssr(() => ); }); 总结 受限文章长度,deno 事件处理, Rust 当中也可以作为独立应用使用,以及如何

69910

手摸手学会搭建一个 TS+Rollup 初始开发环境

例如:tsdx、create-react-app,对于一些个人小项目来说实在是显得又有些臃肿,如果抛开这些 CLI 工具,自己手动 0 到 1 手动搭建一个小而美的 NPM 包开发环境需要做哪些工作?.../index.ts 是 Typescript 类型,最重要是我们需要打包给用户,以支持 TS 环境下代码提示,有助于提升研发效率 yarn add typescript -D 然后初始化快速生成一个.../node_modules/.bin/eslint --init image 这样项目的根目录就有一个 .eslintrc.json 配置文件, 然后可以根据自己需要去修改 ESlint 一些规则.../node_modules/.bin/eslint --fix --color", "git add" ] }, 这样配置好了后,开发者 git commit ,会首先调用 lint-staged...总结 梳理了初始化构建一个工程项目中需要做事情,涉及打包构建、开发、Git、发包内容, 0 到 1 愉快地完成了项目的初始化,后续就可以更加愉快地开发了。

1.8K30

TypeScript增量编译

我们使用Node.js开发服务端通常会使用TypeScript来开发大型项目,但是使用ts-node进行全量编译时经常遇到编译速度慢问题,通常是修改一行代码编译两分钟。...这时我们需要使用增量编译来优化编译速度,及其他文件项目启动进行全量编译,开发修改了哪个TS文件就编译成对应JS文件。...很多同学使用ts开发使用到了ts路径别名,使用了module-alias插件来解决,但是dist下package.json 需要额外修改,具体node.js中使用路径别名可以参考这篇文章TypeScript...,并且tsc结束后可以直接退出 Demo地址 一个Koa+TypeScript模板,ORM使用Sequelize,TS添加了增量编译以及类型别名,Koa也基本调试好,自动引入Router以及配置了静态文件...any 类型 "watch": true }, "include": ["src"], "exclude": ["node_modules", "**/*.d.ts"] }

1.3K40
领券