web-dev-qa-db-ja.com

Typescriptを使用するときにNativeScriptでネイティブAPIにアクセスするにはどうすればよいですか

Tnsを使用して2つの新しいアプリを作成すると、1つは通常のjsバージョンで、もう1つはTypeScriptを使用します。ネイティブライブラリにアクセスしようとすると、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;
nativescript
19
Aron

TypeScriptは強く型付けされた言語であり、変数ごとに明示的な型定義が必要です（例：pow）。 anyにキャストする代わりに、NativeScriptによって事前に生成された定義ファイルを提供できます。これにより、ネイティブAndroidおよびiOSAPIの入力とIntelliSenseが可能になります。

デフォルトのNativeScriptの最新リリースでは、プラットフォーム宣言ファイルなしでアプリを作成しています（Android17.d.ts for Android and ios.d.ts iOSの場合）これらのファイルがないと、TypeScriptはネイティブAPI参照を認識しません。定義ファイルを含めない理由-これらは非常に大きく、開発者がTypeScriptを使用する場合にのみ必要です（またはAngular）+ネイティブAPIへのアクセス。

解決策：

1.）開発者の依存関係として定義ファイルをインストールします

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

これにより、プラットフォーム宣言ファイルがnode_modules/tns-platform-declarationsにインストールされます。

2.）メインアプリディレクトリにreferences.d.tsを作成し、add以下を作成します

// SEE the updated paths below

今、あなたは行ってもいいです！

更新（2017年10月現在-tns-core-modules 3.xx（またはそれ以上）およびtns-platform-declarations 3.xx（またはそれ以上）をインストールした場合）: npmプラグインの機能が異なりますこれらが適切なパスになるように構造化します（create 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"
        ]
    }
}
37
Nick Iliev