自寫一個(gè)函數(shù)將js對(duì)象轉(zhuǎn)為Ts的Interface接口

今的前端開發(fā)typescript
已經(jīng)成為一項(xiàng)必不可以少的技能了，但是頻繁的定義Interface接口會(huì)給我?guī)碓S多工作量，我想了想如何來減少這些非必要且費(fèi)時(shí)的工作量呢，于是決定寫一個(gè)函數(shù)，將對(duì)象放進(jìn)它自動(dòng)幫我們轉(zhuǎn)換成Interface接口，接下來就是復(fù)制粘貼的工作了，當(dāng)然了如果需要調(diào)整》我們可以在手動(dòng)調(diào)一下，比起一個(gè)個(gè)的定義花費(fèi)的時(shí)間肯定是短了很多的。我們還以自己去完善這個(gè)函數(shù)，以達(dá)到更多你想要的效果，動(dòng)手能力強(qiáng)的小伙伴可以嘗試起來了。

可以將以下代碼放入ts文件中：

// 自寫一個(gè)函數(shù)將js對(duì)象轉(zhuǎn)為ts接口 （參數(shù)1 js對(duì)象，參數(shù)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
    }
    // 用該對(duì)象測(cè)試
    const myObject = {
      name: 'John',
      age: 18,
      isStudent: true,
      hobbies: ['reading', 'coding'],
      address: {
        city: 'Example City',
        zipCode: 12345,
        hobbies2: ['reading', 'coding'],
        isStudent2: true,
      },
      nullValue: null,
    }
    // 打印測(cè)試下轉(zhuǎn)換的結(jié)果如何
    console.log(generateInterface(myObject, 'Person'))
    // 最終打印結(jié)果：
    // interface Person {
    //     name: string;
    //     age: number;
    //     isStudent: boolean;
    //     hobbies: string[];
    //     address: {
    //         city: string;
    //         zipCode: number;
    //         hobbies2: string[];
    //         isStudent2: boolean;
    //     };
    //     nullValue: any;
    // }

看一下控制臺(tái)呈現(xiàn)的結(jié)果：

看起來還不錯(cuò)，控制臺(tái)輸出的這段代碼復(fù)制粘貼就可以使用了。

歡迎關(guān)注我的原創(chuàng)文章：小伙伴們！我是一名熱衷于前端開發(fā)的作者，致力于分享我的知識(shí)和經(jīng)驗(yàn)，幫助其他學(xué)習(xí)前端的小伙伴們。在我的文章中，你將會(huì)找到大量關(guān)于前端開發(fā)的精彩內(nèi)容。

學(xué)習(xí)前端技術(shù)是現(xiàn)代互聯(lián)網(wǎng)時(shí)代中非常重要的一項(xiàng)技能。無論你是想成為一名專業(yè)的前端工程師，還是僅僅對(duì)前端開發(fā)感興趣，我的文章將能為你提供寶貴的指導(dǎo)和知識(shí)。

在我的文章中，你將會(huì)學(xué)到如何使用HTML、CSS和JavaScript創(chuàng)建精美的網(wǎng)頁(yè)。我將深入講解每個(gè)語言的基礎(chǔ)知識(shí)，并提供一些實(shí)用技巧和最佳實(shí)踐。無論你是初學(xué)者還是有一定經(jīng)驗(yàn)的開發(fā)者，我的文章都能夠滿足你的學(xué)習(xí)需求。

此外，我還會(huì)分享一些關(guān)于前端開發(fā)的最新動(dòng)態(tài)和行業(yè)趨勢(shì)。互聯(lián)網(wǎng)技術(shù)在不斷發(fā)展，新的框架和工具層出不窮。通過我的文章，你將會(huì)了解到最新的前端技術(shù)趨勢(shì)，并了解如何應(yīng)對(duì)這些變化。

我深知學(xué)習(xí)前端不易，因此我將盡力以簡(jiǎn)潔明了的方式解釋復(fù)雜的概念，并提供一些易于理解的實(shí)例和案例。我希望我的文章能夠幫助你更快地理解前端開發(fā)，并提升你的技能。

如果你想了解更多關(guān)于前端開發(fā)的內(nèi)容，不妨關(guān)注我的原創(chuàng)文章。我會(huì)不定期更新，為你帶來最新的前端技術(shù)和知識(shí)。感謝你的關(guān)注和支持，我們一起探討交流技術(shù)共同進(jìn)步，期待與你一同探索前端開發(fā)的奇妙世界！

