Reuse code within your app

TypeScript/JavaScript allows you to share code between multiple files using export and import statements. If a file has a statement with these keywords, it's a JavaScript module. You can share variables, classes, functions, or objects from a JavaScript module.

Your Dynatrace app can use the same techniques to share code between different parts of the app and app functions.

Export

To use code from another module, first you need to export the code from the original module using the export statement. In the example below, you have a module named moduleA with some exported members:

moduleA.ts

export const fruits = ['apple', 'orange', 'banana', 'pineapple', 'blueberry'];
export function login() {}
export const player = {
    id: 1,
    name: 'John Doe',
    age: 22
}

// Animal class isn't be available outside
const class Animal {}

Alternatively, you can export everything in a single statement at the end of the file:

export { fruits, login, player };

Export with alias

If you would like to rename a member while exporting it. You can do so using the as keyword:

export { fruits, login, player as tennisPlayer };

Import

After you have exported the members, you can import them into the other modules using the import statement. Use the import keyword, followed by the members you want to import in curly brackets, and then the location of the module relative to the current file as shown:

import { fruits, login, player } from './moduleA';

Import with alias

In cases where you have a naming conflict because two module shares an export with the same name. Importing them will create a name collision. To solve this, you can rename the import using the as keyword:

import { fruits } from './moduleA';
import { fruits as summerFruits } from './moduleB';

Import all exported members

To import all the exported members, you can do so without individually naming them like this:

import * as MyModule from './moduleA';

Then you can access the members using dot notation:

console.log(MyModule.fruits); // ['apple', 'orange', 'banana', 'pineapple', 'blueberry'];

Example: Share code between app functions

Let's imagine you have a function validateStringInput, checking if the payload sent to your function is a String as you would expect. As this functionality is needed in multiple app functions, it can be re-used in numerous of your app functions. This example shows two example functions: getAdress.ts and getZipCode.ts. In both functions, you have to validate that your input is a string.

First, you need to export the validateStringInput function within function getAdress.ts:

api/getAdress.ts

export function validateStringInput(payload) {
  if (typeof payload === 'string' && payload != '') {
    return;
  }
  throw new Error(`Input is not a valid string!`);
}

export default async function (zipCode: string) {
  validateStringInput(zipCode);
  const city = fetch('https://api.getmyadress.com/api/zipCode/?zipCode=' + zipCode).then((res) => res.json());
  return city;
}

Now you can import and use that function in your app function getZipCode.ts like this:

api/getZipCode.ts

import { validateStringInput } from './getAdress';

export default async function (city: string) {
  validateStringInput(city);
  const zipCode = fetch('https://api.getmyadress.com/api/city/?city=' + city).then((res) => res.json());
  return zipCode;
}

By importing functions like shown above, you can easily re-use functionality between your app functions.