无法获得 static get data() 中的属性值

[Sihan-Tan]

https://github.com/Tencent/omi/blob/master/README.CN.md
当我按照该文档进行的时候,出现了如下的错误:

1. 安装全局 omi-cli 并使用 omi init-ts 创建了 一个ts 的项目.
2. 删除自动生成的 index.tsx 和 hello-omi.tsx 文件
3. 将 快速入门下 的 Hello Element 和 使用该 element 的内容 分别 放入 hello-element.tsx , 和 index.tsx
4. 在vscode 编辑器中 提示如下:
   
5. npm run start , 编译出现如下错误
   
   当我将 4 中的 this.data.abc = ' by ' + evt.detail.name 注释之后, 则可以编译通过. 显示正常.

另外, 当我给tag 命名成单个单词, 如 hello 而非 hello-element 或 hello-world 时, 会出现如下错误:

请问, 是我哪里的 打开方式不对么? 求解答.谢谢

[dntzhang]

要加这个才能编译通过吧？
https://github.com/Tencent/omi/blob/master/packages/omi-cli/template/app-ts/src/index.tsx#L6-L11

具体看下这个相关的 issues #107

tag name的必须包含中画线，这是 webcomponents 规范规定的

[dntzhang]

https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define#Parameters

Name for the new custom element. Note that custom element names must contain a hyphen.

[xcatliu]

https://github.com/Tencent/omi/blob/master/packages/omi-cli/template/app-ts/src/index.tsx#L17-L23

interface MyAppData {
    abc: string;
    passToChild: string;
}

@tag('my-app')
class MyApp extends WeElement<MyAppProps, MyAppData> {

需要创建一个 interface MyAppData 表示 this.data 的类型

为什么要删掉自动生成的 index.tsx 和 hello-omi.tsx 文件呢？
这两个文件就是用来教你怎么用 ts 写 omi 的呀

[Sihan-Tan]

@dntzhang @xcatliu 不止是要加 MyAppData 这一个接口, 还需要加上 MyAppProps 这个接口才行, 但是 给 data() 设定的类型是 MyAppData, 按道理讲并没有 MyAppProps 什么事. 为什么在这里却要加上这个类型定义才能过编译..

[Sihan-Tan]

是因为 组件中 的 fire 触发了事件提交, 所以要 定义 子组件中的 name 的数据类型 么?

[xcatliu]

@dntzhang @xcatliu 不止是要加 MyAppData 这一个接口, 还需要加上 MyAppProps 这个接口才行, 但是 给 data() 设定的类型是 MyAppData, 按道理讲并没有 MyAppProps 什么事. 为什么在这里却要加上这个类型定义才能过编译..

如果没有 props 的话，可以设为空对象 {}

@tag('my-app')
class MyApp extends WeElement<{}, MyAppData> {

[xcatliu]

是因为 组件中 的 fire 触发了事件提交, 所以要 定义 子组件中的 name 的数据类型 么?

不定义 name 的类型也可以，就是 any

[Sihan-Tan]

@xcatliu 嗯, 知道, 但是 为什么 快速入手中的 代码 copy过来 跑不动呢? 这让人很伤心. 还是说 那些 代码 不支持 ts 版?

[xcatliu]

快速入手的代码直接 copy 过来当然跑不动了，因为缺少了 ts 的类型的定义啊。
就像 React 把入门代码 copy 到 ts 项目中一样会报错：

没有定义好 props 的类型就使用 props 中的 foo，当然就会报错了

[Sihan-Tan]

好的, 刚弄ts, 不太懂,谢谢大佬 解答.