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:
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:
- Uses the TypeScript-provided ES5 type information.
- Sources JSDoc comments for type information. This is how CSInterface.js, for example, is parsed!
- 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 JavaScriptor 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:
Questions? Comments? Ask/post away!