type.d.ts 无法使用 typescript编写代码！

John0King commented 3 years ago

具体表现位， defineComponent 的时候，无法编写自定义的方法，如果使用 defineComponent<any,any> 则在所有的方法中， this 变成了 any, 我们需求可以推断的定义文件

John0King commented 3 years ago

defineComponent 定义其他方法的时候， this 的类型是 any ,

otakustay commented 3 years ago

给几段能复现的代码，我来试一试

John0King commented 3 years ago

就是简单的 san.defineComponent<T,U>() 啊，首先 Vue可以不用写 T,U, 自动推导，但是在不拆分 methods 的情况下，几乎做不到这点， typescript 好像不允许在一个已经定义了其他东西的对象里面在用 Map 方式定义其他的

在一个就是 U 的类型，如果给 U类型，他必须是个泛型，因为 this 的类型需要同时 T 和 U , 这样要么在生命周期函数里面无法调用 U 的成员，要么自定义方法成员的 this 是 any,

所以用 ts 最好采用 class 的方式（最好可以有装饰器），但是好像 typing 不支持

errorrik commented 3 years ago

U看起来是有些问题。我们会重写一下 .d.ts，不过这可能需要一些时间和讨论。之前的修改，会先发个版本，ts重写完，再发个新版本

John0King commented 3 years ago

@otakustay @errorrik 我发现 san 现在有点零散，首先是cli 默认的demo 都不是单文件，我也不知道如何去搞 webpack , webpack 不太会，然后就是 typescript的支持， san 在很大程度上模仿了 Vue , 并且具备 react 的某些思想（react 不太会），总的来说 Vue 的设计，导致了它必然在 typescript支持上比较弱，他模糊化了用户定义的 component 的类型, 如果说 react 对 typescript 的支持得益于 tsx 本身的化， Angular 在 typescript 的支持可以说更贴近原本的js 和 typescript的关系。

总结一下我对 Vue 和 Angular 的心得。

Vue2 的设计， store 对 Vue component 直接进行了修改（$store 类字段）， Angular 通过依赖注入来获得 service （用户定义的类字符）
Vue2 ，状态必须定义在 store里面， San 现在是直接更新了到了 component 的data里面，action在store里面， Angular 状态在 service 里面， dispatch action 就是调用 service 的方法，而这一点san在不适用definePorperty的情况下目前很难改变.

建议的使用方式

通过类定义san的component , (js 可以了， typescript 好像type有点点问题)
通过装饰器隐藏一些san的js操作
CLI 默认化，现在CLI 工具太不规范了，采用直接的 webpack 而且很多东西默认没有引入进来，最少的保障，应该是集成了 scss,less,typescript, san单文件功能

为什么一定是 export default , 我觉得可能单文件里面，需要将html合并到 default 里面的属性上，问题不大，但是可以通过向 angular 单文件一下，直接采用 ts定义


@Component(
{
 template: `<div></div>`, // 给类新增 静态字段 template
 //templateUrl: `xx.html`, // 同上但是 require("xx.html")  , 这个不重要，也不确定装饰器的非metadata能不能这么干（路径问题）

}) @Store() // 由store提供，代替 store.connecte export default MyComponent extends Component{ @watch('user.name') onUserNameChange(){ .... }

    @storeAction("user.changeUserName")
     changeUserName(name:string){  return name }// 被转化成 store的操作，简单的包装一下

}

Lohoyo commented 3 years ago

CLI 默认化，现在CLI 工具太不规范了，采用直接的 webpack 而且很多东西默认没有引入进来，最少的保障，应该是集成了 scss,less,typescript, san单文件功能

用 CLI 创建项目时，CSS 预处理器提供了 Less、Sass、Stylus 这 3 种选择，用户选择任一种后都能直接使用，不需要额外的配置。 CLI 对 San 单文件组件的支持也是开箱即用的，直接写 .san 文件就行，用户不需要另外配置。 TypeScript 的话，倒是确实需要用户自己在 san.config.js 里配置下 ts-loader。

John0King commented 3 years ago

@Lohoyo 但是CLI太零散是个事实啊，单文件很好，但是默认生成里面没有，我现在主要是想用单文件，编译成 UMD 格式的单个文件（我想在 IE8 里面的aspx 里面用），我有点想自己配webpack , 但是 webpack 入门有点难，有点怀念 Vue cli ，默认打包成 UMD 格式，可以用单文件维护组件， js 在页面上调用

zhmushan commented 3 years ago

@Lohoyo 但是CLI太零散是个事实啊，单文件很好，但是默认生成里面没有，我现在主要是想用单文件，编译成 UMD 格式的单个文件（我想在 IE8 里面的aspx 里面用），我有点想自己配webpack , 但是 webpack 入门有点难，有点怀念 Vue cli ，默认打包成 UMD 格式，可以用单文件维护组件， js 在页面上调用

