typescript 相关问题

TypeScript是由Microsoft创建的JavaScript的类型超集,它添加了可选类型,类,接口,async / await和许多其他功能,并编译为纯JavaScript。此标记用于特定于TypeScript的问题。它不用于一般的JavaScript问题。

如何使用 drizzle-orm 在 PlanetScale(MYSQL) 中定义关系?

我正在尝试学习 drizzle-orm,但问题是我正在使用 Planetscale 并且它很粗糙。 我想要做的是为用户授予管理员或编辑者角色。 还有一个具有管理员角色的用户...

回答 1 投票 0

将打字稿字符串文字联合中的一个(或多个)值注释为已弃用

我知道可以将整个属性注释为已弃用,但是是否可以将字符串联合中的一个(或多个)单个值注释为已弃用? 例如,给定这个类型声明...

回答 4 投票 0

如何在有条件的离子模式上设置伪元素 ::part() 的样式

我有一个离子模式,之前的CSS如下 离子模式::部分(内容){ 宽度:300px; 高度:480像素; } 我需要创造一个条件如果A那么高度变低,但是我...

回答 1 投票 0

如何通过 scrip1 中的 Json 将 Workbook1 选定列中的值传递到 script2,以便使用 Power Automate 更新 Workbook2

我的工作簿1中有一个很长的Excel表格,其中有很多列。我只想从 Office 脚本中的 workbook1 的前 5 列中选择值,并通过 JSON 将这些值传递到第二个脚本

回答 1 投票 0

Excel Office 脚本:如何通过 scrip1 中的 Json 将 Workbook1 选定列中的值传递到 script2,以便使用 Power Automate 更新 Workbook2

美好的一天。我在 workbook1 中有一个很长的 Excel 表,其中有很多列。我只想从 Office 脚本中的 workbook1 的前 5 列中选择值,然后通过 Json 将这些值传递给第二个脚本...

回答 1 投票 0

Angular 17 调用 API observable 和订阅时没有任何显示

正在从事 Angular 17 项目,我正在尝试取回有拍卖帕尔马或根本没有拍卖的拍卖。我可以在开发工具响应选项卡中看到数据值返回,但是当我同意时...

回答 1 投票 0

如何使用axios在前端显示错误体

