typescript 相关问题

在 Vue 3、TypeScript 和 Quasar 项目中，我有一个带有此表的组件：在 Vue 3、TypeScript 和 Quasar 项目中，我有一个带有此表的组件： <q-table @row-click="rowClick" title="Runners" :rows="rows" :columns="columns" :rows-per-page="rowsPerPage" row-key="slug" table-header-style="font-size: 2em;" selection="single" @selection="selectRunner" v-model:selected="selectedRow" > <template v-slot:body-cell-registration="props"> <q-td :props="props"> <template v-if="props.row.registration === 'U'"> {{ props.value }} (<a href="#" @click="handleRegisterClick(props.row.slug); $event.stopPropagation()"> Register </a>) </template> <template v-else-if="props.row.registration === 'R'"> {{ props.value }} (<a href="#" @click="handleDeregisterClick(props.row.slug); $event.stopPropagation()"> Deregister </a>) </template> <template v-else> {{ props.value }} </template> </q-td> </template> </q-table> 这有效，它显示正确的值以及适当的“注册”和“取消注册”链接，并且一切都按预期进行反应性更新。但是，我的编辑对 v-slot:body-cell-registration 显示了警告，称 body-cell-registration 是“无法识别的插槽名称”。此外，row 的 props.row.registration 部分获得“未解析的变量行”。这是从另一个文件导入的 q-table 的行类型： export interface RunnerRow { slug: string; status: string; status_display: string; registration: string; registration_display: string; node_slug: string; node_type: string; node_type_display: string; hostname: string; username: string; } 列定义为： const columns = [ {name: 'slug', label: 'Slug', field: 'slug', sortable: true}, {name: 'status', label: 'Status', field: 'status_display'}, {name: 'registration', label: 'Registration', field: 'registration_display'}, {name: 'node_type', label: 'Node Type', field: 'node_type_display'}, {name: 'hostname', label: 'Hostname', field: 'hostname', sortable: true}, {name: 'username', label: 'Username', field: 'username', sortable: true}, ] 如上所述，代码按预期工作，应用程序可以清楚地访问它需要的值，但我想解决警告。这里有什么问题，或者还有什么可以更好的？您在 Vue 3、TypeScript 和 Quasar 项目中遇到的有关编辑器警告的问题似乎源于缺乏编辑器可以识别的正确类型定义。在将 TypeScript 与 Vue 和 Quasar 结合使用时，这是一个常见的挑战，其中 Vue 槽和 props 的动态特性可能无法立即被 TypeScript 或集成开发环境 (IDE) 识别。以下是解决这些问题的方法： 1.无法识别的插槽名称出现有关无法识别的插槽名称 v-slot:body-cell-registration 的警告是因为您的 IDE 无法将其识别为 q-table 组件的有效插槽。这可能是因为 q-table 槽是动态的并且基于 columns 数据，而该数据不可静态分析。可能的解决方案：抑制警告：如果插槽按预期工作，一种方法可能是在 IDE 中抑制此特定警告。这更像是一种解决方法，而不是解决方案。使用槽定义定义全局组件：您可以在具有显式槽定义的q-table文件中定义.d.ts组件，尽管这可能很复杂，并且由于槽的动态性质，可能无法完全解决问题. 文档注释：在插槽上方添加文档注释可以帮助未来的开发人员了解该插槽名称是根据columns数据动态创建的。 2.未解决的变量出现 Unresolved variable row 警告是因为 TypeScript 无法推断插槽模板中 props 的类型。这是因为 Vue 模板 props 默认情况下不会继承 TypeScript 类型。可能的解决方案：在模板中显式注释 Props：如果可能，在模板中显式注释 props 的类型，尽管这在 Vue 模板中可能受到语法限制。方法注释：确保方法handleRegisterClick和handleDeregisterClick具有正确键入的参数。例如： function handleRegisterClick(slug: string): void { // Implementation } function handleDeregisterClick(slug: string): void { // Implementation } 在Options API或Composition API中使用TypeScript：如果尚未使用，您可以考虑使用Vue的Composition API或Options API与TypeScript，这可以提供更好的类型推断并帮助解决此类问题： import { defineComponent } from 'vue'; export default defineComponent({ methods: { handleRegisterClick(slug: string) { // Implementation }, handleDeregisterClick(slug: string) { // Implementation } } }); 一般最佳实践：保持 TypeScript 更新：确保您使用的是 TypeScript 的最新稳定版本，因为较新的版本通常对 Vue 有更好的支持。更新 Vue 和 Quasar 类型定义：确保您使用的是最新的 @vue/runtime-dom 和 Quasar 类型定义。咨询 Quasar 社区：有时这些问题在社区内是已知的，并且可能有社区驱动的类型或可用的修复程序。通过应用这些方法，您应该能够减轻警告，同时保持应用程序的功能。

typescript vuejs3 quasar

回答 1 投票 0

已定义但从未使用过泛型推断错误

直观看来这里不应该有任何错误：输入倒数第二个 = T 延伸 [ ...推断初始化，推断结果，推断最后， ] ？结果：绝不; 导出类型 {

typescript

回答 1 投票 0

未处理的运行时错误 TypeError：无法读取 nextJs 中未定义的属性（读取“索引”）

当我更改标头组件中自动完成框的值时，有时我会遇到此错误。我尝试更新 nextjs 版本，但没有成功。错误参考图片：https://prnt.sc/

typescript next.js runtime-error next.js13 nextui

回答 1 投票 0

我可以安全地将 TypeScript 传播到任何数组切片吗？

我可以像这样转发函数的参数： const log = (...args: 参数) => { console.log(...args); } 如果我想打破争论怎么办？常量日志 = ...

typescript eslint typescript-eslint

回答 1 投票 0

Angular 材料日期选择器：日期解析 UTC 问题 1 天前

我知道有几个关于此问题的线程，我阅读了所有这些线程，但好几天都无法解决此问题。我可能找到了一个解决方案，但它似乎对我来说很脏。所以和其他用户一样，我也有同样的问题

angular typescript datepicker angular-material utc

回答 4 投票 0

使用角度 5 设置角度材质 datePicker 的默认值

我正在使用有角材料的日期选择器。我想设置一个默认值，但它没有显示该值。我正在使用有角材料的日期选择器。我想设置一个默认值，但它没有显示该值。 <mat-form-field class="mr-sm-24" fxFlex (click)="open()" > <input matInput [picker]="picker" placeholder="Date" autocomplete="off" name="date" formControlName="date"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker [startAt]="startDatePicker" #picker></mat-datepicker> </mat-form-field> 这是我的 .js 代码，我想将其设置为默认值 var date = this.datepipe.transform((new Date().getTime()) - 3888000000, 'dd/MM/yyyy'); this.form = this.formBuilder.group({ dataInicial: [data_inicial], ... 这对我有用！ HTML- <mat-form-field> <input matInput [matDatepicker]="picker1" placeholder="From Date" [formControl]="date1"> <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle> <mat-datepicker #picker1></mat-datepicker> </mat-form-field> TS- date1 = new FormControl(new Date()) 您需要为 startAt 更改提供一个 Date 对象，如下所示：在.ts中： date = new Date((new Date().getTime() - 3888000000)); 在 html 中： <mat-datepicker [startAt]="date" #picker></mat-datepicker> 这里有一个工作演示：https://stackblitz.com/edit/angular-n9yojx 您可以在输入中使用定义的 formControl。这里是html <mat-form-field class="mr-sm-24" fxFlex (click)="open()" > <input [matDatepicker]="picker" matInput placeholder="Date" autocomplete="off" name="date" formControlName="date" [(ngModel)]="date.value"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> 这里是TS 声明你 formControl date: FormControl; this.date = new FormControl(new Date(<you can provide you date input field if you getting date from other sources>)) 下面是 Angular 10、Angular Material 10 和 Reactive forms 的工作代码组件.ts this.youForm= this._formBuilder.group({ StartDate: [new Date(), Validators.required], }); component.html 没有变化 <mat-form-field appearance="outline"> <input matInput [matDatepicker]="StartDate" placeholder="Start date *" formControlName="StartDate"> <mat-label>Start Date *</mat-label> <mat-datepicker-toggle matSuffix [for]="StartDate"></mat-datepicker-toggle> <mat-datepicker #StartDate></mat-datepicker> </mat-form-field> 在一组表单控制器中，您可以使用默认日期，如下所示。 birthdayCtrl: ['1999-01-31'] 使用模板驱动方法，解决方案如下。 selectedDate = new Date(); <input class="form-control" matInput [matDatepicker]="dp3" [min]="today" [max]="max" disabled [(ngModel)]="selectedDate" (ngModelChange)="dateUpdated()" name="currentDate" /> <mat-datepicker-toggle matSuffix [for]="dp3" ></mat-datepicker-toggle> <mat-datepicker #dp3 disabled="false"></mat-datepicker> ``` 在你的.html中---- <mat-form-field style="width:150px;" color="accent"> <mat-label>Choose From Date</mat-label> <input class="example-events" matInput [matDatepicker]="picker1" [ngModel]="dateF" > <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle> <mat-datepicker #picker1 ></mat-datepicker> </mat-form-field> 在你的.ts中---- dateF:any=new Date(); ngModel 对我有用... var date = this.datepipe.transform((new Date().getTime()) - 3888000000, 'dd/MM/yyyy'); <mat-form-field class="mr-sm-24" fxFlex (click)="open()" > <input matInput [picker]="picker" placeholder="Date" autocomplete="off" name="date" formControlName="date" [ngModel]="date"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker [startAt]="startDatePicker" #picker></mat-datepicker> </mat-form-field> 这是我的答案，在你的.html中 <mat-form-field class="mr-sm-24" fxFlex (click)="open()" > <input [matDatepicker]="picker" matInput placeholder="Date" autocomplete="off" name="date" formControlName="date"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> 在你的.ts中 this.form = this.formBuilder.group({ date: new FormControl(new Date()), // Current Date ... }); 这会将当前日期设置为默认日期。

angular typescript angular-material angular-material-datetimepicker

回答 9 投票 0

为什么 array?.length 仍然警告数组可能未定义？

给出以下代码：接口对象{ 数组？：字符串[] } 函数 fuu(obj: Obj) { const { 数组 } = 对象 if (数组?.length >= 1) { // ... } } 为什么它仍然说 'array.length' 是 pos...

arrays typescript

回答 1 投票 0

提取泛型接口的属性类型仍然需要不必要的泛型类型

当我有一个带有泛型的接口时：接口 I1 { a：字符串； b: 通用类型 } 并尝试使用 I1['a'] 提取属性 a 的类型，打字稿会抛出...

typescript typescript-generics

回答 1 投票 0

“.../node_modules/rxjs/Rx”没有导出成员“throwError”

Angular 文档谈到了一个“throwError”类，其导入语句如下所示从 'rxjs' 导入 { Observable, throwError }; 但我的编译器找不到 cl...