Enhance tns-platform-declarations with NativeScript

Question

Enhance tns-platform-declarations with NativeScript

I am working on a NativeScript project and I am trying to incorporate the RecyclerView from Android Support Library. I have added the dependency in the

app/App_Resources/Android/app.gradle

file:

// Uncomment to add recyclerview-v7 dependency
dependencies {
    compile 'com.android.support:recyclerview-v7:+'
}

After reading discussions on GitHub issue#2295 and other related issues, I found out that I can include tns-platform-declarations to get definition files for native android/ios libraries. I installed them and followed the tns platform declarations documentation

My goal is to compile the following code snippet:

import { ContentView } from "ui/content-view";

declare var android: any;

export class OptimizedListView extends ContentView {

  private _android: android.support.v7.widget.RecyclerView;

  public _createUI() {
    this._android = new android.support.v7.widget.RecyclerView(this._context);
  }

};

Even though declaring the var android as shown above fixes one reference to RecyclerView, I still receive an error for the initial reference to RecyclerView:

message: 'Namespace 'android.support.v7.widget' has no exported member 'RecyclerView'.'

I also attempted to declare the RecyclerView class separately but without success:

export declare class RecyclerView extends ContentView {}

I understand that the definitions in tns-platform-declarations only go up to android.support.v7.widget.

Setting "noEmitOnError" to false as a workaround doesn't seem optimal.

So, how can I expand this declaration to include

android.support.v7.widget.RecyclerView

without running into compilation issues?

Versions:

"nativescript-dev-typescript": "^0.3.2"
"tns-platform-declarations": "^2.4.0-2016-09-28-1"
"typescript": "^2.1.1"
"tns-core-modules": "next"

android typescript nativescript

Answer 1

Answer №1

Instead of using the tns-platform-declarations due to its poor performance on machines with less than or equal to 8GB RAM, I opted to create my own typings file named my-typings.d.ts at the project root directory. This file included an augmenting type definition for RecyclerView, which would be automatically recognized by TypeScript's default tsconfig.json. If needed, manual configuration through the use of exclude, include, or files expressions could also be implemented.

To ensure that the TypeScript compiler could locate the defined ambient global namespace, a reference path like

/// <reference path="path/to/RecyclerView/file.d.ts" />

was added within the file.

// Namespace and class definitions

The usage of namespaces allowed for the emulation of nested object properties, such as android.view.xxx. This method was particularly useful when dealing with inner classes in Java, as TypeScript does not support nested class statements.

In cases where the type (e.g., android.view.ViewGroup) was utilized, a class with the same name as the namespace had to be defined to avoid the error:

no exported member xxx

Even if the class type was explicitly declared with export, it was unnecessary since the namespace had already been globally declared.

To extend native Java types using extend, I created static methods like

static extend(AdapterImpl): { new () }

for relevant classes. The return type of these methods could then be instantiated using new.

I hope this information proves helpful to others facing similar issues.

Answer 2

Instead of using the tns-platform-declarations due to its poor performance on machines with less than or equal to 8GB RAM, I opted to create my own typings file named my-typings.d.ts at the project root directory. This file included an augmenting type definition for RecyclerView, which would be automatically recognized by TypeScript's default tsconfig.json. If needed, manual configuration through the use of exclude, include, or files expressions could also be implemented.

To ensure that the TypeScript compiler could locate the defined ambient global namespace, a reference path like

/// <reference path="path/to/RecyclerView/file.d.ts" />

was added within the file.

// Namespace and class definitions

The usage of namespaces allowed for the emulation of nested object properties, such as android.view.xxx. This method was particularly useful when dealing with inner classes in Java, as TypeScript does not support nested class statements.

In cases where the type (e.g., android.view.ViewGroup) was utilized, a class with the same name as the namespace had to be defined to avoid the error:

no exported member xxx

Even if the class type was explicitly declared with export, it was unnecessary since the namespace had already been globally declared.

To extend native Java types using extend, I created static methods like

static extend(AdapterImpl): { new () }

for relevant classes. The return type of these methods could then be instantiated using new.

I hope this information proves helpful to others facing similar issues.

Enhance tns-platform-declarations with NativeScript

Answer №1

Similar questions

Using Typescript and react-redux with a Stateful Component: The parameter type 'typeof MyClass' does not match the expected component type

Discover the Preferred Network Type Configuration

The application's in-app billing feature is experiencing issues with processing actual transactions

Having Trouble Importing a Dependency in TypeScript

How should I proceed if a TypeScript definition file that I am relying on is lacking a specific definition?

Looking to trigger an action with a click on a variety of color choices?

Obtaining and storing an array of JSON data from Socket.IO

Using Flickity API in Vue 3 with Typescript Integration

Variations in comparing tuple types in TypeScript

Here's how you can retrieve URL parameters in NextJs, such as `userid/:this_is_a_param`

showcasing an assortment of images and selecting them with a click

Converting ts files to js: A comprehensive guide

Access the Ionic2 App through the Slider option

Testing Angular: How to Unit-test HttpErrorResponse with custom headers using HttpClientTestingModule

Having issues with TypeScript custom commands in Cypress?

When incorporating a JS React component in TypeScript, an error may occur stating that the JSX element type 'MyComponent' is not a valid constructor function for JSX elements

Encounters an android:src error

The use of await can only occur inside an async function

Is there a proper way to supply createContext with a default value object that includes functions?

Unable to determine the ComputeDistanceBetween method