Skip to content

IntelliSense and Code Navigation Support for Metadata Extensions

This topic describes about IntelliSense and code navigation features support for extension in metadata.

Two configuration files tsconfig.json and references.d.ts are introduced to support these features, and they’re used to support different scenarios.

tsconfig.json: This file is used for using types defined in Mobile Development Kit SDK or NativeScript. Import statements are needed but in a different format. Below is a sample of tsconfig.json.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noEmitHelpers": true,
    "lib": [
      "es6",
      "dom"
    ],
    "baseUrl": "${path-to-yourMDKClientFolder}",
    "paths": {
      "*": ["app/*"],
      "mdk-sap":["./node_modules/mdk-sap"],
      "mdk-core/*": ["./modules/mdk-core/*"],
      "tns-core-modules/*": ["./node_modules/tns-core-modules/*"]
    }
  }
}

Customize baseUrl in the json file. The baseUrl should point to your Mobile Development Kit client path.

The import statements usage is as below:

// Previous Usage
import { IControl } from './controls/IControl';

// New Usage
import { IControl } from 'mdk-core/controls/IControl';

references.d.ts: This file is used for using NativeScript built-in types, such as UIImageView, CGRect, WKWebView, and so on. Import statements aren’t needed. Below is a sample of references.d.ts.

/// <reference path="{path-to-yourMDKClientFolder}/node_modules/@nativescript/types-ios/lib/ios.d.ts" />
/// <reference path="{path-to-yourMDKClientFolder}/node_modules/@nativescript/types-android/lib/android-31.d.ts" />

You need to change {path-to-yourMDKClientFolder} to your Mobile Development Kit client path for it to work. Then auto-completion and navigation take effect for the following sample code.

let imageView = new UIImageView({ image: image });

How to create the above mentioned configuration files

  • Command MDK: New Application On triggering this command, the two files tsconfig.json and references.d.ts are generated in Extensions folder of the generated Mobile Development Kit application.

  • Command MDK: Configure Extension IntelliSense

    This command provides a way to create the two files for an old Mobile Development Kit application.

    In file explorer view, select the node Extensions. Right-click to see this command.

Last update: November 2, 2022