Create bots with TypeScript
Even though I don’t want to put another hurdle in front of someone, the thing about TypeScript is it turns out it’s not much of a hurdle after all.
await, which aren’t globally available in ECMAScript.
TypeScript offers many features you expect from programming languages, such as static (or strong) typing, OOP, and better module management.
session, VS Code wouldn’t show you
endConversation as an available option, or if it did, it’s because it’s seeing it from another file in your project. The IDE has no way of knowing that
session is actually of type
Contrast that with the following bit of TypeScript, where we are able to identify the type:
When you create the TypeScript file, you’ll notice VS Code knows exactly what the
session parameter is, and is able to offer you IntelliSense.
In order to start programming in TypeScript, you will need to install TypeScript. TypeScript is available as an NPM package, and you can simply add it as a developer dependency to your project. Personally, because I use TypeScript extensively, I install it globally.
If you use the Bot Framework Yeoman generator I created you will notice there is a template already available for TypeScript. For purposes of this post, we’ll create everything from scratch, so you can see how it is all brought together.
Create a new folder, and add a
package.json file with the following contents:
The dependencies section is pretty standard for a bot, but you might not be familiar with the devDependencies. The devDependencies contain the types of the various packages we’ll be using. Types are the various interfaces for the objects and classes in a particular package. So
@types/restify contains the interfaces provided by restify. This will add IntelliSense to the project. In the case of botbuilder, we don’t need to add a types file, as the framework is written in TypeScript, and contains all of the necessary types. After saving the file, run the installation process like normal.
files section identifies which files will be transcompiled. Add a file named
tsconfig.json with the following content.
Let’s start by creating a basic dialog. Add a file to your project named
dialog.ts, and add the code you see below. You will notice this is standard Node.js bot code, with a couple of differences.
require, you use the
import command. The
* means you’ll be importing everything from the package, and
as allows you to identify an alias. The end result is effectively the same as using
const builder = require('botbuilder');, like you would have done traditionally.
Second, you’ll notice the creation of the interface
IResults. You added a single property named
response, and marked it as type
Rather than using
module.exports to export the array that contains your waterfall, you use
export default, followed by the array. The syntax is slightly different, but the results are the same.
Finally, you’re declaring the data type of
results on each of the waterfall steps to aid your development experience.
results is using the interface you created earlier in the file. You’ll notice when you do this, and you start typing
response.results, VS Code will provide IntelliSense, and show you
response as an available property of type string.
app.ts with the following code
In order to run the code, it will need to be transcompiled. You can do this by simply running
tsc. Because we created a
tsconfig.json file, the transcompiler will know what to transcompile, and how to do it. The
watch switch will automatically detect changes to the TypeScript files, and transcompile on the fly.
node or nodemon.
There’s quite a bit that I left on the table when it comes to TypeScript. We could make better use of interfaces with our dialogs, we could create a class for our app, we could …, we could …. My goal with this post was to help get you up and running with TypeScript, and show some of the power that’s made available.