使用Typescript时如何在NativeScript中访问Native api [英] How can I access Native api in NativeScript when I use Typescript

问题描述

当我用tns创建两个新应用时，一个是常规js版本，一个是打字稿.尝试访问本机库时，打字稿版本出现一个奇怪的错误.

When I create two new apps with tns, one is the regular js version and one is with typescript. I get a strange error in the typescript version when I try to access a native library.

当我使用console.log(pow(x，y))创建一个加载的函数时，它在js版本中可以正常工作，但打字稿版本会因该错误而崩溃.

When I create a loaded function with a console.log(pow(x,y)), it works fine with the js version but the typescript version crashes with this error.

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;

推荐答案

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

TypeScript is strongly typed language and needs an explicit type definition for each variable (e.g. like pow). Instead of casting to any, you could provide definition files pre-generated by NativeScript that will give you typing and IntelliSense for the native Android and iOS APIs.

默认情况下，NativeScript的最新版本是创建不带平台声明文件的应用程序(对于Android是 android17.d.ts ，对于iOS是 ios.d.ts )如果没有这些文件，您的TypeScript根本就不了解本机API引用. 不包含定义文件的原因-这些文件很大，只有在开发人员要使用TypeScript(或Angular)+访问本机API时才需要.

The latest release of NativeScript by default is creating the app without the platform declaration files (android17.d.ts for Android and ios.d.ts for iOS) and without those files, your TypeScript simply does not know about the native APIs references. The reason not to include the definition files - those are enormously big and are needed only when the developers are going to use TypeScript (or Angular) + access to native APIs.

解决方案:

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

1.) Install the definition files as a developer dependency

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

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

This will install your platform declaraion files in node_modules/tns-platform-declarations

2.)在主应用目录中创建 references.d.ts ，并添加以下内容

2.) Create references.d.ts in your main app directory and add the following

// SEE the updated paths below

现在你可以去了！

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

UPDATE (as of October 2017 - with installing tns-core-modules 3.x.x (or above) and tns-platform-declarations 3.x.x (or above)): The npm plugin now has a different structure so these are the proper paths (create references.d.ts file in the root directory and place the one below)

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

重要:您的 tsconfig.json 应该如下所示:

Important: Your tsconfig.json should look like this:

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

这篇关于使用Typescript时如何在NativeScript中访问Native api的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！