This tutorial introduces the first in a series of Titanium boilerplate projects. In this document, we'll cover TypeScript in both Alloy and classic apps.
Getting started with our templates
All that is required is the TypeScript compiler and a CLI plugin that will
compile your .ts files down to JavaScript.
To get you started quickly with TypeScript, we have prepared two example apps:
You can also find them in our new titanium-boilerplates repository on GitHub.
These are simple greeter app examples written in TypeScript that is already setup with typings for all Titanium APIs, including Alloy, a base configuration for TypeScript, and linting using TSLint.
TypeScript Support for Existing Projects
Enabling TypeScript support in your existing project can be done with the following steps:
Install TypeScript compiler
First, install the required dependencies via npm in your project root directory. To save your installed dependencies,
create a minimal package.json with the following content (if your project does not already have
one):
|
1
2
3
4
5
6
|
{ "name": "my-typescript-app", "version": "1.0.0", "main": "index.js", "private": true} |
Now install the TypeScript compiler and the required typings for Titanium and save them to your dev dependencies:
npm i typescript @types/titanium -D
Create tsconfig.json
Next, create a tsconfig.json for your project. The configuration slightly differs depending whether
you use Alloy or a classic project.
For Alloy projects, the tsconfig.json looks like this:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
{ "compilerOptions": { "baseUrl": ".", "paths": { "*": [ "*", "app/lib/*" ] }, "target": "es5", "module": "commonjs", "lib": [ "es2015", "es2015.iterable" ], "downlevelIteration": true, "strict": true, "esModuleInterop": true, "noImplicitAny": false }, "include": [ "app/**/*" ]} |
In classic projects, you can omit the paths compiler options and need to adjust the include setting to Resources/**/*.
The compiler settings are just reasonable defaults and you can adjust them depending on your needs.
ALLOY ONLY: copy Alloy typings
Alloy currently does not provide typings on its own. However, you can copy
the typings from the Alloy boilerplate project. Copy the globals.d.ts file over to your project’s app folder.
Migrating your JavaScript files
Now you can start migrating your JavaScript files. Don’t worry though –
in the first step, you won’t have to touch any of your code. However, it
is required that you rename at least one .js file to .ts. Otherwise the TypeScript compiler would complain that there are no input
files.
You didn’t really migrate anything, yet. We recommend reading through Migrating from JavaScript for further guidelines how to continue from here.
Installing the pre-compile hook
Finally, the CLI hook triggers the compilation of the TypeScript files.
Create a new file hooks/pre-compile.js in your project and paste the following content to it:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
'use strict';const path = require('path');const spawn = require('child_process').spawn;exports.id = 'ti.typescript';exports.init = (logger, config, cli) => { cli.on('build.pre.compile', { priority: 900, // explicitly lower priority to make sure this hook runs before the Alloy
compiler post: (builder, callback) => { const tscPath = path.resolve(__dirname, '..', 'node_modules', '.bin', 'tsc') const args = [ tscPath ]; logger.info('Compiling TypeScript files'); logger.trace(`Executing: node ${args.join(' ')}`); const child = spawn('node', args, { stdio: 'inherit', cwd: cli.argv['project-dir'] }); child.on('close', code => { if (code === 0) { callback(); } else { const error = new Error(`TypeScript compiler exited with non-zero exit code ${code}`); error.code = code; callback(error); } }); } });}; |
You can now use TypeScript in your project.