Merge pull request #146 from cmux/0.10

update TS definition
cmux · Jul 16, 2019 · 4c94431 · 4c94431
2 parents 8c4fa98 + 2a1014d
commit 4c94431
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 47 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,12 @@
+## 0.10.6
+
+**2019-07-16**
+
+核心
+
+-   **优化**
+    -   更新 TS 定义
+
 ## 0.10.5
 
 **2019-07-09**

diff --git a/docs/typescript.md b/docs/typescript.md
@@ -8,53 +8,87 @@ _Koot.js_ 自动生成的 _Webpack_ 配置会对 TS 文件进行翻译，无需
 
 ### TSX 代码示例
 
+**函数组件 / Functional Component**
+
 ```typescript
 import React from 'react';
-import { extend, ExtendedProps } from 'koot';
+import { extend } from 'koot';
 import { Link } from 'react-router';
 
 import Icon from '@components/icon';
 
 // Functional Component =======================================================
 
-const TSFunctionalComponent: React.ComponentClass = extend({
+interface ComponentProps {
+    customProps?: string;
+}
+
+const TSFunctionalComponent = extend<ComponentProps>({
     pageinfo: () => ({
         title: `${__('pages.ts.title')} - ${__('title')}`,
         metas: [{ description: __('pages.ts.description') }]
     }),
     styles: require('./index.module.less')
-})(({ className, children }) => (
-    <div className={className} data-koot-test-page="page-ts">
-        <img
-            src={require('@assets/typescript.svg')}
-            className="logo"
-            alt="TypeScript LOGO"
-        />
-        <p className="msg-big">{__('pages.ts.msg')}</p>
-        <p className="msg-small">{__('pages.ts.msgCheckFile')}</p>
-        <Link to="/start" className="back">
-            <Icon className="icon" icon="circle-left3" />
-            {__('pages.ts.back')}
-        </Link>
-        {children}
-    </div>
-));
+})(({ className, children, customProps, 'data-class-name': dataClassName }) => {
+    return (
+        <div className={className} data-koot-test-page="page-ts">
+            <img
+                src={require('@assets/typescript.svg')}
+                className="logo"
+                alt="TypeScript LOGO"
+                data-custom-props={customProps}
+                data-class-name={dataClassName}
+            />
+            <p className="msg-big">{__('pages.ts.msg')}</p>
+            <p className="msg-small">{__('pages.ts.msgCheckFile')}</p>
+            <Link to="/start" className="back">
+                <Icon className="icon" icon="circle-left3" />
+                {__('pages.ts.back')}
+            </Link>
+            {children}
+        </div>
+    );
+});
 
 export default TSFunctionalComponent;
 
+// 使用
+export const UseTSFunctionalComponent: React.FC = () => (
+    <TSFunctionalComponent customProps="B" />
+);
+```
+
+**组件类 / Component Class**
+
+```typescript
+import React from 'react';
+import { extend, ExtendedProps } from 'koot';
+import { Link } from 'react-router';
+
+import Icon from '@components/icon';
+
 // Component Class ============================================================
 
+interface ComponentProps {
+    customProps?: string;
+}
+
 @extend({
     pageinfo: () => ({
         title: `${__('pages.ts.title')} - ${__('title')}`,
         metas: [{ description: __('pages.ts.description') }]
     }),
     styles: require('./index.module.less')
 })
-class TSComponentClass extends React.Component<ExtendedProps> {
+class TSComponentClass extends React.Component<ComponentProps & ExtendedProps> {
     render() {
         return (
-            <div className={this.props.className} data-koot-test-page="page-ts">
+            <div
+                className={this.props.className}
+                data-custom-props={this.props.customProps}
+                data-class-name={this.props['data-class-name']}
+                data-koot-test-page="page-ts"
+            >
                 <img
                     src={require('@assets/typescript.svg')}
                     className="logo"
@@ -72,5 +106,10 @@ class TSComponentClass extends React.Component<ExtendedProps> {
     }
 }
 
-export { TSComponentClass };
+export default TSComponentClass;
+
+// 使用
+export const UseTSComponentClass: React.FC = () => (
+    <TSComponentClass customProps="B" />
+);
 ```
diff --git a/packages/koot-boilerplate/src/views/ts-example/index.tsx b/packages/koot-boilerplate/src/views/ts-example/index.tsx
@@ -4,33 +4,45 @@ import { Link } from 'react-router';
 
 import Icon from '@components/icon';
 
+interface ComponentProps {
+    customProps?: string;
+}
+
 // Functional Component =======================================================
 
