Back to Blog Home
← all posts

NativeScript 7 import reference guide

August 31, 2020 — by Technical Steering Committee (TSC)

With NativeScript 7 we've streamlined the developer experience to contain properly exported es2017 symbols for all core has to offer from this singular import:

import { } from `@nativescript/core`;

We also wanted to address the extraneous number of generically named symbols througout core and flying about codebases out there to help avoid import aliasing as much as possible. This also helps isolate conflicting namespaces and there will be more improvements here over time.

Here's a few examples which help illustrate some of the rollups:

BEFORE:

import * as app from 'tns-core-modules/application';
import { setString } from 'tns-core-modules/application-settings';
import { messageType, write } from 'tns-core-modules/trace';
import { request } from 'tns-core-modules/https';
import { startMonitoring, connectionType } from 'tns-core-modules/connectivity';
import { ObservableArray } from 'tns-core-modules/data/observable-array';
import { GridLayout } from 'tns-core-modules/ui/layouts/grid-layout';
import { KeyedTemplate, View } from 'tns-core-modules/ui/core/view';
import { layout, openUrl, isNullOrUndefined } from 'tns-core-modules/utils/utils';

// sample code
const rootView = app.getRootView();

setString('MyKey', 'Hello');

write('Some message', 'a category');

request({
    url: "https://httpbin.org/get",
    method: "GET"
}).then((response) => {
    // Argument (response) is HttpResponse
}, (e) => {
});

startMonitoring((cType: number) => {
		switch (cType) {
			case connectivity.connectionType.wifi:

        break;
    }
});

layout.getDisplayDensity();

openUrl('https://news.com/article');

if (isNullOrUndefined(aVariable)) {
  console.log('You may wanna define that.');
}

alert('Hi');

AFTER:

import { 
  Application, 
  ApplicationSettings,
  Trace,
  Http,
  Connectivity,
  ObservableArray, 
  GridLayout, 
  KeyedTemplate, 
  View,
  Dialogs,
  Utils
} from '@nativescript/core';

// sample code
const rootView = Application.getRootView();

ApplicationSettings.setString('MyKey', 'Hello');

Trace.write('Some message', 'a category');

Http.request({
    url: "https://httpbin.org/get",
    method: "GET"
}).then((response) => {
    // Argument (response) is HttpResponse
}, (e) => {
});

Connectivity.startMonitoring((cType: number) => {
		switch (cType) {
			case Connectivity.connectionType.wifi:

        break;
    }
});

Utils.layout.getDisplayDensity();

Utils.openUrl('https://news.com/article');

if (Utils.isNullOrUndefined(aVariable)) {
  console.log('You may wanna define that.');
}

// you can still use global alert just fine but to better identify {N} dialog usage you can now use the `Dialogs` rollup which contains all the dialog methods and interfaces
Dialogs.alert('Hi');