@John0King 试试参考下这个 san-loader example

John0King commented 3 years ago

这个可以打包成 UMD 么？我想把一堆组件用 index.ts 全部导出来，然后用 <script src="path/MyUmdName.js"> 应用，然后用 MyUmdName.ComponenentName 来访问我的组件 , UMD的好处就是同步异步都支持

John0King commented 3 years ago

@otakustay @zhmushan @errorrik @Lohoyo

//index.d.ts

export = San;

使用 typescript 的默认模式（无npm, webpack），这句是不正确的，因为这样无法导出 San命名空间中的任何东西，导致无法访问任何 San.Component<T> 的定义

interface MyComponentMethods {
        showLayer(this: San.SanComponent<unknown> & ProductAreaMethods);
        inputFocus(this: San.SanComponent<unknown> & ProductAreaMethods,e: MouseEvent);
        hideLayer(this: San.SanComponent<unknown> & ProductAreaMethods);
        bodyClickAction: (e: JQuery.Event<HTMLElement, null>) => any;
        flylayer: (San.SanComponent<unknown> & ProductAreaLayerMethods) | null;
        queryAction: () => any;
        onChange(this: San.SanComponent<unknown> & ProductAreaMethods, item: any);
        onKeyup(this: San.SanComponent<unknown> & ProductAreaMethods, e: KeyboardEvent)
        onBlur(this: San.SanComponent<unknown> & ProductAreaMethods, e: Event)
    }

上面这段， San.* 全都报错，除非我再某个地方使用 require/import , 但是，这将导致我的文件生成 export 语句，或者 export.__EsModule = true 的代码

建议的修改：

namespace 里面直接 export
移除 export = San
移除 declare global ，改为直接 declare const san : SanStaticGlobal

考虑到 cli 使用 import 导入考虑增加 declear module "san" { export = San }

John0King commented 3 years ago

能给个能用的 san cli + ts 的 demo 么？

Lohoyo commented 3 years ago

能给个能用的 san cli + ts 的 demo 么？

https://github.com/Lohoyo/san-cli-ts-demo

John0King commented 3 years ago

里面没有ts 😂

获取 Outlook for Androidhttps://aka.ms/ghei36