-const TSFunctionalComponent: React.ComponentClass = extend({
+const TSFunctionalComponent = extend<ComponentProps>({
     pageinfo: () => ({
         title: `${__('pages.ts.title')} - ${__('title')}`,
         metas: [{ description: __('pages.ts.description') }]
     }),
     styles: require('./index.module.less')
-})(({ className, children }) => (
-    <div className={className} data-koot-test-page="page-ts">
-        <img
-            src={require('@assets/typescript.svg')}
-            className="logo"
-            alt="TypeScript LOGO"
-        />
-        <p className="msg-big">{__('pages.ts.msg')}</p>
-        <p className="msg-small">{__('pages.ts.msgCheckFile')}</p>
-        <Link to="/start" className="back">
-            <Icon className="icon" icon="circle-left3" />
-            {__('pages.ts.back')}
-        </Link>
-        {children}
-    </div>
-));
+})(({ className, children, customProps, 'data-class-name': dataClassName }) => {
+    return (
+        <div className={className} data-koot-test-page="page-ts">
+            <img
+                src={require('@assets/typescript.svg')}
+                className="logo"
+                alt="TypeScript LOGO"
+                data-custom-props={customProps}
+                data-class-name={dataClassName}
+            />
+            <p className="msg-big">{__('pages.ts.msg')}</p>
+            <p className="msg-small">{__('pages.ts.msgCheckFile')}</p>
+            <Link to="/start" className="back">
+                <Icon className="icon" icon="circle-left3" />
+                {__('pages.ts.back')}
+            </Link>
+            {children}
+        </div>
+    );
+});
 
 export default TSFunctionalComponent;
 
+export const UseTSFunctionalComponent: React.FC = () => (
+    <TSFunctionalComponent customProps="B" />
+);
+
 // Component Class ============================================================
 
 @extend({
@@ -40,10 +52,15 @@ export default TSFunctionalComponent;
     }),
     styles: require('./index.module.less')
 })
-class TSComponentClass extends React.Component<ExtendedProps> {
+class TSComponentClass extends React.Component<ComponentProps & ExtendedProps> {
     render() {
         return (
-            <div className={this.props.className} data-koot-test-page="page-ts">
+            <div
+                className={this.props.className}
+                data-custom-props={this.props.customProps}
+                data-class-name={this.props['data-class-name']}
+                data-koot-test-page="page-ts"
+            >
                 <img
                     src={require('@assets/typescript.svg')}
                     className="logo"
@@ -62,3 +79,7 @@ class TSComponentClass extends React.Component<ExtendedProps> {
 }
 
 export { TSComponentClass };
+
+export const UseTSComponentClass: React.FC = () => (
+    <TSComponentClass customProps="B" />
+);
diff --git a/packages/koot/index.d.ts b/packages/koot/index.d.ts
@@ -1,6 +1,6 @@
 /// <reference path="global.d.ts" />
 
-import { ComponentType, ReactNode, Component } from 'react';
+import { ComponentType, ReactNode, FC } from 'react';
 import { Store, Dispatch, Middleware, Reducer } from 'redux';
 import { connect } from 'react-redux';
 
@@ -21,14 +21,22 @@ export const getHistory: () => Object;
 
 // HOC extend() ===============================================================
 
-export interface HOCExtend {
+export interface HOCExtend<ComponentProps> {
     /** React 高阶组件，可赋予目标组件CSS 命名空间、同构数据、更新页面信息等能力。 */
-    (options: extendOptions): (
-        WrappedComponent: ComponentType<ExtendedProps>
-    ) => HOC<ExternalProps>;
+    <ComponentProps = {}>(options: extendOptions): ExtendComponent<
+        ComponentProps
+    >;
 }
-class HOC extends Component {}
-export const extend: HOCExtend;
+interface ExtendComponent<ComponentProps> {
+    (WrappedComponent: FC<ComponentProps & ExtendedProps>): ComponentClass<
+        ComponentProps & ExtendedProps
+    >;
+
+    <P extends ComponentProps>(
+        WrappedComponent: ComponentType<P & ExtendedProps>
+    ): ComponentClass<ComponentProps & ExtendedProps>;
+}
+export const extend: HOCExtend<ComponentProps>;
 
 interface extendOptions {
     connect?: connect;
@@ -75,6 +83,7 @@ export interface ExtendedProps {
     className?: string;
     /** 排除父组件传入的 className 后 extend 高阶组件注入的 className（如果在 extend 高阶组件中传入了 `styles` 属性）*/
     'data-class-name'?: string;
+    // [prop: string]: any;
 }
 
 interface renderProps {