创建NativeScript插件时的index.d.ts? [英] index.d.ts when creating a NativeScript plugin?

问题描述

我最近开始在NativeScript中制作一个插件-遵循文档.我使用src文件夹中的npm run demo.ios成功运行了一些.

I have recently started to make a plugin in NativeScript - following the documention. And I made some successfull runs with npm run demo.ios in the src folder.

但是，当开始构建我打算使用的实际插件时-我遇到以下错误:

However when starting to build the actual plugin I intended on - I am encountering the following error:

file:///node_modules/tns-core-modules/ui/builder/builder.js:179:0 JS错误错误:从XML构建UI. @ app-root.xml:1:1 未定义不是对象(正在评估"b.prototype")

file:///node_modules/tns-core-modules/ui/builder/builder.js:179:0 JS ERROR Error: Building UI from XML. @app-root.xml:1:1 undefined is not an object (evaluating 'b.prototype')

我已经在我尝试从演示应用程序调用的myplugin.common.ts文件中的ViewBase上设置了扩展方法

I have set up an extension method onto ViewBase in my myplugin.common.ts file that I attempt to call from the demo application

我认为问题可能出在index.d.ts上.根据文档，myplugin.ios.d.ts和myplugin.android.d.ts文件应复制到此处或手动定义.我正尝试在其中复制myplugin.common.d.ts文件内容.那有效吗?

The problem could lie in the index.d.ts I believe. According the docs the myplugin.ios.d.ts and myplugin.android.d.ts files should be copied in there or defined manually. I am attempting to copy the myplugin.common.d.ts file content in there instead. Is that valid?

我还注意到，两次运行似乎都是necceseray-因为第一次运行会生成...d.ts.，然后必须将其中的内容复制到index.d.ts.

I have also noticed two runs seem to be necceseray - since the first run generates the ...d.ts. Of which content then has to copied into index.d.ts.

一些代码...

myplugin.common.ts

myplugin.common.ts

declare module "tns-core-modules/ui/core/view-base/view-base" {
  interface ViewBase {
    myExenstionMethod(myNumber: number): void;
  }
}
ViewBase.prototype.myExenstionMethod = function(myNumber: number) {
  console.log("myNumber: " + myNumber);
}

和index.d.ts(从myplugin.common.d.ts复制):

declare module "tns-core-modules/ui/core/view-base/view-base" {
    interface ViewBase {
        myExenstionMethod(myNumber: number): void;
    }
}

它在演示项目中显示:

错误来自简单地从演示项目中的插件中导入扩展方法:

And the error comes from simply importing the extension method from the plugin in my demo project:

import "nativescript-myplugin";

---

注意

我创建了一个新的插件项目-仅添加了扩展方法并且它起作用了.因此，原始插件项目中还有其他导致错误的原因.不需要在index.d.ts中添加declare module.

I created a new plugin project - only adding the extension method and it worked. So there was something else in the original plugin project that caused the error. Adding declare module in index.d.ts was not needed.

再次点击

与以前相同的错误-从myplugin.common.ts内部实例化myplugin.ios.ts/myplugin.android.ts-myplugin类时.我最初考虑要创建一个平台特定的单例实例以与.common.ts进行交互-但这似乎行不通?

with the same error as before - when instantiating myplugin.ios.ts/myplugin.android.ts - myplugin class - from inside myplugin.common.ts. I initially thought about creating a platform specific singleton instance to interact with in .common.ts - but that does not seem to work?

import { Gestures as iOSGestures} from "./gestures.ios";
import {Gestures as AndroidGestures} from "./gestures.android";

export abstract class Common extends Observable {
  private static _instance = null;

  static instance(os: string): Common {
    if(Common._instance == null) {
      /* crash from instantiating iOSGestures or AndroidGestures */
      this._instance = os == "iOS" ? new iOSGestures() : new AndroidGestures();
    }
    return Common._instance;
  }
  abstract _attach(viewBase: ViewBase, gesture: string): void;
}

奇怪的是，从未从任何地方调用过该特定代码.注释掉这一行，我可以通过仅包含包含实例化的无效代码来创建该错误:

What is strange is that that particular code is never called from anywhere yet. And commenting out that line I can create that error by simply having dead code containing the instantiation:

