Skip to contentSkip to navigationSkip to topbar
Rate this Page:

Using Twilio Serverless with TypeScript


The Twilio Serverless runtime currently does not support running TypeScript by itself but you can use the TypeScript compiler(link takes you to an external page) to compile your Functions ahead of time.

We published TypeScript definitions for our Serverless Runtime at @twilio-labs/serverless-runtime-types(link takes you to an external page).


Creating a new TypeScript Twilio Serverless project

creating-a-new-typescript-twilio-serverless-project page anchor

You can create a new Twilio Serverless project via npm init or using the serverless plugin(link takes you to an external page) for the Twilio CLI. Either way you can opt to create your new project using TypeScript.

npm init

npm-init page anchor

To create a new TypeScript based Twilio Serverless project with npm(link takes you to an external page) you can run npm init twilio-function with the --typescript option.

New TypeScript Twilio Serverless project with npm

new-typescript-twilio-serverless-project-with-npm page anchor

_10
npm init twilio-function project-name --typescript

You can also pass the --typescript option to the Twilio CLI serverless plugin's init command

New TypeScript Twilio Serverless project from Twilio CLI

new-typescript-twilio-serverless-project-from-twilio-cli page anchor

_10
twilio serverless:init project-name --typescript

Both commands will generate a new project with a srcdirectory that contains your TypeScript source files. When you run npm start or npm run deploy the project will automatically be compiled into the dist directory and run or deployed from there.


Converting an existing Twilio Serverless project

converting-an-existing-twilio-serverless-project page anchor

Start by installing the TypeScript compiler for your project using npm(link takes you to an external page) or another Node.js package manager:

Install TypeScript compiler

install-typescript-compiler page anchor

_10
# Using npm:
_10
npm install --save-dev typescript
_10
_10
# Using yarn
_10
yarn add --dev typescript

Afterwards create your TypeScript configuration(link takes you to an external page). You can do this by manually creating a tsconfig.json in your project or by using the TypeScript compilers --init flag.

Creating a TypeScript configuration

creating-a-typescript-configuration page anchor

_10
# Using npm's npx command
_10
npx tsc --init
_10
_10
# Using yarn
_10
yarn tsc
_10
_10
# Without either
_10
node_modules/.bin/tsc --init

Your resulting tsconfig.json should look something like this if you ignore the comments:


_10
{
_10
"compilerOptions": {
_10
"target": "es5",
_10
"module": "commonjs",
_10
"strict": true,
_10
"esModuleInterop": true
_10
}
_10
}

Install Twilio Serverless Runtime definitions

install-twilio-serverless-runtime-definitions page anchor

We need to be able to tell TypeScript about the different types related to the Serverless Runtime. These are called TypeScript definintions and the ones for Serverless Runtime are all bundled in the @twilio-labs/serverless-runtime-types module on npm. You'll need to install it as a dependency for your project.

Install Serverless Runtime TypeScript definitions

install-serverless-runtime-typescript-definitions page anchor

_10
# Using npm
_10
npm install @twilio-labs/serverless-runtime-types
_10
_10
# Using yarn
_10
yarn add @twilio-labs/serverless-runtime-types

Convert your existing Functions

convert-your-existing-functions page anchor

If you want to convert your existing Functions from JavaScript to TypeScript you'll need to:

  • Rename your file to end with .ts instead of .js
  • Change from require() statements to import
  • Add import '@twilio-labs/serverless-runtime-types'; to the top of your file
  • Import additional types necessary from @twilio-labs/serverless-runtime-types
  • Use export const handler instead of exports.handler

This is how an example TypeScript version of a Twilio Function would look like.

Example Twilio Serverless Function in TypeScript

example-twilio-serverless-function-in-typescript page anchor

_18
// Imports global types
_18
import '@twilio-labs/serverless-runtime-types';
_18
// Fetches specific types
_18
import {
_18
Context,
_18
ServerlessCallback,
_18
ServerlessFunctionSignature,
_18
} from '@twilio-labs/serverless-runtime-types/types';
_18
_18
export const handler: ServerlessFunctionSignature = function(
_18
context: Context,
_18
event: {},
_18
callback: ServerlessCallback
_18
) {
_18
const twiml = new Twilio.twiml.VoiceResponse();
_18
twiml.say('Hello World!');
_18
callback(null, twiml);
_18
};

Since Twilio Serverless and the Toolkit don't support TypeScript out of the box yet, we need to run the compiler before the local development or deployment.

Run the TypeScript compiler

run-the-typescript-compiler page anchor

_10
# Use npm
_10
npx tsc
_10
_10
# Use yarn
_10
yarn tsc
_10
_10
# Run the compiler directly
_10
./node_modules/.bin/tsc

Afterwards you can deploy the project or locally run your project.

Right now we are compiling the TypeScript files in a way that results for the JavaScript output files to live side-by-side with the TypeScript files. This is great because that means the Toolkit commands work without any additional arguments.

To move the output somewhere else, set the outDir option of the compilerOptions inside the tsconfig.json file. Afterwards you'll have to call the Toolkit's start and deploy commands with the --functions-folder flag to point again the functions/ directory inside your output directory.


Now that you know how to combine Twilio Serverless and TypeScript, why not check out some other resources to see what you can do with the Twilio Serverless Toolkit?


Rate this Page: