Skip to content

Typescript definitions for Toon Boom Harmony and Storyboard Pro

Notifications You must be signed in to change notification settings

bryab/tba-types

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

66 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

This repository contains type definition files for Toon Boom Harmony and Storyboard Pro.

These definitions were parsed from the official API documentation, but have been modified where the documentation was lacking.

Installation

npm install https://github.com/bryab/tba-types.git

Example project

Please see the "example" folder in this repository for some files to get you started, or follow the guide below.

Usage

To use these types, you must specify a reference type in your Typescript or Javascript document.

/// <reference types="tba-types/Harmony/15"/>
/// <reference types="tba-types/StoryboardPro/5"/>

It is important to omit DOM from your lib section of your tsconfig.json file. Otherwise, there will be a naming conflict between Toon Boom's File object and the DOM File object.

For example:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5"],
    ...
  }
}

If you are using Javascript and want Intellisense based on these types, add checkJs to compilerOptions

{
  "compilerOptions": {
    "checkJs": true
  }
}

Issue with modules

The code generated by Typescript will work in Toon Boom with the above settings. However, as soon as you start creating modules that you wish to re-use in multiple scripts, you will run into a problem. When Typescript generates the .js files, it adds a line to the top like:

Object.defineProperty(exports, "__esModule", { value: true });

This line will cause Toon Boom to fail to execute the script. You can either remove it yourself, or add a task to your build pipeline to remove it. In my case, I use gulp. My main gulp task is setup like this:

var gulp = require("gulp");
var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");
var replace = require('gulp-replace');

gulp.task("ts", function () {
    return tsProject.src()
        .pipe(tsProject())
        .js
        .pipe(replace(/Object.defineProperty\(exports.+\n/, ""))
        .pipe(gulp.dest("dist"));
});

If you have a better solution to deal with this, please let me know!