自写一个函数将js对象转为Ts的Interface接口

今的前端开发typescript
已经成为一项必不可以少的技能了，但是频繁的定义Interface接口会给我带来许多工作量，我想了想如何来减少这些非必要且费时的工作量呢，于是决定写一个函数，将对象放进它自动帮我们转换成Interface接口，接下来就是复制粘贴的工作了，当然了如果需要调整》我们可以在手动调一下，比起一个个的定义花费的时间肯定是短了很多的。我们还以自己去完善这个函数，以达到更多你想要的效果，动手能力强的小伙伴可以尝试起来了。

可以将以下代码放入ts文件中：

// 自写一个函数将js对象转为ts接口 （参数1 js对象，参数2 ts接口名）
    function generateInterface(
      obj: any,
      interfaceName: string = 'myGeneratedInterface'
    ): string {
      const getType = (value: any): string => {
        if (value === null) {
          return 'any'
        } else if (Array.isArray(value)) {
          const arrayItemType = value.length > 0 ? getType(value[0]) : 'any'
          return `${arrayItemType}[]`
        } else if (typeof value === 'object') {
          // interfaceName + 'Item'
          return generateInterface(value, '')
        } else {
          if (typeof value === 'function') {
            return 'Function'
          }
          return typeof value
        }
      }

      const properties: string[] = []

      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          const value = obj[key]
          const type = getType(value)
          properties.push(`${key}: ${type};`)
        }
      }
      // 最外层的添加 interface ${interfaceName}
      let interfaceCode
      if (interfaceName) {
        interfaceCode = `interface ${interfaceName} {
${properties.join('\n    ')}
}`
      } else {
        interfaceCode = `{
${properties.join('\n    ')}
}`
      }
      return interfaceCode
    }
    // 用该对象测试
    const myObject = {
      name: 'John',
      age: 18,
      isStudent: true,
      hobbies: ['reading', 'coding'],
      address: {
        city: 'Example City',
        zipCode: 12345,
        hobbies2: ['reading', 'coding'],
        isStudent2: true,
      },
      nullValue: null,
    }
    // 打印测试下转换的结果如何
    console.log(generateInterface(myObject, 'Person'))
    // 最终打印结果：
    // interface Person {
    //     name: string;
    //     age: number;
    //     isStudent: boolean;
    //     hobbies: string[];
    //     address: {
    //         city: string;
    //         zipCode: number;
    //         hobbies2: string[];
    //         isStudent2: boolean;
    //     };
    //     nullValue: any;
    // }

看一下控制台呈现的结果：

看起来还不错，控制台输出的这段代码复制粘贴就可以使用了。

欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。

在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。

此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。

我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。

如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！

#前端面试#

近使用Docusaurus做了一套文档系统，需要扩展一个小功能，开发plugin的话成本有点高，不太值得，就想用全局js来实现，那么该如何在Docusaurus中使用全局js呢？

如果您希望向 Docusaurus 网站添加全局 JavaScript，可以按照以下步骤进行操作：

在你的 Docusaurus 项目中创建一个 static 文件夹（如果不存在的话）。
在 static 文件夹中创建一个新的 JavaScript 文件，例如 global.js。
在 global.js 文件中编写你的全局 JavaScript 代码。
打开 docusaurus.config.js 文件，找到 scripts 配置项，然后添加一个新项：

module.exports = {
  //...
  scripts: [
    {src: '/global.js', async: true},
  ],
};

在上面的代码中，src 属性指定了你的全局 JavaScript 文件路径，async 属性可以让你的网站在加载全局 JavaScript 文件时更快。

保存文件并重新启动 Docusaurus 服务，现在你的全局 JavaScript 应该已经成功添加到每个页面的 <head> 中了。

注意：如果您的网站是部署到 GitHub Pages 或类似的静态托管服务上，您需要在 index.html 中手动添加全局 JavaScript 文件的引用，因为 Docusaurus 配置的全局 JavaScript 在这些环境中可能不起作用。

本文永久链接: https://www.mulianju.com/docusaurus-global-js/

言

WKWebView是iOS8 出来的浏览器控件,用来取代UIWebView.对于WKWebView与UIWebView的对比特点,这里就不过多的叙述,都算是老生常谈的问题了,网上的说明也很多.近来在做Web端,需要植入移动端,并且做JS交互工作.以前写过的JavaScript:浅谈iOS与H5的交互-JavaScriptCore框架是用于UIWebView.在WKWebView并不适用了,自己做的过程中遇到一些坑,在这里总结一下,做一下记录.

WKWebView加载本地 html文件

现在的项目要求就是使用存储在本地的html文件 js文件 css文件 img图片等文件.我使用HBuilder创建了一个Demo工程.里面包含了基本的文件以及图片资源.如下所示.然后拖到Xcode工程中.

然后我们把整个Html工程文件夹导入工程中.

WKWebView 在iOS 9 有新的加载本地方法- (nullable WKNavigation *)loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL API_AVAILABLE(macosx(10.11), ios(9.0));.但是我看了网上有一些博客说- (nullable WKNavigation *)loadRequest:(NSURLRequest *)request;并不能加载本地html文件.其实两者都能加载.只是需要把路径写对.第一个方法就不过多叙述了.网上有很多的博客.这里我就用第二个方法来看一下如何加载.

NSString *path = [[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"index.html"];

NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]];

[_mainWebView loadRequest: request];

运行效果图如下.

Xcode工程中 html文件加载js文件 css文件 img文件

上面我们加载了html.可是css样式 .img文件和js文件都没有加载出来.那么我们该如何解决呢?(html原始加载图如下所示.)

