在普通的 create-react-app --template typescript 文件夹中安装 eslint 失败
我正在尝试将 eslint 安装到从 TypeScript 模板创建的普通 create-react-app 文件夹中。 我运行了以下命令： % npx create-react-app REDACTED --模板打字稿
尽管已安装，但找不到模块“@tanstack/react-table”
我正在开发一个 TypeScript React 项目，我正在尝试从 columns.tsx 文件中的 @tanstack/react-table 导入 ColumnDef。 从“@tanstack/react-table”导入{ColumnDef}； 出口...
Draggable React typescript 扩展组件
我是 React 和 Typescript 的初学者。想要制作一些带有拖动效果的很酷的打开窗口。找到draggable包，但我不明白如何像扩展组件一样使用它。 从电话里写信...
React 复选框事件和处理程序的 Typescript 类型？
我正在 Typescript 中构建类似 React 示例的东西。目标是让父组件具有状态，并且它创建几个无状态子组件，将它们的点击传递回父组件...
Typescript、React、强类型 useHistory
我将 useHistory (react-router-dom) 变量作为参数发送到employee.service，其中我使用带有状态和路径名的“history.push”方法。不幸的是我不能...
为什么我会在 React/TypeScript/MUI 对话框中看到这种奇怪的行为？
我在 React/TypeScript/MUI 应用程序的流程中出现了一个对话框，其中显示了几个按钮。当您选择每个按钮时，对话框功能会将按钮的值添加到状态...
我想模拟一个已被记忆的React组件。我正在使用 React 18.2 和 Jest 29.7 以及 Typescript，以防万一。我已经尝试了几种方法，但似乎找不到有效的方法......
添加plugin:@typescript-eslint/recommended-requiring-type-checking后，提示tsconfig中未包含该文件
我用 npx create-react-app my-app --template typescript 创建一个项目，然后我向其中添加打字稿类型检查，但我的 App.tsx 报告以下错误： 解析错误：ESLint 已配置...
React-Redux useSelector typescript type for state
我正在使用 React-Redux 中的 useSelector(state => state.SLICE_NAME) 挂钩，但是我在定义状态参数时遇到了困难。它默认设置为未知，因此当我尝试时会收到错误...
如何在 React 中使用带有 className 属性的 TailwindCSS 实用程序类
我为 React 创建了一个模板（样板）存储库，它提供 ESLint、Typescript、TailwindCSS 和 Jest 测试，并使用 Webpack 构建。 然而，TailwindCSS 实用程序类不...
出于某种原因，在 React 18 和 Typescript 5.x 中，我似乎无法访问通过上下文包装器明确设置和定义的 ref 的属性。我有这样的事情： 帕...
React：[eslint]第0行：解析错误：DeprecationError：'originalKeywordKind'自v5.0.0以来已被弃用，无法再使用
我正在尝试将 TypeScript 集成到我用 CRA 创建的 React 项目中。 我一直有以下错误： 第 0 行：解析错误：DeprecationError：'originalKeywordKind' 已被弃用...
在 React + Typescript 中将 ref 传递给子级
我有一个应用程序，我需要在其中管理对输入的关注，为此我使用 React ref。 我有两个输入想要移动到一个单独的组件中。现在它们看起来如下： <...
在我的 React Typescript 应用程序中，我收到此错误。 webpack 编译时出现 1 个警告 src/App.tsx 中出现错误：30:21 TS2304：找不到名称“DecompressionStream”。 28 | 28 const enc = new TextEncoder()...
Typescript 无法与 tsconfig.json 一起使用
在项目中使用 tsconfig 运行 tsc --watch 时，出现以下错误。 它需要 Node js 中的 React 和 Redux 类型。 错误 TS2688：找不到“abstract-leveldow...”的类型定义文件...
使用 Redux 和 Typescript，如何正确键入“mapStateToProps”函数以仅允许通过状态传递 3 个参数中的 2 个？
我正在将 React 18 与 Redux 8 和 Typescript 结合使用。我想创建一个组件，允许调用者传入其中一个参数，但其他两个参数是从状态派生的。所以我创建了
相当于 @typescript-eslint 中的 noUnusedParameters
我正在努力改善React+TS项目的开发者体验。我发现 noUnusedLocals 和 noUnusedParameters 对于该项目非常有用，但这些规则使开发变得复杂，尤其是......
使用 Vite 在 React 应用程序的终端中显示错误和警告
我用React和TypeScript创建了一个Vite应用程序。我注意到终端中没有出现警告或错误，即使实际上存在错误。错误显示在浏览器控制台中，b...
我正在开发一个 React/Typescript 项目。我有一个 Autocomplete 元素，其选项是一系列包含 {label、value 和 endOfDay} 的对象。我有选项标签显示...
Typescript React Stripe 卡元素不渲染。没有错误
和标题一模一样。我一直在尝试弄清楚如何在我的项目中使用 Stripe，但不断遇到障碍。我有一个非常简单的订阅模型，我只是想获得......
类型“IntrinsicAttributes & RefAttributes<any>”上不存在属性“XXX”
我将编码作为一种爱好，并且正在使用 TypeScript 构建一个 React 网站。我找到了一个免费的 Material UI 模板，我正在尝试将其集成到现有代码中。模板是用
React中react-router-dom最新版本如何实现延迟加载
我想使用Typescript在React中实现延迟加载。我收到打字稿错误。 常量应用程序 = () => { 返回 （ 我想使用 Typescript 在 React 中实现延迟加载。我收到打字稿错误。 const App = () => { return ( <RouterProvider router={createBrowserRouter( createRoutesFromElements( <Route> <Route path="/" element={<Outlet/>}> <Route index element={<Home />} /> <Route path="contact" element={<Contact />} /> <Route path="about" element={<About />} /> <Route path="*" element={<Navigate to="/" replace />} /> </Route> </Route> ) )} /> ) }; export default App; 下面的代码不起作用 <Route> <Route path="/" element={<Outlet/>}> <Route index lazy={() => import("./Home")} /> <Route path="contact" lazy={() => import("./Contact")} /> <Route path="about" lazy={() => import("./About")} /> <Route path="*" element={<Navigate to="/" replace />} /> </Route> </Route> const Home= lazy(() => import("./screens/home")); const About= lazy(() => import("./screens/about")); <Route> <Route path="/" element={<Outlet/>}> <Route index element={<Suspense fallback={<div>Loading...</div>}> <Home/> </Suspense> /> } /> <Route path="about" element={<Suspense fallback={<div>Loading...</div>}> <About/> </Suspense> /> } /> <Route path="*" element={<Navigate to="/" replace />} /> </Route> </Route>
完整错误： 并非所有成分都是 'T | 类型((value: SetStateAction) => void)' 是可调用的。 “T”类型没有呼叫签名。 概括： 我正在尝试创建一个 useStateIfMounted c...
有没有办法让 TypeScript 正确推断一个对象的属性与另一个对象相关？
我在React应用程序中有一个ModalContext来打开对话框，它需要一个带有组件和道具键的对象，我希望打字稿能够正确推断道具与组件相同...
如果实际数据体与定义的类型不同，有没有办法修改TypeScript（React）中的响应数据？
我目前正在为我的公司构建一个电子商务应用程序。正如标题所示，我面临着这样的问题： 通常，我的 API 调用的产品类型类似于： 内容： [
我有这段代码在“typescript”中运行良好：“3.8.3” 升级到 Angular 10 和 "typescript": "4.0.8" 后，我看到一些 typescript 错误：
在使用 TypeScript 进行 React 时，输入字段在“值”处给出错误
从“react”导入{SetStateAction，useState} const 登录表单 =() =>{ const [名称，setName] = useState(); const [全名，setFullname] = useState import { SetStateAction, useState } from "react" const Loginform =() =>{ const [name, setName] = useState<String | null>(); const [fullname, setFullname] = useState<String | null>(); const inputEvent =(event: { target: { value: SetStateAction< String |null | undefined >; }; })=>{ setName(event.target.value) } const Submit = ()=>{ setFullname(name) } return <> <h1>Enter Your Name </h1> <input type="text" placeholder="Enter your name" onChange={inputEvent} value={name}/> <button onClick={Submit}>Submit</button> <h1>Hi {fullname==null? "Guest" :fullname}</h1> </> } export default Loginform <input type="text" placeholder="Enter your name" onChange={inputEvent} value={name}/> 上一行中的“value”属性显示错误 这是错误详细信息： (property) React.InputHTMLAttributes<HTMLInputElement>.value?: string | number | readonly string[] | undefined Type 'String | null | undefined' is not assignable to type 'string | number | readonly string[] | undefined'. Type 'null' is not assignable to type 'string | number | readonly string[] | undefined'.ts(2322) index.d.ts(2398, 9): The expected type comes from property 'value' which is declared here on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>' 也尝试写 return as any。或者尝试添加 string[]，但出现错误。 进行以下调整： 将 String 替换为 string，因为原始 Typescript 类型是小写的 (number, string, boolean, etc) TypeScript 报告此错误，因为属性值不接受 null 作为值，而是接受 undefined。将代码更新为： const [name, setName] = useState<string>() 这会使用 string 作为默认类型来初始化状态。 初始状态隐式地被视为 undefined，因为如果未显式提供，TypeScript 会将类型的默认值设置为 undefined。 为了简单起见，您不需要解构事件。使用内联函数，如下例所示： <input type="text" placeholder="Enter your name" onChange={(e) => setName(e.target.value)} value={name}/> 我使用你的代码创建了一个 CodeSanbox，它似乎只需要很少的修改就可以正常工作。 您可以在这里找到沙盒 这是我想出的代码 import { SetStateAction, useState } from "react"; const Loginform = () => { const [name, setName] = useState<string | null>(); const [fullname, setFullname] = useState<string | null>(); const inputEvent = (event: { target: { value: SetStateAction<string | null | undefined> }; }) => { setName(event.target.value); }; const Submit = () => { setFullname(name); }; return ( <div> <h1>Enter Your Name </h1> <input type="text" placeholder="Enter your name" onChange={inputEvent} value={name} /> <button onClick={Submit}>Submit</button> <h1>Hi {fullname == null ? "Guest" : fullname}</h1> </div> ); }; export default Loginform;
OpenAPI 生成器 - typescript - 如何设置 API 密钥？
使用 OpenAPI typescript Generator，如何设置 API 密钥？ 这是使用 typescript-fetch 生成器执行此操作的方法 const api = new DefaultApi(新配置({ apiKey: apiEndpoints.
'tslib'是一个'typescript'库，它怎么会比'typescripts'下载次数更多？ 如果不使用“typescript”，则无法使用“tslib”。 使用“typescript”并不意味着“tslib”是...
// @ts-ignore 注释使 TypeScript 编译器能够忽略其下面的行。 如何使用 TypeScript 忽略一整段代码？
为什么 @typescript-eslint/no-redeclare 规则指示误报？
我有一个 typescript 项目，其中通过 eslint 和 typescript-eslint 支持 linting。 请注意，这只是一个最小的工作示例。 这是一个repl链接 索引.ts 函数 testfn（值：...
从 TypeScript 的 esLint 中删除函数警告中缺少返回类型
我正在将 eslint 与 TypeScript 结合使用。 我想关闭对函数显式返回类型的检查。 我已在 .eslintrc.js 中的规则中添加了属性“@typescript-eslint/exp...
自动完成功能不适用于 VSCode 中的 TypeScript + Node
所以如果我编写纯 JS (.js)，它的工作方式如下： 但对于 TypeScript (.ts) 它不起作用：
使用 typescript-eslint 创建自定义规则时可以访问常量值吗？
我正在尝试使用 @typescript-eslint/utils 添加自定义 ESLint 规则，以在 Category 的 prop 类型与正则表达式不匹配时显示警告： 从'@typescript-eslint导入{ESLintUtils，TSESTree}...
获取 typescript-eslint 来检测纱线存储库中的单次运行模式
我在大约 20 个 TypeScript 项目的 monorepo 中遇到了 typescript-eslint 内存不足错误。这是一个已知问题，缓解措施之一是启用单次运行检测...
我一直在使用 TypeScript 装饰器，但只是没有运气让它们工作。我读过如何实现打字稿装饰器？还有http://blog.wolksoftware.com/decorators-reflection-
如何定义typescript类型多维矩阵嵌套数组 每层每个数组元素的长度仍然相同？ 类型固定数组 = T[] & { 冷...
我在 Pinia 商店中有一些 Vue3 (CompositionAPI) 代码，但更具体地说，这是一个 TypeScript 问题。 代码如下所示： 导出 const useCommonStore = DefineStore("common",...
我有一个 eslint 配置，它扩展了其他一些配置。这些包依赖于“@typescript/eslint-plugin”，但它们使用不同的版本。 扩展：['airbnb', 'airbnb-typescript', '@some-p...
在 `@typescript-eslint/parser` AST 中获取超类引用
给定以下类层次结构： 类 Foo { foo成员= 1； } 类 Bar 扩展 Foo { 酒吧成员 = 2; } @typescript-eslint/parser 的 AST 输出将 extends Foo 语句引用为
Jest + TypeScript + Babel 未知选项：.0
我使用 Jest 为我的一些 Fauna DB 操作编写了一个集成测试。我尝试测试的源代码 (fauna.ts) 和测试本身 (fauna.test.ts) 都是 TypeScript 文件。我已经
是否可以在网页中嵌入 TypeScript 代码？我想将 TypeScript 代码嵌入到脚本标签中，如下所示（以便它自动编译为 Javascript）： <p>是否可以在网页中嵌入 TypeScript 代码？我想将 TypeScript 代码嵌入到脚本标签中，如下所示（以便它自动编译为 Javascript）：</p> <pre><code><script type = "text/typescript"> //TypeScript code goes here </script> </code></pre> </question> <answer tick="true" vote="28"> <p>实际上有几个项目允许您使用类似的 TypeScript 代码 - <a href="https://github.com/niutech/typescript-compile" rel="noreferrer">TypeScript Compile</a>、<a href="https://github.com/ComFreek/ts-htaccess" rel="noreferrer">ts-htaccess</a>。</p> <p>这里的问题是 .ts 代码应该编译成 JavaScript - 它可以在客户端完成（速度慢；整个 TSC 也应该加载到客户端）或在服务器端完成（显然更快，而且它更快）在编译代码上利用缓存要容易得多）。</p> </answer> <answer tick="false" vote="18"> <p>这是我编写的版本，<strong>直接</strong>使用 Microsoft/TypeScript/master 的版本，因此它始终保持最新：<a href="https://github.com/basarat/typescript-script" rel="noreferrer">https://github.com/basarat/typescript-script</a></p> <p>您甚至可以将 <pre><code>ts</code></pre> 指向您可能拥有的任何其他 TypeScript 版本，它会正常工作 🌹</p> </answer> <answer tick="false" vote="6"> <p>已经为此目的开发了一个 JavaScript 库 - 它称为 <a href="https://github.com/niutech/typescript-compile" rel="noreferrer">TypeScript Compile</a>，它允许将 Typescript 嵌入到 HTML 中（如上所示。）</p> </answer> <answer tick="false" vote="0"> <p>我写这篇文章的目的是为了在浏览器中编译 TypeScript，以便我可以编写快速简单的示例来分享。</p> <p><a href="https://github.com/Sean-Bradley/text-typescript" rel="nofollow noreferrer">https://github.com/Sean-Bradley/text-typescript</a></p> <p>使用，</p> <pre><code><script type="text/typescript"> // Your TypeScript code here </script> </code></pre> <p>并包含依赖项。</p> <pre><code><script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="67131e17021404150e1713275249544954">[email protected]</a>"></script> <script defer src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="3743524f431a434e47524454455e4743770619041907">[email protected]</a>"></script> </code></pre> <p>一个完整的示例，您可以复制/粘贴到 HTML 文档中并在本地尝试。</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>"text/typescript" example</title> <meta name="description" content="Transpiling and executing TypeScript in the browser" /> <style> body { overflow: hidden; margin: 0px; font-size: 15vw; } </style> <script type="text/typescript"> function foo(bar: string) { return "Hello " + bar; } let baz = "World!"; document.getElementById("root").innerHTML = foo(baz); </script> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="13676a63766070617a636753263d203d20">[email protected]</a>"></script> <script defer src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="ec98899498c198959c899f8f9e859c98acddc2dfc2dc">[email protected]</a>"></script> </head> <body> <div id="root"></div> </body> </html> </code></pre> <p>你可以看到它在这里、现在、今天发挥作用。</p> <p><a href="https://editor.sbcode.net/f1f4b5a73ec40283d1ddb37bb1e71f7e4e31b487" rel="nofollow noreferrer">https://editor.sbcode.net/f1f4b5a73ec40283d1ddb37bb1e71f7e4e31b487</a></p> </answer> </body></html>
node/nodemon 中是否有对 typescript 的源映射支持？
我有一个用 typescript@2 编写的节点项目。 我的 tsconfig 将 sourceMap 设置为 true 并生成 *.map.js 文件。当我通过 node 或 nodemon 执行转译的 *.js JavaScript 文件时，我...
在 TypeScript 中编写复杂类型时，不同的运算符具有一定的优先级。 例如，这段代码： 地图类型[T] 直观上，我们可以认为它相当于： typeof（地图...
我想从打字稿代码库中建模一些接口和类。我想知道在 Java 中对 TypeScript 联合进行建模的最佳方法。 像这样的东西- 导出类型 a = b | c | d |电子| F;
从“react”导入React； 从“react-input-mask”导入InputMask； 从“./inputMask.module.scss”导入样式； 从“反应...
typescript .d.ts 文件无法被 typescript 识别，但 vsc
更新： 它不是打字稿，而是 ts-node“问题” 我回答自己，所以如果你仍然对这个“问题”感兴趣 - 进一步阅读:) 对困惑感到抱歉 也许我完全有
在 Electron-vite 中包含本地 JavaScript 库的 TypeScript 无法正确编译
我正在尝试将本地库导入到 vite-electron TypeScript 项目中。请原谅我对 vite-electron 和 JS 捆绑生态系统缺乏了解，我是 JS 和 TS 开发的新手......
我正在使用 Expo/React Native/Typescript 构建一个类似于填字游戏的小型拼图应用程序。 这是 PuzzleMain 组件的精简版本： const PuzzleMain：React.FC 我正在使用 Expo/React Native/Typescript 构建一个类似于填字游戏的小型拼图应用程序。 这是 PuzzleMain 组件的精简版本： const PuzzleMain: React.FC<PuzzleMainProps> = ({ navigation }) => { let puzzle: AcrosticPuzzleData = parseAcrosticPuzzle(PUZZLE_TEXT); const grid = <PuzzleGrid puzzle={puzzle} />; const clueView = <PuzzleCluesView puzzle={puzzle} />; const [index, setIndex] = React.useState(0); return <View style={styles.container}> {index == 0 ? grid : clueView} <View style={styles.keyboardContainer}> <Button onPress={() => setIndex(index == 1 ? 0 : 1)} title={"See " + routes[index == 0 ? "Grid" : "Clues"].key} /> <Keyboard /> </View> </View>; } 总结一下，有“网格”组件和“线索”组件，并通过按钮在它们之间进行切换。 毫不夸张地说，在我用来测试的 Pixel 5 上点击此按钮大约需要 3 秒的时间才能进行更改。我在这里做错了什么？使用Expo在网络上打开这个，它立即发生，所以可能它是Android特有的？ 我尝试过的事情： 记住 PuzzleGrid 和 PuzzleCluesView 组件（const PuzzleGrid: React.FC<Props> = memo(({ puzzle }) ...。这基本上没有什么区别。我检查过，在我为备忘录功能制作的自定义拼图比较器中没有打印任何内容，所以我认为它没有重新渲染。 改用 TabView 在组件之间滑动 - 这有效！但说实话，我真的更喜欢两者兼得，而且当我将其合并到 TabView 实现中时，按钮同样很慢。 使用 npx expo start --no-dev 并仅构建一个 apk 并安装 - 这使得速度更快，但仍然可能需要整整一两秒，这太慢了。 正如我所看到的，您正在执行条件渲染，因此每次条件更改时，整个组件都会被创建为新组件。这种方法会使渲染速度变慢，具体取决于组件的重量。 为什么备忘录不起作用？ Memo 是一种优化技术，并不能保证性能提升。 现在，提升加载速度 内部优化PuzzleGrid和PuzzleCluesView，比如每个可以接收重复道具的子组件都会被memo覆盖，重型物品会异步加载，使用loader。 使用 InteractionManager 提高加载速度，并帮助显示加载程序而不冻结 UI。 不要卸载组件，而是重叠它们并使用可见性，因为可见性不会卸载组件 而不仅仅是 {index == 0 ? grid : clueView}你可以尝试类似的事情 <View> {grid} <View style={{ // Add height and other required props to make it visible position: 'absolute', visibility: index == 0 ? 'hidden' : 'visible', }}> {clueView} </View> </View>
感谢您的耐心等待，我刚刚开始使用 TypeScript。 我正在开发一个 Angular 2 应用程序，它需要接受文本输入，然后进行大量计算。我（错误地？）保证...