修改ts配置

front-end/main-app/src/app/App.tsx

@@ -1,5 +1,5 @@
-import {Component, VueComponent} from 'vue3-oop'
+import { Component, VueComponent } from 'vue3-oop'
-import {RouterLink, RouterView} from "vue-router";
+import { RouterLink, RouterView } from "vue-router";
 
 @Component()
 export class App extends VueComponent {

front-end/main-app/src/app/components/Header.tsx

@@ -1,6 +1,6 @@
-import {Component, ComponentProps, Hook, useProps, VueComponent} from 'vue3-oop'
+import { Component, ComponentProps, Hook, useProps, VueComponent } from 'vue3-oop'
-import {JSX} from "vue/jsx-runtime";
+import { JSX } from "vue/jsx-runtime";
-import {VNodeChild} from "vue";
+import { VNodeChild } from "vue";
 
 interface ListItemType {
     id: number
@@ -22,8 +22,8 @@ export default class Header extends VueComponent<HeaderProps> {
 
     // required 的 true or false 需要和 类型中 text的? 对应
     static defaultProps: ComponentProps<HeaderProps> = {
-        text: {default: '默认数值', required: true},
+        text: { default: '默认数值', required: true },
-        list: {default: () => []}
+        list: { default: () => [] }
     };
 
     @Hook('Mounted')
@@ -32,16 +32,15 @@ export default class Header extends VueComponent<HeaderProps> {
         console.log('Header 组件的 mounted 生命周期...')
     }
 
-
     render() {
-        const {text, list} = useProps<HeaderProps>();
+        const { text, list } = useProps<HeaderProps>();
 
         return (
             <div class="header">
                 头部组件
-                <p>{text}</p>
+                <p>{ text }</p>
-                {this.context.slots.default?.()}
+                { this.context.slots.default?.() }
-                {this.context.slots.haveName?.()}
+                { this.context.slots.haveName?.() }
                 <ul>
                     {
                         list.map(

front-end/main-app/src/app/views/Home.tsx

@@ -1,54 +1,53 @@
-import {Autobind, Component, Link, Mut, VueComponent} from 'vue3-oop'
+import { Autobind, Component, Link, Mut, VueComponent } from 'vue3-oop'
 import Header from '@/components/Header'
 
 
 interface ListItemType {
-  id: number
+    id: number
-  title: string
+    title: string
 }
 
 @Component()
 export default class Home extends VueComponent {
 
-  @Mut()
+    @Mut()
-  count: number = 1
+    count: number = 1
 
-  @Mut()
+    @Mut()
-  text: string = "Home props 传给 Header 的字符串"
+    text: string = "Home props 传给 Header 的字符串"
 
-  @Mut()
+    @Mut()
-  newList: ListItemType[] = [
+    newList: ListItemType[] = [
-    {id: 1, title: '新闻1'},
+        { id: 1, title: '新闻1' },
-    {id: 2, title: '新闻2'},
+        { id: 2, title: '新闻2' },
-    {id: 3, title: '新闻3'},
+        { id: 3, title: '新闻3' },
-  ]
+    ]
 
-  @Link() H1?: HTMLDivElement
+    @Link() H1?: HTMLDivElement
 
+    @Autobind()
+    async addCount() {
+        this.count++
+        this.text = "22222"
+        console.log(this.H1)
+    }
 
-  @Autobind()
+    render() {
-  async addCount() {
+        return (
-    this.count++
+            <div class="home" ref="H1">
-    this.text = "22222"
+                <h1>首页</h1>
-    console.log(this.H1)
+                <p onClick={ this.addCount }>count响应式变量（点我）：{ this.count }</p>
-  }
+                <Header
+                    v-slots={ {
+                        default: () => <div class="default">父到子 default 插槽</div>,
+                        haveName: () => <div class="haveName">父到子 具名 插槽</div>,
+                        item: (val) => <li key={ val.id }>{ val.title }</li>
+                    } }
+                    list={ this.newList }
+                    text={ this.text }>
 
-  render() {
+                </Header>
-    return (
+            </div>
-        <div class="home" ref="H1">
+        )
-          <h1>首页</h1>
+    }
-          <p onClick={this.addCount}>count响应式变量（点我）：{this.count}</p>
-          <Header
-              v-slots={{
-                default: () => <div class="default">父到子 default 插槽</div>,
-                haveName: () => <div class="haveName">父到子 具名 插槽</div>,
-                item: (val) => <li key={val.id}>{val.title}</li>
-              }}
-              list={this.newList}
-              text={this.text}>
-
-          </Header>
-        </div>
-    )
-  }
 }

front-end/main-app/tsconfig.json

@@ -16,8 +16,7 @@
     "lib": [
       "ES2020",
       "dom",
-      "dom.iterable",
+      "dom.iterable"
-      "scripthost"
     ],
     "skipLibCheck": true,
     "paths": {