WebApps 2

TypeScript

It's i possible to develop apps for Sitevision using TypeScript. TypeScript will help you find errors early in your development cycle, without having to run your code, TypeScript will find errors at compile time.

Getting started

The easiest way to get started is to use our bootstraping tool @sitevision/create-sitevision-app and then answer yes if you would like to use TypeScript.

Example prompt for @sitevision/create-sitevision-app. The user is prompted to select wether to use TypeScript or not

With this all the required dependencies will be installed and set up for you to start coding.

If you have an old app and want migrate to TypeScript see this guide.

How to use

The type-declarations will help you find utilities from the Sitevision API. Just start to type the name of the util and select from the list in your IDE and the import will be added.

Type checking

The above feature have been available before when we where using JavaScript. But what you don't get when using JavaScript is the benefit of type checking. For example when we define a function we expect parameters to be of certain type.

In this example we have created a utility to get the displayName from a Node. We have specified that the parameter to passed to getDisplayNameFromNode should be of type Node. So if we pass the result of a call to portletContextUtil.getCurrentPage() (row 19), which returns a Node, everything is OK. If we instead try to pass a string with a node id (row 23) then it will fail.

Notice we have imported Node but the import differs from the others in that it states that we import a type. This is because we don't want to include this import in our bundle it should just be used for type checking. We have provided an eslint configuration that will highlight imports that are only used as types to avoid any confusion at build time.

If one would like to type check for one of the utilities we would have to import that type. The utilities are exported in two ways the default export is the instance of the utility and a named export is provided with the interface and this can be used for type checking.

Here we have updated our utitlity to accept a second parameter and that is of the type PropertyUtil. Notice that now we have two imports of PropertyUtil (row 7-8), one is for the instance (row 8) and the other is for the type (row 7).

Enums

Prior to Sitevision 2023.02.1 Enums had to be imported by value this will still be possible in coming release but you want get the benefit of types. In order to get types to work with Enums they should be imported as a "group".

Technically both of these imports would work at runtime but since there aren't any types available for the "old" style import it won't work in a TypeScript context.