From 3.1.0, QuickBrick has tooling to support using Typescript to build plugins.
you will need typescript installed on your machine, by running
npm i -g typescript
Once your workspace is ready with the basic configuration, you can add the typescript configuration in your package and the the workspace.
- In your workspace root
@typesdeclaration you need
- create a tsconfig.json file at the root of your workspace to provide the references for the type declarations
- in your package.json, add an
applicaster.moduleMapto allow the
development-appto use your source code instead of the compiled code declared in your package's package.json file. the path is relative from
development-appso it should start with
..up to the
srcfolder containing your
index.ts(x)file in your plugin. the key is the name of the package, as it is used in
- In your typescript plugin
- Add a tsconfig.json with your typescript compiler options
- Add a build script in your package.json, called in the
prepackhook to build your typescript code when publishing your plugin. Usually it will simply invoke the typescript compiler:
- Make sure your package.json's
mainproperty is pointing to the transpiled code.
That's it ! With this setup, you can run the Quick Brick from your workspace, and write plugins using typescript
Accessing applicaster types declarations
Typescript types declaration usually come from two sources:
- the modules themselves contain the signatures & typedefs for their classes and functions
- other types & interfaces, as well as types relevant for non typescript projects are usually found in
@types/...packages. Those packages must be pushed, approved and deployed through https://github.com/DefinitelyTyped/DefinitelyTyped
Since we are gradually building these type declarations, we created our own package for type definitions, which we can publish on our own, instead of relying on a process controled by a third party. Ultimately, we do want to provide a
@types/applicaster package, but for now, we choose to rely on a package of our own.
The only difference is that these custom packages are not resolved automatically out of the box by the typescript compiler. If you want to rely on these types, you can do the following:
@applicaster/applicaster-typespackage as a dev dependency to your plugin
- in each file, add a triple-slash directive to reference these styles definitions: