nativescript - 使用 Typescript 时如何在 NativeScript 中访问 Native api

Question

当我使用 tns 创建两个新应用程序时，一个是常规的 js 版本，一个是带有 typescript 的。当我尝试访问 native 库时，我在 typescript 版本中遇到一个奇怪的错误。

当我使用 console.log(pow(x,y)) 创建加载函数时，它适用于 js 版本，但 typescript 版本会因此错误而崩溃。

error TS2304: Cannot find name 'pow'.

为什么？

TS:

import { EventData } from "data/observable";
import { Page } from "ui/page";
import { HelloWorldModel } from "./main-view-model";

// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {
    // Get the event sender
    var page = <Page>args.object;
    page.bindingContext = new HelloWorldModel();
}

export function loaded() {
    console.log('Hello World')
    console.log('pow(2.5, 3) = ', pow(2.5, 3));
}

JS:

var createViewModel = require("./main-view-model").createViewModel;

function onNavigatingTo(args) {
    var page = args.object;
    page.bindingContext = createViewModel();
}

function loaded() {
    console.log('hello world')
    console.log('pow(2.5, 3) = ', pow(2.5, 3));
}

exports.onNavigatingTo = onNavigatingTo;
exports.loaded = loaded;

Answer 1

TypeScript 是强类型语言，需要为每个变量明确类型定义(例如 pow )。而不是转换为 any ，您可以提供由 NativeScript 预先生成的定义文件，这些文件将为您提供原生 Android 和 iOS API 的打字和 IntelliSense。

默认情况下，最新版本的 NativeScript 是在没有平台声明文件的情况下创建应用程序( android17.d.ts 用于 Android 和 ios.d.ts 用于 iOS)并且没有这些文件，你的 TypeScript 根本不知道原生 API 引用。
不包含定义文件的原因 - 这些文件非常大，只有在开发人员打算使用 TypeScript(或 Angular)+ 访问 native API 时才需要。

解决方案:

1.) 将定义文件安装为开发人员依赖项

npm i tns-platform-declarations --save-dev

这将在 node_modules/tns-platform-declarations 中安装您的平台声明文件

2.) 创建 引用资料.d.ts 在您的主应用程序目录和 添加以下

// SEE the updated paths below

现在你可以走了!

更新(截至 2017 年 10 月 - 安装 tns-core-modules 3.x.x(或更高版本)和 tns-platform-declarations 3.x.x(或更高版本)):
npm 插件现在具有不同的结构，因此这些是正确的路径(在根目录中创建 references.d.ts 文件并将其放在下面)

/// <reference path="./node_modules/tns-platform-declarations/ios/ios.d.ts" />
/// <reference path="./node_modules/tns-platform-declarations/android/android.d.ts" />

重要 : 您的 tsconfig.json 应该是这样的:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "experimentalDecorators": true,
        "lib": [
            "es6",
            "dom"
        ]
    }
}