// still inside .common.ts
import { Gestures } from "./gestures.android";

const object = {
  methodInFile()  {
    const g = new Gestures() // <--
  }
}

这是android.ts:

Here is the android.ts:

export class Gestures extends Common {
    _attach(viewBase: ViewBase, gesture: string): void {
        console.log("_attach android");
        if(gesture == touch.down) {

        }
    }
}

可能与index.d.ts有冲突?

It could be some sort of conflict with the index.d.ts?:

import { Common } from './gestures.common';
export declare class Gestures extends Common {
  // define your typings manually
  // or..
  // take the ios or android .d.ts files and copy/paste them here
}

这是我第一次尝试构建插件NativeScript-因此我可能设置的东西完全错误.我希望将插件作为ViewBase上的扩展方法提供-并且common.ts中定义的扩展方法被成功调用.

This my first time attempting to build a plugin NativeScript - so I might be setting things completely wrong. I hope to provide my plugin as an extension method on ViewBase though - and the extension method defined in common.ts is called successfully.

// inside common.ts
export class Gestures extends Common {
  _attach(): void {
      console.log("_attach ios");
  }
}
const object = {
  methodInFile()  {
    const g = new Gestures() // <--
  }
}

...有效.

但是，当从另一个文件导入该类时，具有new Gestures()-会导致崩溃(如上所述).创建新文件-ios.common.ts均无效.所以可能是npm run demo.ios在生成时生成了错误的js文件?我还完全删除了index.d.ts的内容-因此它不会引起错误.

But when the class is imported from another file, having new Gestures() - causes the crash as mentioned. It neither works creating a new file - ios.common.ts. So it could be that npm run demo.ios is generating faulty js files on build? I also removed the content of index.d.ts completely - so it can't involved causing the error.

为common.ts提供接口-在.ios.ts和android.ts中实现.我遇到了一个新错误；

Making the common.ts an interface - that gets implemented in .ios.ts and android.ts. I encountered a new error;

file:///app/home/home-page.ts:17:27 JS错误TypeError:page.addGestureHandler不是函数. (在'page.addGestureHandler("hello")'中，'page.addGestureHandler'未定义)

file:///app/home/home-page.ts:17:27 JS ERROR TypeError: page.addGestureHandler is not a function. (In 'page.addGestureHandler("hello")', 'page.addGestureHandler' is undefined)

到目前为止，我的结论是，我不能将Common作为抽象类或接口-将ios.ts和android.ts实例化为单例.扩展抽象Common-或实现接口Common-的类必须与(common.ts)在同一文件中. 这可能与我使用扩展方法作为插件的入口点有关.

My conclusion so far is that I can't have Common as an abstract class or interface - and instantiate ios.ts and android.ts as singletons. The class extending abstract Common - or implementing interface Common - must be in the same file as (common.ts). This can be related to the fact I am using an extension method as entry point into the plugin.

推荐答案

TypeScript声明(*.d.ts)仅出于对IDE的IntelliSense支持的考虑.因此，只要您导出要公开的权限定义，就没有所谓的有效或无效.大多数插件只会导出index.d.ts，通常会显示*-common.ts中的所有内容.

TypeScript declarations (*.d.ts) are just for the sake of IntelliSense support with your IDE. Hence there is nothing called valid or invalid as long you export right definitions you want to expose. Most plugins will just export index.d.ts that will usually expose everything from *-common.ts.

更新:

为了防止生成.d.ts和.js.map文件，您将设置declaration& src/tsconfig.json到false中的sourceMap标志.

In order to prevent generating .d.ts and .js.map files, you will set declaration & sourceMap flags in src/tsconfig.json to false.

您不能避免使用.js文件，这是使用TypeScript编译器(将TS转换为JS)的唯一原因.发布插件或在演示应用程序中使用它时，.js文件是实际使用的文件.

You can not avoid .js files, that's the only sole reason of using TypeScript compiler (Converting TS to JS). While publishing your plugin or using it in demo app, .js files are the ones actually used.

之间，没有sourceMap调试可能对您来说很困难.

Between, without sourceMap debugging may be difficult for you.

这篇关于创建NativeScript插件时的index.d.ts?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！