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.
When developing for the web, don't forget to add the Document Object Model (DOM) to the libraries on the compilerOption property inside the tsconfig.json file so that you can have access to the window and document object when developing.
- 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.
United States
United Kingdom
India
Germany
France
Canada
Russia
Spain
Brazil
Australia
Argentina
Austria
Belgium
Bulgaria
Chile
Colombia
Cyprus
Czechia
Denmark
Ecuador
Egypt
Estonia
Finland
Greece
Hungary
Indonesia
Ireland
Italy
Japan
Latvia
Lithuania
Luxembourg
Malaysia
Malta
Mexico
Netherlands
New Zealand
Norway
Philippines
Poland
Portugal
Romania
Singapore
Slovakia
Slovenia
South Africa
South Korea
Sweden
Switzerland
Taiwan
Thailand
Turkey
Ukraine
