feat: add types (#200)

Author: gd4Ark

docs/FAQ.md

@@ -26,3 +26,18 @@ rules: [
    }
  ]
 ```
+
+## 在 TypeScript 中指定组件的类型
+
+```html
+<script lang="ts">
+// 需要引入这个
+// import { ElFormRendererType } from '@femessage/el-form-renderer'
+export default {
+  mounted() {
+    (this.$refs.form as ElFormRendererType).readonly = true
+  },
+}
+</script>
+```
+> 关于更多可用类型请参考：[el-form-renderer.d.ts](https://github.com/FEMessage/el-form-renderer/blob/dev/src/el-form-renderer.d.ts)

package.json

@@ -28,6 +28,7 @@
   "browser": {
     "./sfc": "src/el-form-renderer.vue"
   },
+  "types": "src/el-form-renderer.d.ts",
   "scripts": {
     "dev": "vue-styleguidist server",
     "doc": "vue-styleguidist build",
@@ -60,6 +61,7 @@
     "@babel/preset-env": "^7.4.3",
     "@femessage/el-semver-input": "^1.1.3",
     "@femessage/github-release-notes": "latest",
+    "@femessage/types": "^1.0.3",
     "@vue/test-utils": "^1.0.0-beta.30",
     "axios": "^0.19.0",
     "babel-core": "^7.0.0-bridge.0",

src/el-form-renderer.d.ts

@@ -0,0 +1,87 @@
+import Vue, {VueConstructor, VNode} from 'vue'
+
+import {Form} from '@femessage/types/element-ui'
+
+declare module '@femessage/el-form-renderer' {
+  class FemessageComponent extends Vue {
+    static install(vue: typeof Vue): void
+  }
+
+  type CombinedVueInstance<
+    Instance extends Vue,
+    Data,
+    Methods,
+    Computed,
+    Props
+  > = Data & Methods & Computed & Props & Instance
+
+  type ExtendedVue<
+    Instance extends Vue,
+    Data,
+    Methods,
+    Computed,
+    Props
+  > = VueConstructor<
+    CombinedVueInstance<Instance, Data, Methods, Computed, Props> & Vue
+  >
+
+  type Combined<Data, Methods, Computed, Props> = Data &
+    Methods &
+    Computed &
+    Props
+
+  type ElFormRendererData = {
+    value: {[key: string]: any}
+    options: {[key: string]: any}
+    initValue: null | {[key: string]: any}
+  }
+
+  type ElFormRendererMethods = {
+    resetFields: () => void
+
+    getFormValue: () => {[key: string]: any}
+
+    updateForm: (newValue: any) => void
+
+    setOptions: (id: string, options: any[]) => void
+  }
+
+  type ElFormRendererComputed = {}
+
+  export interface FormContentItem {
+    id: string
+    label?: string | VNode
+    [key: string]: any
+  }
+
+  export type FormContent = Array<FormContentItem>
+
+  type ElFormRendererProps = {
+    content: FormContent
+    disabled: boolean
+    readonly: boolean
+    form: {[key: string]: any}
+  }
+
+  type ElFormRenderer = Combined<
+    ElFormRendererData,
+    ElFormRendererMethods,
+    ElFormRendererComputed,
+    ElFormRendererProps
+  >
+
+  export interface ElFormRendererType
+    extends FemessageComponent,
+      ElFormRenderer,
+      Form {}
+
+  const ElFormRendererConstruction: ExtendedVue<
+    Vue,
+    ElFormRendererData,
+    ElFormRendererMethods,
+    ElFormRendererComputed,
+    ElFormRendererProps
+  >
+
+  export default ElFormRendererConstruction
+}

yarn.lock

@@ -768,6 +768,11 @@
     require-yaml "0.0.1"
     valid-url "^1.0.9"
 
+"@femessage/types@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/@femessage/types/-/types-1.0.3.tgz#1c93d89506628c7e5a8662da4fa88e765ce57b02"
+  integrity sha512-VXeHibO3nNNgTZ5WH0wv4ejjGO3oCnyefjvmw6dZoX08DU4URcfnyw8JQ67IK0rI3xBoIyTPSWFCu29Hi7RrIQ==
+
 "@jest/console@^24.7.1":
   version "24.7.1"
   resolved "https://registry.npm.taobao.org/@jest/console/download/@jest/console-24.7.1.tgz#32a9e42535a97aedfe037e725bd67e954b459545"