我的快速API端点在这里: @app.post("/api/signup", status_code=status.HTTP_200_OK) 异步 def 注册(凭据:signupcred): 尝试: 打印(凭证.电子邮件,凭证.通行证...

回答 1 投票 0

使用 @material-tailwind/react 和 nextjs14 时出现打字稿错误

尝试在“next”中使用“@material-tailwind/react”:“^2.1.9”:“14.1.4” “使用客户端”; 从“@material-tailwind/react”导入{按钮}; ...

回答 1 投票 0

细雨:db.query 抛出未定义不是一个对象(评估“relation.referencedTable”)

所以我有这些名为products.ts和category.ts的模式,这些文件之间的关系是一对多的。 产品.ts 从“drizzle-orm/pg-cor...

回答 1 投票 0

Angular Owl Carousel 不是水平方向而是垂直方向

在我的 Angular 项目中,我在我的 home-component.html 中使用了 Owl Carousel,如下所示: 在我的 Angular 项目中,我在我的 home-component.html 中使用了 Owl Carousel,如下所示: <section> <div class="container"> <h1 class="products-title">New Arrivals</h1> <div class="slider"> <owl-carousel-o [options]="customOptions" class="owl-stage"> <ng-template carouselSlide *ngFor="let product of products"> <div class="card"> <div class="card-content" [ngStyle]="{'background-color': isDarkTheme ? '#5eda5e' : '#3b5b2d'}"> <img class="product-image" [src]="product.imgSrc" [alt]="product.name"> <h2 class="product-title">{{ product.name | translate}}</h2> <p class="product-description">{{ product.description | translate}}</p> <p class="product-price">{{ product.price | currency:'USD':'symbol':'1.2-2' }}</p> </div> </div> </ng-template> </owl-carousel-o> </div> </div> </section> 但是,我的卡片不是水平显示的。但我希望它们是垂直的。即使 display: flex 也没有解决我的问题。另外,当我尝试通过浏览器检查时,<owl-carousel-o></owl-carousel-o\>实际上有猫头鹰阶段的类,我也添加了它,但即使给它一个显示:flex也不起作用。 我尝试使包含产品详细信息和图像的卡片实际上是水平的。这是我的应用程序组件.ts import { Component, OnInit } from '@angular/core'; import { ProductService } from './product.service'; import { Product } from './product.model'; import { TranslateService } from '@ngx-translate/core'; import { Renderer2 } from '@angular/core'; import { OwlOptions } from 'ngx-owl-carousel-o'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title = 'GreenGrocery'; products: Product[] = []; fruit: any; fruit_title: any; isDarkTheme: boolean = false; // Initialize dark_mode and light_mode with translation keys dark_mode: string = 'assets/img/crescent-moon.png'; light_mode: string = 'assets/img/sunny.png'; constructor(private productService: ProductService, public translate: TranslateService, private renderer: Renderer2) { // Set default language this.translate.setDefaultLang('en'); // Set initial language if needed this.translate.use('en'); translate.addLangs(['en', 'tr']); } ngOnInit(): void { this.products = this.productService.getProducts(); this.isDarkTheme = localStorage.getItem('theme') === "Dark"; this.translate.get('assets/img/crescent-moon.png').subscribe((res: string) => { this.dark_mode = res; }); this.translate.get('assets/img/sunny.png').subscribe((res: string) => { this.light_mode = res; }); this.setBodyBackground(); this.productText(); } switchLanguage(lang: string) { this.translate.use(lang); } ChangeLang(event: any) { const lang = event.target.value; this.switchLanguage(lang); localStorage.setItem('theme', this.isDarkTheme ? 'Dark' : 'Light'); this.languageBackground(); } storeThemeSelection() { localStorage.setItem('theme', this.isDarkTheme ? 'Dark' : 'Light'); this.setBodyBackground(); this.productText(); this.footerBackground(); this.cardBackground(); } private setBodyBackground() { const backgroundColor = this.isDarkTheme ? '#3b5b2d' : '#5eda5e'; this.renderer.setStyle(document.body, 'background-color', backgroundColor); } private productText() { const color = this.isDarkTheme ? '#ffffff' : '#000000'; this.renderer.setStyle(document.body, 'color', color); } private footerBackground() { const footerBackgroundColor = this.isDarkTheme ? '#4d4d4d' : '#ffffff'; this.renderer.setStyle(document.querySelector('.footer'), 'background-color', footerBackgroundColor); } private languageBackground() { const color = this.isDarkTheme ? '#ffffff' : '#000000'; this.renderer.setStyle(document.body, 'color', color); } private cardBackground() { const cardBackground = this.isDarkTheme ? '#5eda5e' : '#3b5b2d'; const cardContents = document.querySelectorAll('.card-content'); cardContents.forEach(cardContent => { this.renderer.setStyle(cardContent, 'background-color', cardBackground); }); } customOptions: OwlOptions = { loop: true, mouseDrag: false, touchDrag: false, pullDrag: false, dots: true, navSpeed: 700, navText: ['', ''], responsive: { 0: { items: 1 }, 400: { items: 2 }, 740: { items: 3 }, 940: { items: 4 } }, nav: true } } 通常情况下,你不能通过你的组件直接操作其他组件的样式。因此,你的方法应该是这样的: 查看别人的组件是否有这样的配置?如果没有请继续关注第二项哈哈哈 在这种情况下,我们应该利用我们的超能力,因为你知道超能力需要受到控制。它的名字是ng-deep。 ng-deep 帮助我们操纵任何组件的样式。但是,它可能会影响应用程序中的每个位置。你知道,我们通常不想要这些有风险的事情。一件很棒的事情是将 ng-deep 与 :host 一起使用。 :host 帮助我们将 ng-deep 封装在该组件中。因此,您只需操作该组件的样式以及该组件内部的样式。在你的home.component.css中,你基本上可以像这样更新你的风格: :host { ::ng-deep .owl-stage { display: flex; } .product-image { width: 30%; border-radius: 5px; } .card { width: calc(33.33% - 20px); margin: 10px; } .card-content { padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } }

回答 1 投票 0

如何生成一个单独的终端,以便使用 ink React 在 NodeJS 中调试我的 TUI 应用程序

我正在终端上使用 Ink React 构建一个应用程序。我想要一个专用且独立的终端来从主应用程序输出我想要的任何日志。为了做到这一点,我去尝试...

回答 1 投票 0

为什么接口不能分配给Record<string, unknown>?

我刚刚注意到接口无法分配给Record(游乐场链接): 接口 Foo { foo:数字 } const foo: Foo = { foo: 1 } 常量栏:记录 我刚刚注意到接口无法分配给Record<string, unknown>(playground链接): interface Foo { foo: number } const foo: Foo = { foo: 1 } const bar: Record<string, unknown> = foo // |-> Error: Type 'Foo' is not assignable to type 'Record<string, unknown>' // Index signature is missing in type 'Foo'.(2322) 但是,当省略 Foo 的类型声明时,同样是可能的(playground 链接): const foo = { foo: 1 } const bar: Record<string, unknown> = foo // no error here 问题: 为什么两个示例之间存在差异?对我来说,变量 foo 的简化类型在两个示例中都是相同的......接口 Foo 不应该分配给 Record<string, unknown> 吗? 根据我的理解,Record<string, unknown>相当于object,因此任何接口都应该可以分配给它。另外 @typescript-eslint/ban-types 建议使用 Record<string, unknown> 而不是 object。 备注: 第一个示例在使用 object (playground link) 或 Record<string, any> (playground link) 代替 Record<string, unknown> 时有效。 您遇到过类型中缺少索引签名(仅在接口上,不在类型别名上)#15300 当您将接口更改为类型时,代码将起作用: type Foo = { foo: number } const foo: Foo = { foo: 1 }; const bar: Record<string, unknown> = foo; 编辑:@Lesiak 上面有正确的答案。我留下这个只是为了相关答案的链接。 诚然,我有点超出了我的深度,但我正在浏览这个答案,我看到: [A]TypeScript 安全性的很大一部分来自于这样一个事实:[...]只有当它知道它明确地打算作为一个对象时,它才会让您将对象视为字典。 这与我的测试一致。修改您的界面以明确将 Foo.foo 视为索引不会产生错误。 (游乐场链接) interface Foo { [foo: string]: number } const foo = { foo: 1 } const bar: Record<string, unknown> = foo 这并不能完全回答您的问题,因为 Record<string, any> 适用于您的显式界面,但也许知识渊博的人可以从这里获取它。 Record<string, unknown> 需要索引签名(参见 GitHub 上的此评论)。 所以这无法编译: interface X { a: boolean; b: number; } const x: X = { a: true, b: 1 }; const y: Record<string, unknown> = x; // error 编译成功: interface X { [key: string]: unknown; a: boolean; b: number; } const x: X = { a: true, b: 1 }; const y: Record<string, unknown> = x; // okay 这也可以成功编译,因为推断了类型的索引签名(参见 GitHub 上的此评论): type X { a: boolean; b: number; } const x: X = { a: true, b: 1 }; const y: Record<string, unknown> = x; // okay 这也可以成功编译,因为 Record<string, any> 不需要索引签名(参见 GitHub 上的此评论): interface X { a: boolean; b: number; } const x: X = { a: true, b: 1 }; const y: Record<string, any> = x; // okay

回答 3 投票 0

错误 TS2322:输入“字符串 |”数量 |在刚刚升级到 Angular 16 的项目上,无法分配“日期”来键入“日期”

我有一个项目,刚刚从 Angular 11 升级到 Angular 16。在 Angular 11 中,我使用来自 Web API 的 Swagger J 的 NPM 包“ng-swagger-gen”创建了所有 DTO 模型...

回答 1 投票 0

NestJS 解析器出现问题,抛出未定义的问题

需要一点帮助。我正在创建一个突变,它抛出以下错误, 错误[ExceptionsHandler]无法读取未定义的属性(读取“entryUser”) 请找到解析器, 出口类

回答 1 投票 0

错误:由于错误而失败:bunsh:没有这样的文件或目录正在运行bun dev

所以,我今天转向Windows,我安装了Bun,但是当我运行脚本bun dev时它说: 错误:由于错误而失败:bunsh:没有这样的文件或目录。 奇怪的是,当我运行相同的

回答 1 投票 0

Next.js `transpilePackages` 使用样式组件给出 Webpack 错误

我正在尝试使用存储库中从自定义 UI 库导入的组件。两者都使用相同的堆栈(React、Typescript、Styled Components)以及使用 Next.js 的 Web 应用程序。跑步时...

回答 1 投票 0

过渡不适用于 HeadlessUI 的 Dialog 组件

我正在使用 Next.JS 14.1.3 我从 HeadlessUI 添加了 并设置了 TailwindCSS,但是当我尝试在页面上打开模态窗口时,尽管我提供了所有内容,但根本没有任何转换...

回答 1 投票 0

如何让 Github PR 中的编译错误更加普遍?

我有一个大型(约 100 名开发人员)、NX 管理的 Typescript 存储库,其中 github 操作在拉取请求上运行。动作工作流程运行许多步骤,其中主要步骤基本上是编译代码

回答 1 投票 0

PlateJS:无法添加图像 - 添加图像时出现空白屏幕(图像元素)

我使用 npx @udecode/plate-ui@latest 添加图像元素组件添加图像元素 这添加了标题、媒体弹出框和可调整大小的组件。 在 Platejs 文档中,一切正常...

回答 1 投票 0

如何调整固定宽度表格中的列大小

我有一个固定宽度容器中的表格,并且该表格具有隐藏/显示列的能力。当我显示列时,表格的宽度超过容器的宽度并溢出,从而触发

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.