diff --git a/.eslintignore b/.eslintignore
index 5484d7a9c..965aaca32 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -7,3 +7,4 @@ es/
 lib/
 _site/
 dist/
+types/
diff --git a/types/layout/layout-content.d.ts b/types/layout/layout-content.d.ts
index 419c2193b..c52461017 100644
--- a/types/layout/layout-content.d.ts
+++ b/types/layout/layout-content.d.ts
@@ -1,3 +1,4 @@
+import { CSSProperties } from 'vue';
 // Project: https://github.com/vueComponent/ant-design-vue
 // Definitions by: Pythonfo <https://github.com/Pythonfo>
 // Copy from: akki-jat <https://github.com/akki-jat>
@@ -5,23 +6,27 @@
 
 import { AntdComponent } from '../component';
 
-export default class LayoutContent extends AntdComponent {
+export interface LayoutContentProps {
   /**
    * container className
    * @default undefined
    * @type string
    */
-  class: string;
+  class?: string;
 
   /**
    * to customize the styles
-   * @type string | object
+   * @type CSSProperties
    */
-  style: string | object;
+  style?: CSSProperties;
 
   /**
    * whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering
    * @type boolean
    */
-  hasSider: boolean;
+  hasSider?: boolean;
+}
+
+export default class LayoutContent extends AntdComponent {
+  $props: LayoutContentProps;
 }
diff --git a/types/layout/layout-footer.d.ts b/types/layout/layout-footer.d.ts
index c40a6e7f3..ba4be8405 100644
--- a/types/layout/layout-footer.d.ts
+++ b/types/layout/layout-footer.d.ts
@@ -1,3 +1,4 @@
+import { CSSProperties } from 'vue';
 // Project: https://github.com/vueComponent/ant-design-vue
 // Definitions by: Pythonfo <https://github.com/Pythonfo>
 // Copy from: akki-jat <https://github.com/akki-jat>
@@ -5,23 +6,27 @@
 
 import { AntdComponent } from '../component';
 
-export default class LayoutFooter extends AntdComponent {
+export interface LayoutFooterProps {
   /**
    * container className
    * @default undefined
    * @type string
    */
-  class: string;
+  class?: string;
 
   /**
    * to customize the styles
-   * @type string | object
+   * @type CSSProperties
    */
-  style: string | object;
+  style?: CSSProperties;
 
   /**
    * whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering
    * @type boolean
    */
-  hasSider: boolean;
+  hasSider?: boolean;
+}
+
+export default class LayoutFooter extends AntdComponent {
+  $props: LayoutFooterProps;
 }
diff --git a/types/layout/layout-header.d.ts b/types/layout/layout-header.d.ts
index 3a9b73399..c32dbbb1d 100644
--- a/types/layout/layout-header.d.ts
+++ b/types/layout/layout-header.d.ts
@@ -1,3 +1,4 @@
+import { CSSProperties } from 'vue';
 // Project: https://github.com/vueComponent/ant-design-vue
 // Definitions by: Pythonfo <https://github.com/Pythonfo>
 // Copy from: akki-jat <https://github.com/akki-jat>
@@ -5,23 +6,27 @@
 
 import { AntdComponent } from '../component';
 
-export default class LayoutHeader extends AntdComponent {
+export interface LayoutHeaderProps {
   /**
    * container className
    * @default undefined
    * @type string
    */
-  class: string;
+  class?: string;
 
   /**
    * to customize the styles
-   * @type string | object
+   * @type CSSProperties
    */
-  style: string | object;
+  style?: CSSProperties;
 
   /**
    * whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering
    * @type boolean
    */
-  hasSider: boolean;
+  hasSider?: boolean;
+}
+
+export default class LayoutHeader extends AntdComponent {
+  $props: LayoutHeaderProps;
 }
diff --git a/types/layout/layout-sider.d.ts b/types/layout/layout-sider.d.ts
index c5c4ccc2f..da6b7b74c 100644
--- a/types/layout/layout-sider.d.ts
+++ b/types/layout/layout-sider.d.ts
@@ -1,79 +1,84 @@
+import { CSSProperties, Slot, VNodeChild } from 'vue';
 // Project: https://github.com/vueComponent/ant-design-vue
 // Definitions by: akki-jat <https://github.com/akki-jat>
 // Definitions: https://github.com/vueComponent/ant-design-vue/types
 
 import { AntdComponent } from '../component';
 
-export declare class LayoutSider extends AntdComponent {
+export interface LayoutSiderProps {
   /**
    * container className
    * @type string
    */
-  class: string;
+  class?: string;
 
   /**
    * whether can be collapsed
    * @default false
    * @type boolean
    */
-  collapsible: boolean;
+  collapsible?: boolean;
 
   /**
    * to set the current status
    * @type boolean
    */
-  collapsed: boolean;
+  collapsed?: boolean;
 
   /**
    * to set the initial status
    * @default false
    * @type boolean
    */
-  defaultCollapsed: boolean;
+  defaultCollapsed?: boolean;
 
   /**
    * reverse direction of arrow, for a sider that expands from the right
    * @default false
    * @type boolean
    */
-  reverseArrow: boolean;
+  reverseArrow?: boolean;
 
   /**
    * to customize the styles
-   * @type object | string
+   * @type CSSProperties
    */
-  style: object | string;
+  style?: CSSProperties;
 
   /**
    * specify the customized trigger, set to null to hide the trigger
-   * @type string | slot
+   * @type string | | VNodeChild | JSX.Element
    */
-  trigger: any;
+  trigger?: string | VNodeChild | JSX.Element;
 
   /**
    * width of the sidebar
    * @default 200
    * @type number | string
    */
-  width: number | string;
+  width?: number | string;
 
   /**
    * width of the collapsed sidebar, by setting to 0 a special trigger will appear
    * @default 80
    * @type number
    */
-  collapsedWidth: number;
+  collapsedWidth?: number;
 
   /**
    * breakpoints of the responsive layout
    * @type string
    */
-  breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+  breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 
   /**
    * color theme of the sidebar
    * @default 'dark'
    * @type string
    */
-  theme: 'light' | 'dark';
+  theme?: 'light' | 'dark';
+}
+
+export declare class LayoutSider extends AntdComponent {
+  $props: LayoutSiderProps;
 }
diff --git a/types/layout/layout.d.ts b/types/layout/layout.d.ts
index 0a00644f1..e583a0a43 100644
--- a/types/layout/layout.d.ts
+++ b/types/layout/layout.d.ts
@@ -7,6 +7,28 @@ import { LayoutSider } from './layout-sider';
 import LayoutHeader from './layout-header';
 import LayoutContent from './layout-content';
 import LayoutFooter from './layout-footer';
+import { CSSProperties } from 'vue';
+
+export interface LayoutProps {
+  /**
+   * container className
+   * @default undefined
+   * @type string
+   */
+  class?: string;
+
+  /**
+   * to customize the styles
+   * @type CSSProperties
+   */
+  style?: CSSProperties;
+
+  /**
+   * whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering
+   * @type boolean
+   */
+  hasSider?: boolean;
+}
 
 export declare class Layout extends AntdComponent {
   static Header: typeof LayoutHeader;
@@ -14,22 +36,5 @@ export declare class Layout extends AntdComponent {
   static Footer: typeof LayoutFooter;
   static Sider: typeof LayoutSider;
 
-  /**
-   * container className
-   * @default undefined
-   * @type string
-   */
-  class: string;
-
-  /**
-   * to customize the styles
-   * @type string | object
-   */
-  style: string | object;
-
-  /**
-   * whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering
-   * @type boolean
-   */
-  hasSider: boolean;
+  $props: LayoutProps;
 }