对于css文件、img文件 ,js文件我们只需要把html文件中的文件夹路径删除即可.如下所示.

❗️❗️❗️❗️ 注意:这里是使用的- (WKNavigation *)loadRequest:(NSURLRequest *)request;方式加载的网页.所有如上设置即可.如果使用的是loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL或者loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;都需要设置本地资源文件所对应的路径! 我们只需要把资源文件所对应的路径设置给readAccessURL 和 baseURL即可(). 例如下面所示.

//假定都在工程根目录之下.

NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];

[_mainWebView loadHTMLString:[self loadHtmlString] baseURL:baseURL];

对于js文件,有时候我们发现我们就算如上删除了js文件夹的路径依然不能使用.这是为什么呢?.这里就要去检测查看工程的设置,是否把js文件当成一个可编译文件使用了.我们需要把它移动到资源文件中.这样就能正常加载了.如下图所示.

WKWebView中警告窗确认面板输入框的显示

相比于UIWebView,WKWebView对警告窗确认面板输入框并不能直接显示.是通过WKUIDelegate代理方法收到对应的回调方法.如下所示.

//接收到警告面板

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler;

//接收到确认面板

- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;

//接收到输入框

- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable result))completionHandler;

我们只需要对上面的回调方法进行实现即可实现显示警告窗确认面板输入框等需求.

WKWebView中OC方法调用JS方法

在WKWebView OC方法调用JS方法方法比较简单.我们只需要使用如下方法即可.

- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;

看一下我写的例子.在index.js中定义一个方法.方法内容为弹出一个警告框.代码如下所示.

function alertAction(message) {

alert(message);

}

然后在ViewController控制器中定义一个Button.定义它的点击方法.代码如下所示.

- (UIButton *)alertButton{

if (_alertButton == nil) {

_alertButton = [[UIButton alloc] initWithFrame:CGRectMake(KMainWidth*0.2, KMainHeight - 60, KMainWidth * 0.6, 40)];

_alertButton.backgroundColor = [UIColor colorWithRed:250/255.0 green:204/255.0 blue:96/255.0 alpha:1.0];

_alertButton.layer.cornerRadius = 6.0f;

_alertButton.layer.masksToBounds = YES;

_alertButton.titleLabel.font = [UIFont systemFontOfSize:16];

[_alertButton setTitle:@"弹出弹窗" forState:UIControlStateNormal];

[_alertButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

[_alertButton addTarget:self action:@selector(alertButtonAction) forControlEvents:UIControlEventTouchUpInside];

}

return _alertButton;

}

- (void)alertButtonAction{

[self.mainWebView evaluateJavaScript:@"alertAction('OC调用JS警告窗方法')" completionHandler:^(id _Nullable item, NSError * _Nullable error) {

NSLog(@"alert");

}];

}

因为弹窗不能直接显示.所以我们实现了对应的代理方法.如下所示.

//接收到警告面板

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{

UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提示" message:message preferredStyle:UIAlertControllerStyleAlert];

UIAlertAction *action = [UIAlertAction actionWithTitle:@"ok" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {

completionHandler();//此处的completionHandler()就是调用JS方法时，`evaluateJavaScript`方法中的completionHandler

}];

[alert addAction:action];

[self presentViewController:alert animated:YES completion:nil];

}

这时候我们点击按钮就会调用对应的JS方法了.相比于JavaScriptCore框架还是非常简单的.效果图如下所示.

WKWebView中JS方法调用OC方法

上一个模块我们看到了OC方法调用JS方法.那么JS方法调用OC方法呢?我们也只需要几步就可以完成调用.

第一步.我们需要在WKWebView创建的过程中初始化添加ScriptMessageHandler.(命名自定例如:currentCookies.如下所示)

WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];

WKUserContentController *userController = [[WKUserContentController alloc] init];

configuration.userContentController = userController;

_mainWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, KMainWidth, KMainHeight) configuration:configuration];

[userController addScriptMessageHandler:self name:@"currentCookies"];

然后实现代理方法.监听JS的回调.为了查看效果,我们仍然使用弹窗的形式展示我们的回调信息.代码如下所示.

//JS调用的OC回调方法

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{

if ([message.name isEqualToString:@"currentCookies"]) {

NSString *cookiesStr = message.body;

NSLog(@"当前的cookie为： %@", cookiesStr);

UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提示" message:@"JS调用的OC回调方法" preferredStyle:UIAlertControllerStyleAlert];

UIAlertAction *action = [UIAlertAction actionWithTitle:@"ok" style:UIAlertActionStyleCancel handler:nil];

[alert addAction:action];

[self presentViewController:alert animated:YES completion:nil];

}

然后在Html文件中添加点击方法.

点击调用OC方法

</div>

紧接着.在js文件中实现点击事件.这时候要注意的是ScriptMessageHandler的名称要与上面定义的一致.

function buttonDivAction() {

window.webkit.messageHandlers.currentCookies.postMessage({

"body": "buttonActionMessage"

});

}

然后我们点击网页中对应的div就会出现对应的弹窗.效果图如下所示.

并且控制台打印信息如下所示.

总结

相比于UIWebView,WKWebView确实更加的方便快捷.本篇博客就到这里了.如果有任何问题,欢迎在评论区回复骚栋.感谢观看,最后还是附上本篇博客的Demo传送门.

在线咨询

上一篇：网页版「文件传输助手」上线！1G 内都能传，不用在打印店登微信了
下一篇：HTML中的块级元素与内联元素-零基础自学网页制作

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

自写一个函数将js对象转为Ts的Interface接口

可以将以下代码放入ts文件中：

看一下控制台呈现的结果：

您的项目需求