Browse Source

feat: create 函数添加 ts 类型 (#704)

* feat: create函数添加ts类型

* fix: 修复eslint无法使用问题

* Update component.ts
huangsir 4 years ago
parent
commit
44a90b48ff
2 changed files with 35 additions and 11 deletions
  1. 10 7
      package.json
  2. 25 4
      src/packages/utils/create/component.ts

+ 10 - 7
package.json

@@ -64,28 +64,30 @@
   },
   "dependencies": {
     "pinyin": "^2.10.2",
-    "vue-router": "^4.0.11",
-    "sass": "^1.34.0"
+    "sass": "^1.34.0",
+    "vue-router": "^4.0.11"
   },
   "devDependencies": {
-    "vue": "^3.2.19",
     "@commitlint/cli": "^10.0.0",
     "@commitlint/config-conventional": "^10.0.0",
     "@tarojs/taro": "^3.3.0-alpha.8",
     "@types/jest": "^26.0.22",
     "@types/node": "^14.14.31",
     "@types/pinyin": "^2.8.3",
+    "@typescript-eslint/eslint-plugin": "^4.20.0",
+    "@typescript-eslint/parser": "^4.20.0",
     "@vitejs/plugin-legacy": "^1.4.0",
     "@vitejs/plugin-vue": "^1.2.2",
     "@vue/compiler-sfc": "^3.0.11",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^5.0.2",
+    "@vue/eslint-config-typescript": "^7.0.0",
     "@vue/test-utils": "^2.0.0-rc.6",
     "autoprefixer": "^10.3.4",
     "axios": "^0.21.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-vue": "^7.0.0-0",
+    "eslint": "^7.23.2",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^7.8.0",
+    "eslint-visitor-keys": "2",
     "fs-extra": "^9.1.0",
     "highlight.js": "^10.3.1",
     "husky": "^6.0.0",
@@ -99,6 +101,7 @@
     "typescript": "^4.1.5",
     "vite": "^2.3.4",
     "vite-plugin-md": "^0.11.0",
+    "vue": "^3.2.19",
     "vue-jest": "^5.0.0-alpha.7"
   },
   "eslintConfig": {

+ 25 - 4
src/packages/utils/create/component.ts

@@ -1,18 +1,39 @@
-import { App, defineComponent } from 'vue';
+import {
+  App,
+  defineComponent,
+  ComponentPropsOptions,
+  ExtractPropTypes,
+  SetupContext,
+  RenderFunction,
+  Component
+} from 'vue';
 export function createComponent(name: string) {
   const componentName = 'nut-' + name;
   return {
     componentName,
-    create: function (_component: any) {
+    create: function <
+      PropsOptions extends Readonly<ComponentPropsOptions>,
+      Props extends Readonly<ExtractPropTypes<PropsOptions>>
+    >(_component: {
+      name?: string;
+      baseName?: string;
+      install?: (vue: App) => void;
+      props?: PropsOptions;
+      components?: Record<string, Component>;
+      setup?: (props: Props, setupContext: SetupContext) => RenderFunction | Record<string, any> | any;
+      emits?: string[];
+      [optionKey: string]: any;
+    }) {
       _component.baseName = name;
       _component.name = componentName;
       _component.install = (vue: App) => {
-        vue.component(_component.name as string, _component);
+        vue.component(_component.name as string, _component as any);
       };
-      return defineComponent(_component);
+      return defineComponent(_component as any);
     },
     createDemo: function (_component: any) {
       _component.baseName = name;
+
       _component.name = 'demo-' + name;
       return defineComponent(_component);
     }