#前端面試#

近使用Docusaurus做了一套文檔系統(tǒng)，需要擴(kuò)展一個(gè)小功能，開發(fā)plugin的話成本有點(diǎn)高，不太值得，就想用全局js來實(shí)現(xiàn)，那么該如何在Docusaurus中使用全局js呢？

如果您希望向 Docusaurus 網(wǎng)站添加全局 JavaScript，可以按照以下步驟進(jìn)行操作：

在你的 Docusaurus 項(xiàng)目中創(chuàng)建一個(gè) static 文件夾（如果不存在的話）。
在 static 文件夾中創(chuàng)建一個(gè)新的 JavaScript 文件，例如 global.js。
在 global.js 文件中編寫你的全局 JavaScript 代碼。
打開 docusaurus.config.js 文件，找到 scripts 配置項(xiàng)，然后添加一個(gè)新項(xiàng)：

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

在上面的代碼中，src 屬性指定了你的全局 JavaScript 文件路徑，async 屬性可以讓你的網(wǎng)站在加載全局 JavaScript 文件時(shí)更快。

保存文件并重新啟動(dòng) Docusaurus 服務(wù)，現(xiàn)在你的全局 JavaScript 應(yīng)該已經(jīng)成功添加到每個(gè)頁(yè)面的 <head> 中了。

注意：如果您的網(wǎng)站是部署到 GitHub Pages 或類似的靜態(tài)托管服務(wù)上，您需要在 index.html 中手動(dòng)添加全局 JavaScript 文件的引用，因?yàn)?Docusaurus 配置的全局 JavaScript 在這些環(huán)境中可能不起作用。

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

言

WKWebView是iOS8 出來的瀏覽器控件,用來取代UIWebView.對(duì)于WKWebView與UIWebView的對(duì)比特點(diǎn),這里就不過多的敘述,都算是老生常談的問題了,網(wǎng)上的說明也很多.近來在做Web端,需要植入移動(dòng)端,并且做JS交互工作.以前寫過的JavaScript:淺談iOS與H5的交互-JavaScriptCore框架是用于UIWebView.在WKWebView并不適用了,自己做的過程中遇到一些坑,在這里總結(jié)一下,做一下記錄.

WKWebView加載本地 html文件

現(xiàn)在的項(xiàng)目要求就是使用存儲(chǔ)在本地的html文件 js文件 css文件 img圖片等文件.我使用HBuilder創(chuàng)建了一個(gè)Demo工程.里面包含了基本的文件以及圖片資源.如下所示.然后拖到Xcode工程中.

然后我們把整個(gè)Html工程文件夾導(dǎo)入工程中.

WKWebView 在iOS 9 有新的加載本地方法- (nullable WKNavigation *)loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL API_AVAILABLE(macosx(10.11), ios(9.0));.但是我看了網(wǎng)上有一些博客說- (nullable WKNavigation *)loadRequest:(NSURLRequest *)request;并不能加載本地html文件.其實(shí)兩者都能加載.只是需要把路徑寫對(duì).第一個(gè)方法就不過多敘述了.網(wǎng)上有很多的博客.這里我就用第二個(gè)方法來看一下如何加載.

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

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

[_mainWebView loadRequest: request];

運(yùn)行效果圖如下.

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

上面我們加載了html.可是css樣式 .img文件和js文件都沒有加載出來.那么我們?cè)撊绾谓鉀Q呢?(html原始加載圖如下所示.)

對(duì)于css文件、img文件 ,js文件我們只需要把html文件中的文件夾路徑刪除即可.如下所示.

???????? 注意:這里是使用的- (WKNavigation *)loadRequest:(NSURLRequest *)request;方式加載的網(wǎng)頁(yè).所有如上設(shè)置即可.如果使用的是loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL或者loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;都需要設(shè)置本地資源文件所對(duì)應(yīng)的路徑! 我們只需要把資源文件所對(duì)應(yīng)的路徑設(shè)置給readAccessURL 和 baseURL即可(). 例如下面所示.

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

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

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

對(duì)于js文件,有時(shí)候我們發(fā)現(xiàn)我們就算如上刪除了js文件夾的路徑依然不能使用.這是為什么呢?.這里就要去檢測(cè)查看工程的設(shè)置,是否把js文件當(dāng)成一個(gè)可編譯文件使用了.我們需要把它移動(dòng)到資源文件中.這樣就能正常加載了.如下圖所示.

