What you can import in a typescript file

When doing front-end development, the logic for epics, reducers, action creators as well as logic to render React components is implemented using typescript. This topic explains how to reuse typescript files for different situations.

There are multiple ways to achieve code reuse:

1. Using 3rd party libraries.
2. Reusing C3 AI Types implemented with the @typescript annotation.
3. Use C3 AI Type definitions in your Typescript logic, so the Typescript compiler which runs as part of the UI bundling process can perform type checking.
4. Special cases

Copy link to this section

3rd party libraries

Typescript files can import any 3rd party library as long as it's in the correct runtime. As such, things like lodash or other libraries can be used here. For example, assuming you have added lodash to your js-webpack_c3.json file, you can import and use it like so:

import get from 'lodash/get';

function printNameFromObject(obj: Object) {
  console.log(get(obj, 'name'));
}

Copy link to this section

Types using typescript annotations

Types that use the @typeScript annotation intend for their methods to be used in other files.

To import this, you can choose individual pieces to import like so:

import { checkboxClearAllSelectedIdsAction } from '@c3/ui/UiSdlDataGrid';

function clearAllGridCheckboxes(gridId: string) {
  checkboxClearAllSelectedIdsAction(gridId);
}

Or if you'd like to access everything as a single object:

  import * as DataGrid from '@c3/ui/UiSdlDataGrid';

  function clearAllGridCheckboxes(gridId: string) {
    DataGrid.checkboxClearAllSelectedIdsAction(gridId);
  }

Copy link to this section

Types not using the typescript annotation

Typescript files ideally have typified variables, and c3typs can be imported into typescript files for use as interfaces by importing and using such as seen in the example below.

import { UiSdlDataGrid } from '@c3/types';

function printGrid(grid: UiSdlDataGrid) {
  console.log(grid);
}

With this, we show that we expect grid to follow the structure of UiSdlDataGrid.

Copy link to this section

Special cases

Copy link to this section

Enums

Enums or enumerated types are certain types or fields that only allow for certain values and use a mapping to allow a more easily readable name to act as a constant for each allowed value. It is recommended to use the enum when available to ensure that the correct value is used especially when the underlying value may change.

In the C3 AI UI Framework, enums can either be their own c3typ or individual fields of a c3typ. In either case, they can be imported and used in typescript files.

Copy link to this section

Enum Types

Enum types are their own c3typ. This section will go over both creating an enum type and importing it into a typescript file.

When creating an enum type, it should not include the @typeScript annotation and the type will look something like:

// UiSdlStatusEnum.c3typ
enum type UiSdlStatusEnum {

  SUCCESS = 'success'

  FAILURE = 'failure'
}

To then be used in a typescript file, the enum can be imported and used as seen below:

import StatusEnum from '@c3/ui/UiSdlStatusEnum';

function checkStatus(status: string) {
  if (status === StatusEnum.SUCCESS) {
    console.log('it is a success');
  } else if (status === StatusEnum.FAILURE) {
    console.log('it is a failure');
  }
}

For this, the enum object is exported as default, StatusEnum as the import variable can actually be anything as long as it starts with a capital letter. If the enum type has .s in its name, the enum object is still exported as default, but the import variable cannot have the . even though the file name still will. For a type such as UiSdlStatus.Enum, a correct import would look like:

import StatusEnum from '@c3/ui/UiSdlStatus.Enum';

Enum typescript files are only generated if the enum is being imported somewhere, so if you are not already importing an enum and add the import somewhere, you will need to re-bundle.

Copy link to this section

Enum Fields

Enums can also exist as an individual field on other c3typs. These can still be imported and used as long as the c3typ they're on uses the @typeScript annotation. For example let's create the type UiSdlExampleType:

// UiSdlExampleType.c3typ
@typeScript
type UiSdlExampleType {
  greetings: string enum('hello', 'hey', 'hi')
  
  farewells: string enum('goodbye', 'see you', 'bye')
}

To then import and use this, we import defaultValues from the type and all of the enum fields' objects will be merged as one object here. For example we can import UiSdlExampleType and use the enums as such:

import { defaultValues } from '@c3/ui/UiSdlExampleType';

function sayHelloOrGoodbye(time: int) {
  if (time > 0) {
    console.log(defaultValues['goodbye']);
  } else {
    console.log(defaultValues['hello']);
  }
}

Copy link to this section

Importing from somewhere other than @c3/ui/{typeName}

There are some special cases where the information for a type is nested more deeply than just @c3/ui.