fix ts issues

src/components/shared/Widget/Grid/Grid.vue

@@ -48,17 +48,17 @@ import { GridLayout, GridItem } from 'vue-grid-layout';
 import { Component, Prop, Ref, Vue, Watch } from 'vue-property-decorator';
 
 import { Breakpoint, BreakpointKey } from '@/consts/layout';
-import type { Layout, LayoutConfiguration, ResponsiveLayouts } from '@/types/layout';
+import type { Layout, LayoutConfig, LayoutWidget, LayoutWidgetConfig, ResponsiveLayouts } from '@/types/layout';
 
-const DEFAULT_BREAKPOINTS: LayoutConfiguration = {
+const DEFAULT_BREAKPOINTS: LayoutConfig = {
   [BreakpointKey.lg]: Breakpoint.HugeDesktop, // 2092
   [BreakpointKey.md]: Breakpoint.LargeDesktop, // 1440
   [BreakpointKey.sm]: Breakpoint.Desktop, // 1024
   [BreakpointKey.xs]: Breakpoint.LargeMobile, // 528
   [BreakpointKey.xss]: 0,
 };
 
-const DEFAULT_COLS: LayoutConfiguration = {
+const DEFAULT_COLS: LayoutConfig = {
   [BreakpointKey.lg]: 24,
   [BreakpointKey.md]: 12,
   [BreakpointKey.sm]: 12,
@@ -73,24 +73,24 @@ const DEFAULT_COLS: LayoutConfiguration = {
   },
 })
 export default class WidgetsGrid extends Vue {
-  @Prop({ required: true, type: Object }) readonly layouts!: ResponsiveLayouts;
+  @Prop({ required: true, type: Object }) readonly layouts!: ResponsiveLayouts<LayoutWidgetConfig>;
   @Prop({ default: 10, type: Number }) readonly rowHeight!: number;
   @Prop({ default: 16, type: Number }) readonly margin!: number;
   @Prop({ default: false, type: Boolean }) readonly draggable!: boolean;
   @Prop({ default: false, type: Boolean }) readonly resizable!: boolean;
   @Prop({ default: false, type: Boolean }) readonly compact!: boolean;
-  @Prop({ default: () => DEFAULT_COLS, type: Object }) readonly cols!: LayoutConfiguration;
-  @Prop({ default: () => DEFAULT_BREAKPOINTS, type: Object }) readonly breakpoints!: LayoutConfiguration;
+  @Prop({ default: () => DEFAULT_COLS, type: Object }) readonly cols!: LayoutConfig;
+  @Prop({ default: () => DEFAULT_BREAKPOINTS, type: Object }) readonly breakpoints!: LayoutConfig;
 
   @Ref('gridWrapper') readonly gridWrapper!: HTMLDivElement;
 
   ready = false;
   onReady = debounce(this.setReady);
   breakpoint: BreakpointKey = BreakpointKey.lg;
-  layout: Layout = [];
+  layout: Layout<LayoutWidget> = [];
 
-  get responsiveLayouts(): ResponsiveLayouts {
-    return Object.entries(this.layouts).reduce<ResponsiveLayouts>((acc, [key, layout]) => {
+  get responsiveLayouts(): ResponsiveLayouts<LayoutWidget> {
+    return Object.entries(this.layouts).reduce<ResponsiveLayouts<LayoutWidget>>((acc, [key, layout]) => {
       acc[key] = layout.map((widget) => ({
         ...widget,
         minW: widget.minW ?? widget.w,
@@ -102,10 +102,12 @@ export default class WidgetsGrid extends Vue {
 
   @Watch('responsiveLayouts')
   private updateCurrentLayout() {
-    this.layout =
+    const layout =
       this.breakpoint in this.responsiveLayouts
         ? this.responsiveLayouts[this.breakpoint]
         : this.responsiveLayouts[BreakpointKey.lg];
+
+    this.layout = cloneDeep(layout) as Layout<LayoutWidget>;
   }
 
   setReady(): void {
@@ -117,7 +119,7 @@ export default class WidgetsGrid extends Vue {
   }
 
   onWidgetResize(rect: DOMRectReadOnly, id: string): void {
-    const layout: Layout = cloneDeep(this.layout);
+    const layout = cloneDeep(this.layout);
     const widget = layout.find((item) => item.i === id);
 
     if (!widget) return;

src/types/layout.ts

@@ -1,6 +1,6 @@
 import type { BreakpointKey } from '@/consts/layout';
 
-export type LayoutWidget = {
+export type LayoutWidgetConfig = {
   i: string;
   x: number;
   y: number;
@@ -10,8 +10,10 @@ export type LayoutWidget = {
   minH?: number;
 };
 
-export type Layout = LayoutWidget[];
+export type LayoutWidget = Required<LayoutWidgetConfig>;
 
-export type LayoutConfiguration = Record<BreakpointKey, number>;
+export type LayoutConfig = Record<BreakpointKey, number>;
 
-export type ResponsiveLayouts = Partial<Record<BreakpointKey, Layout>>;
+export type Layout<T extends LayoutWidgetConfig> = T[];
+
+export type ResponsiveLayouts<T extends LayoutWidgetConfig> = Partial<Record<BreakpointKey, Layout<T>>>;

src/views/Swap.vue

@@ -47,6 +47,7 @@ import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { Components, PageNames } from '@/consts';
 import { lazyComponent } from '@/router';
 import { action, getter, state } from '@/store/decorators';
+import type { Layout, LayoutWidgetConfig, ResponsiveLayouts } from '@/types/layout';
 
 import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
 
@@ -79,9 +80,9 @@ export default class Swap extends Mixins(mixins.LoadingMixin, TranslationMixin,
   transactions = true;
   distribution = true;
 
-  get layouts() {
-    const lg = [];
-    const sm = [];
+  get layouts(): ResponsiveLayouts<LayoutWidgetConfig> {
+    const lg: Layout<LayoutWidgetConfig> = [];
+    const sm: Layout<LayoutWidgetConfig> = [];
 
     if (this.form) {
       lg.push({ x: 0, y: 0, w: 6, h: 20, i: 'form' });