当我使用Typescript时,如何在NativeScript中访问Native api

时间:2016-05-30 10:12:48

标签: nativescript

当我用tns创建两个新应用程序时,一个是常规的js版本,一个是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;

1 个答案:

答案 0 :(得分:36)

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

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

解决方案:

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

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

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

2。)在主应用目录中创建 references.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"
        ]
    }
}