Menu

Expand
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 to compile your Functions ahead of time.

We published TypeScript definitions for our Serverless Runtime at @twilio-labs/serverless-runtime-types.

Creating a new TypeScript Twilio Serverless project

You can create a new Twilio Serverless project via npm init or using the serverless plugin for the Twilio CLI. Either way you can opt to create your new project using TypeScript.

npm init

To create a new TypeScript based Twilio Serverless project with npm you can run npm init twilio-function with the --typescript option.

Loading Code Sample...
        
        

        New TypeScript Twilio Serverless project with npm

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

        Loading Code Sample...
              
              

              New TypeScript Twilio Serverless project from Twilio CLI

              Both commands will generate a new project with a src directory 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

              Setup TypeScript

              Start by installing the TypeScript compiler for your project using npm or another Node.js package manager:

              Loading Code Sample...
                    
                    

                    Install TypeScript compiler

                    Afterwards create your TypeScript configuration. You can do this by manually creating a tsconfig.json in your project or by using the TypeScript compilers --init flag.

                    Loading Code Sample...
                          
                          

                          Creating a TypeScript configuration

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

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

                          Install Twilio Serverless Runtime definitions

                          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.

                          Loading Code Sample...
                                
                                

                                Install Serverless Runtime TypeScript definitions

                                Convert your existing Functions

                                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.

                                Loading Code Sample...
                                      
                                      

                                      Example Twilio Serverless Function in TypeScript

                                      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.

                                      Loading Code Sample...
                                            
                                            

                                            Run the TypeScript compiler

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

                                            Caveats

                                            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.

                                            What's next?

                                            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:

                                            Need some help?

                                            We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.

                                            Loading Code Sample...
                                                  
                                                  
                                                  

                                                  Thank you for your feedback!

                                                  Please select the reason(s) for your feedback. The additional information you provide helps us improve our documentation:

                                                  Sending your feedback...
                                                  🎉 Thank you for your feedback!
                                                  Something went wrong. Please try again.

                                                  Thanks for your feedback!

                                                  thanks-feedback-gif