WKWebView中警告窗確認(rèn)面板輸入框的顯示

相比于UIWebView,WKWebView對(duì)警告窗確認(rèn)面板輸入框并不能直接顯示.是通過WKUIDelegate代理方法收到對(duì)應(yīng)的回調(diào)方法.如下所示.

//接收到警告面板

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

//接收到確認(rèn)面板

- (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;

我們只需要對(duì)上面的回調(diào)方法進(jìn)行實(shí)現(xiàn)即可實(shí)現(xiàn)顯示警告窗確認(rèn)面板輸入框等需求.

WKWebView中OC方法調(diào)用JS方法

在WKWebView OC方法調(diào)用JS方法方法比較簡(jiǎn)單.我們只需要使用如下方法即可.

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

看一下我寫的例子.在index.js中定義一個(gè)方法.方法內(nèi)容為彈出一個(gè)警告框.代碼如下所示.

function alertAction(message) {

alert(message);

}

然后在ViewController控制器中定義一個(gè)Button.定義它的點(diǎn)擊方法.代碼如下所示.

- (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調(diào)用JS警告窗方法')" completionHandler:^(id _Nullable item, NSError * _Nullable error) {

NSLog(@"alert");

}];

}

因?yàn)閺棿安荒苤苯语@示.所以我們實(shí)現(xiàn)了對(duì)應(yīng)的代理方法.如下所示.

//接收到警告面板

- (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()就是調(diào)用JS方法時(shí)，`evaluateJavaScript`方法中的completionHandler

}];

[alert addAction:action];

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

}

這時(shí)候我們點(diǎn)擊按鈕就會(huì)調(diào)用對(duì)應(yīng)的JS方法了.相比于JavaScriptCore框架還是非常簡(jiǎn)單的.效果圖如下所示.

WKWebView中JS方法調(diào)用OC方法

上一個(gè)模塊我們看到了OC方法調(diào)用JS方法.那么JS方法調(diào)用OC方法呢?我們也只需要幾步就可以完成調(diào)用.

第一步.我們需要在WKWebView創(chuàng)建的過程中初始化添加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"];

然后實(shí)現(xiàn)代理方法.監(jiān)聽JS的回調(diào).為了查看效果,我們?nèi)匀皇褂脧棿暗男问秸故疚覀兊幕卣{(diào)信息.代碼如下所示.

//JS調(diào)用的OC回調(diào)方法

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

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

NSString *cookiesStr = message.body;

NSLog(@"當(dāng)前的cookie為： %@", cookiesStr);

UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提示" message:@"JS調(diào)用的OC回調(diào)方法" preferredStyle:UIAlertControllerStyleAlert];

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

[alert addAction:action];

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

}

然后在Html文件中添加點(diǎn)擊方法.

點(diǎn)擊調(diào)用OC方法

</div>

緊接著.在js文件中實(shí)現(xiàn)點(diǎn)擊事件.這時(shí)候要注意的是ScriptMessageHandler的名稱要與上面定義的一致.

function buttonDivAction() {

window.webkit.messageHandlers.currentCookies.postMessage({

"body": "buttonActionMessage"

});

}

然后我們點(diǎn)擊網(wǎng)頁(yè)中對(duì)應(yīng)的div就會(huì)出現(xiàn)對(duì)應(yīng)的彈窗.效果圖如下所示.

并且控制臺(tái)打印信息如下所示.

總結(jié)

相比于UIWebView,WKWebView確實(shí)更加的方便快捷.本篇博客就到這里了.如果有任何問題,歡迎在評(píng)論區(qū)回復(fù)騷棟.感謝觀看,最后還是附上本篇博客的Demo傳送門.

在線咨詢

上一篇：網(wǎng)頁(yè)版「文件傳輸助手」上線！1G 內(nèi)都能傳，不用在打印店登微信了
下一篇：HTML中的塊級(jí)元素與內(nèi)聯(lián)元素-零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

自寫一個(gè)函數(shù)將js對(duì)象轉(zhuǎn)為Ts的Interface接口

可以將以下代碼放入ts文件中：

看一下控制臺(tái)呈現(xiàn)的結(jié)果：

您的項(xiàng)目需求