With our environment ready, we will need to start our TypeScript project. Let's create a .ts file and compile it:
- To start our TypeScript project, open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> tsc --init
This will create a tsconfig.json file inside our folder. This is a compiler settings file. Here, you can define the target, which JavaScript libraries will be available on the development, the target ECMAScript version, the module generation, and much more.
- Now, we need to create our index.ts file. Let's create some simple code inside the index.ts file that will log a math calculation in your terminal:
function sum(a: number, b: number): number {
return a + b;
}
const firstNumber: number = 10;
const secondNumber: number = 20;
console.log(sum(firstNumber, secondNumber));
This function receives two parameters, a and b, which both have their type set to number, and the function is expected to return a number. We made two variables, firstNumber and secondNumber, which in this case are both set to a number type—10 and 20 respectively—so, it's valid to pass to the function. If we had set it to any other type such as a string, Boolean, float, or an array, the compiler would have thrown an error about the static type checking on the variable and the function execution.
- Now, we need to compile this code to a JavaScript file. Open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> tsc ./index.ts
After the compilation, we can see the final file in index.js. If we look inside the file, the final code will be similar to this:
function sum(a, b) {
return a + b;
}
var firstNumber = 10;
var secondNumber = 20;
console.log(sum(firstNumber, secondNumber));
You may be wondering: where are my types? As ECMAScript is a dynamic language, the types of TypeScript exist only at the superset level, and won't be passed down to the JavaScript file.
Your final JavaScript will be in the form of a transpiled file, with the configurations defined in the tsconfig.json file.