Hi all!
Patrick here with a super-quick article!
A common request we get is "How can I set up my SDK project to use TypeScript instead of JavaScript for code modules?" Good news - it's easy! TypeScript is a separate tool from the SDK, of course, but it is simple to configure your project to use TypeScript.
For an example repository, scroll to the end of this article.
Step 1 - Install TS in your project
You'll first want to update your package.json file to include TypeScript as a dependency. See here for an example, referencing the devDependencies addition and the configuration of the build NPM script:
{
"name": "t_demo_app",
"version": "0.0.1",
"description": "",
"license": "UNLICENSED",
"type": "module",
"scripts": {
"build": "rm -rf dist && tsc -b && now-sdk build",
"deploy": "now-sdk deploy",
"fetch": "now-sdk fetch",
"dependencies": "now-sdk dependencies"
},
"devDependencies": {
"typescript": "5.5.4",
"@servicenow/sdk": "2.0.0",
"@servicenow/glide": "26.0.1",
"eslint": "8.50.0",
"@servicenow/eslint-plugin-sdk-app-plugin": "2.0.0"
}
}
Step 2 - Configure TypeScript
TypeScript is configured with a tsconfig.json file in the root of your project. See below for an example that you will want to create from:
{
"compilerOptions": {
"rootDir": "src",
"outDir": "dist/src",
"module": "nodenext",
"target": "es2021",
"moduleResolution": "nodenext",
},
"include": ["src/**/*.ts"],
"exclude": ["node_modules", "src/fluent/**"],
"references": []
}
Step 3 - Configure the SDK build
Finally, we'll need to tell the SDK where it can find your transpiled source code (the JavaScript that is produced from your TypeScript files). This is configured in the now.config.json file in your project, see below for how to set the transpiledSourceDir property:
{
"transpiledSourceDir": "dist/src",
"scope": "x_snc_ts_app",
"scopeId": "9fdffe0559801210f877ba2fb50604f0"
}
And you're set! Run `npm install` and `npm run build` in your command line, and you should have a functional TypeScript-based Fluent app.
See here for an example repository containing a TypeScript project for your reference: https://github.com/patrickw14/fluent-typescript-example/tree/master
Good luck!