From: Huyue @.> Sent: Monday, September 6, 2021 11:04:22 AM To: baidu/san @.> Cc: john @.>; Mention @.> Subject: Re: [baidu/san] type.d.ts 无法使用 typescript编写代码！ (#635)

能给个能用的 san cli + ts 的 demo 么？

https://github.com/Lohoyo/san-cli-ts-demo

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/baidu/san/issues/635#issuecomment-913302168, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ADIB32VV22REFDY455TU6CDUAQVTNANCNFSM5AXWZGTA. Triage notifications on the go with GitHub Mobile for iOShttps://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Androidhttps://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

Lohoyo commented 3 years ago

里面没有ts 😂

在这里： https://github.com/Lohoyo/san-cli-ts-demo/blob/main/src/pages/index/containers/app.ts

errorrik commented 3 years ago

@John0King 看看这个？ https://stackoverflow.com/questions/56238356/understanding-esmoduleinterop-in-tsconfig-file

John0King commented 3 years ago

@errorrik

安装了最新的 san cli , 并且永 san init 设置了一个 typescript + store 的项目

san server

san-cli@4.1.0/san-cli-serve@2.0.0
i Starting development server...                                                                                                                 上午9:59:33

* Serve █████████████████████████ setup (3%)
 watch run

Error: not found: php
    at getNotFoundError (E:\zyui\zyui\node_modules\hulk-mock-server\node_modules\which\which.js:10:17)
    at Function.whichSync [as sync] (E:\zyui\zyui\node_modules\hulk-mock-server\node_modules\which\which.js:121:9)
    at serveSmarty (E:\zyui\zyui\node_modules\hulk-mock-server\serve\smarty.js:42:21)
    at processorFactory (E:\zyui\zyui\node_modules\hulk-mock-server\index.js:162:37)
    at E:\zyui\zyui\node_modules\hulk-mock-server\index.js:55:29
    at Array.map (<anonymous>)
    at middleware (E:\zyui\zyui\node_modules\hulk-mock-server\index.js:54:10)
    at E:\zyui\zyui\san.config.js:82:65
    at C:\Users\ABlue\AppData\Local\Yarn\Data\global\node_modules\san-cli-service\Service.js:578:92
    at Array.forEach (<anonymous>) {
  code: 'ENOENT'

san build log

san-cli@4.1.0/san-cli-build@2.0.0
i Building for production...                                                                                                                    上午10:02:37

× Build
  Compiled with some errors in 5.45s

 ERROR  [SanFriendlyErrorsPlugin]Failed to compile with 4 errors.                                                                               上午10:02:43

 ERROR  Loading PostCSS "postcss-import" plugin failed: Cannot find module 'postcss-import'                                                     上午10:02:43

Require stack:
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\postcss-loader\dist\utils.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\postcss-loader\dist\index.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\postcss-loader\dist\cjs.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\webpack\lib\ProgressPlugin.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\webpack\lib\index.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\san-cli-webpack\build.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\san-cli-build\run.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\san-cli-build\index.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\san-cli\index.js

(@E:\zyui\zyui\src\pages\index\containers\app.less)
    at Object.emitError (C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\webpack\lib\NormalModule.js:592:6)
    at getPostcssOptions (C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\postcss-loader\dist\utils.js:224:19)
    at Object.loader (C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\postcss-loader\dist\index.js:65:42)

 ERROR  Loading PostCSS "postcss-import" plugin failed: Cannot find module 'postcss-import'                                                     上午10:02:43

Require stack:
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\postcss-loader\dist\utils.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\postcss-loader\dist\index.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\postcss-loader\dist\cjs.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\webpack\lib\ProgressPlugin.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\webpack\lib\index.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\san-cli-webpack\build.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\san-cli-build\run.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\san-cli-build\index.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\san-cli\index.js

(@E:\zyui\zyui\src\components\demo-comment\style\index.css)
    at Object.emitError (C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\webpack\lib\NormalModule.js:592:6)
    at getPostcssOptions (C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\postcss-loader\dist\utils.js:224:19)
    at Object.loader (C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\postcss-loader\dist\index.js:65:42)

 ERROR  Loading PostCSS "postcss-import" plugin failed: Cannot find module 'postcss-import'                                                     上午10:02:43

Require stack:
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\postcss-loader\dist\utils.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\postcss-loader\dist\index.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\postcss-loader\dist\cjs.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\webpack\lib\ProgressPlugin.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\webpack\lib\index.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\san-cli-webpack\build.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\san-cli-build\run.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\san-cli-build\index.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\san-cli\index.js

(@E:\zyui\zyui\src\components\demo-publisher\style\index.css)
    at Object.emitError (C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\webpack\lib\NormalModule.js:592:6)
    at getPostcssOptions (C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\postcss-loader\dist\utils.js:224:19)
    at Object.loader (C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\postcss-loader\dist\index.js:65:42)

 ERROR  Loading PostCSS "postcss-import" plugin failed: Cannot find module 'postcss-import'                                                     上午10:02:43

Require stack:
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\postcss-loader\dist\utils.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\postcss-loader\dist\index.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\postcss-loader\dist\cjs.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\webpack\lib\ProgressPlugin.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\webpack\lib\index.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\san-cli-webpack\build.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\san-cli-build\run.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\san-cli-build\index.js
- C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\san-cli\index.js

(@E:\zyui\zyui\src\pages\demo-store\containers\app.css)
    at Object.emitError (C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\webpack\lib\NormalModule.js:592:6)
    at getPostcssOptions (C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\postcss-loader\dist\utils.js:224:19)
    at Object.loader (C:\User\<myUser>AppData\Local\Yarn\Data\global\node_modules\postcss-loader\dist\index.js:65:42)

* Build █████████████████████████ done (99%) plugins
 MultiCompiler

John0King commented 3 years ago

使用 yarn build ，现在编译成功了，但是编译后没有html, 另外 yarn start 还是不成功，需要php ?

Lohoyo commented 3 years ago

使用 yarn build ，现在编译成功了，但是编译后没有html, 另外 yarn start 还是不成功，需要php ?

在windows上用san-cli找不到php的问题可以看看这个：https://github.com/ecomfe/san-cli/issues/216 另外，创建项目时模板选html应该也可以避免这个问题，模板选smarty才会用到php。

John0King commented 3 years ago

smarty 是 php的一个模板引擎么？如果是这样，他不应该是推荐的，而且选项上应该写 PHP模板（Smarty）

Lohoyo commented 3 years ago

smarty 是 php的一个模板引擎么？如果是这样，他不应该是推荐的，而且选项上应该写 PHP模板（Smarty）

对，smarty是php的一个模板引擎。我觉得你说的有道理，我给san-cli的项目模板提了一个pr：https://github.com/wanwu/san-project/pull/20

errorrik commented 2 years ago

3.11 已经更新了 ts 和 example，这个 issue 先关了。有问题开新的吧

baidu / san

type.d.ts 无法使用 typescript编写代码！ #635

总结一下我对 Vue 和 Angular 的心得。

建议的使用方式