2 Replies Latest reply on Jul 11, 2017 6:57 AM by Bruce Bullis

    TypeScript Enabled CEP Development

    sberic Level 2

      Modern Tools and ExtendScript

      Earlier this week, Bruce Bullis integrated a pull request into the CEP Samples repository that included a new Sample called TypeScript. TypeScript is a language that "transpiles" into JavaScript and JavaScript-based languages (e.g. ExtendScript). It can also be configured in certain environments (e.g. Visual Studio Code) to provide normal JavaScript (and, it turns out, ExtendScript) development with helpful type checking and IntelliSense/autocompletion support. Here's an example:

      TSExample.gif

      Open the PProPanel-vscode folder in Visual Studio Code (or other TypeScript-aware IDEs?), open up the Premiere.jsx file, and simply begin typing. The environment is already set up to provide rich IntelliSense support.

       

      Powered By TypeScript Declaration Files and JSDoc

      The environment has to get information about the types from somewhere, right? The type information is identified by the TypeScript system in the following ways:

       

      • In the Panel JavaScript Environment:
      • In the App ExtendScript Environment:
        • Uses the TypeScript-provided ES5 type information (ES3 is coming - when available, it will be switched to use that!).
        • Uses custom Type Declaration files (included within the sample here) to help make the IDE aware of what types are available, as well as documentation!
        • Sources JSDoc comments for type information.

       

      Beyond this, TypeScript is capable of type inference (set var x = 5; and the IDE will infer that x is a number). For more on how TypeScript does all of this, see this document.

       

      Inline ExtendScript and PremierPro API Documentation

      The declaration files included in the sample are currently incomplete, but Bruce Bullis has indicated interest in helping to fill in the blanks. These files are an improvement over the current documentation in that they can be [more] easily read on the web (don't need to be downloaded and opened in a browser) and also power in-line documentation and suggestions (as in the above gif)!

       

      Writing in TypeScript

      As configured, the sample does not actually assume that you will be writing in TypeScript and transpiling to JavaScript, but that you are simply writing JavaScript/ExtendScript. If you wish to use this feature, you will have to configure your IDE to do so (Visual Studio Code, Webstorm, Sublime Text, etc.).

       

      Writing in NEW JavaScript

      It should also be noted that TypeScript can transpile from new JavaScript to old JavaScript. This may not seem all that interesting except that you could use the latest ES6 features to write code for both your panel JavaScript or your app ExtendScript. These would be transpiled into platform-compatible versions: target: "es5" for panel and target: "es3" for ExtendScript!

       

      As with TypeScript, this use-case would require setting up the TypeScript compiler.

       

      Debugging In Visual Studio Code

      This sample also contains configuration settings to allow debugging of the panel (HTML) environment directly in Visual Studio Code, rather than through a Chrome browser. See:

      vscode-debugging.png

       

      Questions? Comments? Ask/post away!