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

Posted 2023-02-19

【中文标题】使用 Typescript 时如何在 NativeScript 中访问 Native api

【英文标题】：How can I access Native api in NativeScript when I use Typescript

【发布时间】：2016-09-28 03:07:50

【问题描述】：

当我用 tns 创建两个新应用时，一个是普通的 js 版本，一个是 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;

【参考方案1】：

TypeScript 是强类型语言，需要为每个变量明确类型定义（例如 pow）。您可以提供由 NativeScript 预先生成的定义文件，而不是强制转换为 any，这些文件将为您提供原生 android 和 ios API 的输入和 IntelliSense。

默认情况下，最新版本的 NativeScript 是在没有平台声明文件的情况下创建应用程序（android17.d.ts for Android 和 ios.d.ts for iOS）如果没有这些文件，您的 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"
        ]
    

【讨论】：

听起来合乎逻辑 - 我是 typescript 和 NativeScript 的新手。非常感谢！！

对于 ios，路径位于名为 ios 的子文件夹中。 /// <reference path="../node_modules/tns-platform-declarations/tns-core-modules/ios/ios.d.ts" />

谢谢@Rjk。但现在我得到“参考包括项目外的文件”。我做错了什么？

虽然这个答案对我有用，但如果我小心获取最新的预发布组件。我仍然收到语法错误github.com/NativeScript/NativeScript/issues/2970

不应该只是npm i tns-platform-declarations --save-dev，因为这只是在开发时需要，而不是在运行时？