getviewbyid - ¿Cómo puedo acceder a la API nativa en NativeScript cuando uso Typescript?

nativescript 5

Question

Cuando creo dos nuevas aplicaciones con tns, una es la versión js normal y la otra es con mecanografiado. Recibo un extraño error en la versión de escritura de tipos cuando intento acceder a una biblioteca nativa.

Cuando creo una función cargada con una console.log (pow (x, y)), funciona bien con la versión js pero la versión mecanografiada falla con este error.

error TS2304: Cannot find name ''pow''.

¿Por qué?

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;

Answer 1

TypeScript es un lenguaje fuertemente tipado y necesita una definición de tipo explícita para cada variable (por ejemplo, como pow ). En lugar de enviar a any , puede proporcionar archivos de definición generados previamente por NativeScript que le darán la posibilidad de escribir e IntelliSense para las API nativas de Android e iOS.

La última versión de NativeScript por defecto es crear la aplicación sin los archivos de declaración de plataforma ( android17.d.ts para Android e ios.d.ts para iOS) y sin esos archivos, su TypeScript simplemente no conoce las referencias de las API nativas. La razón para no incluir los archivos de definición: son enormemente grandes y se necesitan solo cuando los desarrolladores van a usar el acceso TypeScript (o Angular) + a las API nativas.

La solución:

1.) Instalar los archivos de definición como una dependencia de desarrollador

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

Esto instalará los archivos de declaración de su plataforma en node_modules / tns-platform-declarations

2.) Cree referencias.d.ts en su directorio principal de aplicaciones y agregue lo siguiente

// SEE the updated paths below

Ahora eres bueno para ir!

ACTUALIZACIÓN (a partir de octubre de 2017: con la instalación de tns-core-modules 3.xx (o superior) y tns-platform-declaations 3.xx (o superior)): el complemento npm ahora tiene una estructura diferente, por lo que estas son las rutas adecuadas (cree el archivo references.d.ts en el directorio raíz y coloque el siguiente)

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

Importante : Tu tsconfig.json debería verse así:

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