在 NativeScript 中使用 TypeScript 的 async/await

Async/await 允许开发人员像编写同步代码一样编写异步代码。当目标为 ES6 时，TypeScript 中对 async/await 的支持可用，但向下编译到 ES5 尚未实现。简而言之，这个故事可以总结为：TypeScript -> ES6 -> Babel -> ES5。这是 TypeScript 团队的官方说法。

最近，关于将 TypeScript 向下编译到 ES5 的提交已合并到 TypeScript master 中，使其在 typescript@next 中可用，这样就避免了 Babel 步骤，TypeScript 直接编译到 ES5。

我们将创建一个应用程序并安装 @next，这就是关于这个的所有内容

export async function navigatingTo(args) {
   let page = args.object.page;
   let issues = await http.getJSON(nIssuesUrl);
   page.bindingContext = issues;
}

填充 GitHub 问题列表

IssuesList

Async/await 向下编译到 ES5 最近已合并到 TypeScript master 中，现在在 TypeScript @next 版本中可用。

如果你迫不及待，可以直接跳转到示例应用程序：https://github.com/PanayotCankov/NativeScript-AsyncAwait/

创建一个应用程序

要在 {N} 应用程序中使用，只需创建一个新的启用 TypeScript 的应用程序

tns create IssuesList --template typescript
cd IssuesList

在本地安装夜间构建 - typescript@next:

npm install typescript@next --save-dev

然后打开 VS Code

code .

如果 VS Code 要求你使用工作区中安装的 TypeScript - 选择是，目前，如果你不这样做，它将使用官方的 TS 版本，并且可能会抱怨在针对 ES6 时支持 async。

展示助手

{N} 提供 commonjs 模块，在每个模块中发出助手是不可取的。{N} 还提供 __extend，它有助于扩展原生 Objective-C 和 Java 类。

我们将生成一个包含 async/await 所需助手的单个文件。使用以下 typescript 创建一个 app/helpers.ts 文件

export async function test() {}

然后运行 @next tsc

./node_modules/.bin/tsc app/helpers.ts --target es5

app/helpers.js 准备就绪后，删除 app/helpers.ts。同时打开 .js 文件并编辑

var __awaiter = /* ... */
var __generator = /* ... */

到

global.__awaiter = /* ... */
global.__generator = /* ... */

你也可以删除 test() 函数。

{N} 的入口点是 app/app.js，我们将确保在那里导入助手

require('./helpers');
import * as app from 'application';
app.start({ moduleName: 'main-page' });

使用

现在，我们可以在 app/main-page.ts 中的应用程序中充分利用 async/await

import * as http from "http";

const nIssuesUrl = "https://api.github.com/repos/NativeScript/NativeScript/issues";

export async function navigatingTo(args) {
 let page = args.object.page;
 let issues = await http.getJSON(nIssuesUrl);
 console.log("issues: " + issues);
 page.bindingContext = issues;
}

现在我们所要做的就是将这些 GitHub 问题模板化到 app/main-page.xml 中

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
 <ListView items="{{ $value }}">
   <ListView.itemTemplate>
     <GridLayout columns="42, *" height="42">
       <Image src="{{ user.avatar_url }}"
           width="24" height="24"
           horizontalAlignmnet="center" verticalAlignment="center"
           borderColor="gray" borderWidth="1" borderRadius="12" />
       <Label col="1" text="{{ title }}" verticalAlignment="center" textAlignment="left" />
     </GridLayout>
   </ListView.itemTemplate>
 </ListView>
</Page>

运行

最后，我们可以运行应用程序

tns run ios

NativeScript TypeScript 插件使用安装为依赖项的 TypeScript 编译器（类似于 VS Code 的工作方式），因此它将自动选择最新版本。

现在，向下编译的代码将在我们的 ES5 环境中工作。请记住，iOS 和 Android 运行时使用 JavaScriptCore 和 V8 的自定义构建，因此新的 ES 功能会很快被采用，我们可能会很快看到 TypeScript -> ES6 就绪。

此致，