TypeScript is a powerful language that enhances JavaScript with strong typing and modern features, but it needs to be compiled into plain JavaScript before it can be run in the browser.
This is because browsers only understand JavaScript, not TypeScript.
To achieve this, and compile TypeScript to be used in the browser, we use tools like Babel , ESBuild , Webpack and TSC .
TypeScript introduces syntax and features that are not natively understood by browsers. For instance, type annotations, interfaces, and enums are exclusive to TypeScript.
The compilation process transforms TypeScript code into JavaScript code that browsers can execute.
Transpile or Compile?
Transpiling, short for "source-to-source compiling," is the process of converting source code written in one programming language into another language that has a similar level of abstraction.
In the context of web development, transpiling often involves converting TypeScript or newer versions of JavaScript (ES6/ES7/ESNext) into older versions (ES5) to ensure compatibility with a wider range of browsers that may not support the latest features.
Setting up a TypeScript project can be a complex process, requiring the configuration of multiple tools.
Fortunately, we no longer have to handle this setup manually since there are tools available that simplify the process for us.
One of the easiest ways to create a TypeScript project is by using Vite .
Vite is a modern build tool created by Evan You, the same developer behind Vue.js.
It is designed to provide a faster and leaner development experience for modern web projects. You can use Vite to create front-end projects in seconds: React , Svelte , Lit , Qwik and many others modern frameworks are supported.
You need to install NodeJS to use Vite.
If you don't have Node installed and you are here just to learn TypeScript go to the next paragraph about Stackblitz.
If you prefer to use multiple versions of Node in the same computer, install a Node Version Manager as nvm (win / mac / linux or Volta .
terminal
Assign a project name, i.e. my-app
Select Vanilla -> TypeScript
go to the my-app folder and run npm install (alias: npm i)
In this book we'll use StackBlitz , an online editor that allow us to practice directly in the browser.
it's very similar to Visual Studio Code with less features but with integrated preview and console panels.
We have integrated the Stackblitz API on this platform to add an interactive playground in most of our snippets.
So, here you can see an example of a TypeScript playground:
Click the play button to work directly in this window or open it in a new browser:
Open the help guide to learn how this site and Stackblitz work.
This guide is always available in the side panel on the left side of the screen and in the User Settings Panel
If you are curious and want to go deeper, let's go through a step-by-step example to explain how to use the TypeScript Compiler (tsc) to manually compile TypeScript code into JavaScript. We'll create a simple TypeScript project, write some TypeScript code, and then compile it using tsc.
Real World projects
The following part of the article explains how to create a simple project and compile a .ts file in .js.
Setting up a real project is much more complex: you have to create the html files, link the compiled files, create a web server for local development, configure everything and much more. This is why tools like ViteJS are super-useful and speed up the development process
no audio
Below I summarize the steps you see in the video above:
1. Initialize TypeScript Configuration
Create a package.json file:
terminal
What is the -y option?
Usually, when initializing an empty project with npm init, several questions will be asked to answer with a "yes" or "no"
The -y parameter simply generate it without having it ask any questions.
2. Install TypeScript
Install TypeScript as a development dependency (it will be added to the package.json):
terminal
What is the -D option?
-D (or --save-dev) adds a package to the devDependencies section of package.json, meaning it’s intended for use only during development (like testing or building), while dependencies are required by the application at runtime after deployment.
3. Initialize TypeScript Configuration
Create a tsconfig.json file to configure the TypeScript compiler options:
terminal
The --init option generates a tsconfig.json file with default settings. You can customize this file according to your project's needs. For this example, we'll use the default configuration.
Read the TypeScript documentation to get more info about tsconfig.json . Here you can also find the completed list of TSConfig parameters and as you can see there is a lot of stuff to learn.
4. Write Some TypeScript Code
Create a src directory and add an index.ts file:
terminal
Open src/index.ts and write some TypeScript code:
index.ts
5. Compile TypeScript to JavaScript
To compile the TypeScript code into JavaScript, run the TypeScript compiler (tsc) in the root of the project:
terminal
This will compile all .ts files in the src directory according to the configuration specified in tsconfig.json and output the JavaScript files to the same directory (or a different directory if configured).
A new index.js file is generated with the following content:
index.js (compiled)
As you can see, the .js version is not very different from the .ts, except for one use strict on top of the file.
The reason is that in the tsconfig.json file we have selected ES2016 as target, a version of the language that already supports const, let, class etc.
The compiled code is compatible with most modern browsers that support latest JavaScript features.
What if we want to support older browsers?
We update the tsconfig.json file setting ES5 as target:
tsconfig.json
Compile the code with tsc:
terminal
and the result is now completely different:
index.js (compiled)
const is replaced with var
class is now a function instead
6. Run the Compiled JavaScript
After compiling, you'll have a corresponding index.js file in the /src directory. You can run this file using Node.js, as shown below, or use the JavaScript file into an HTML files as you usually do in vanilla HTML/JavaScript: projects
terminal
You should see the output:
terminal
Watch the video at the beginning of this paragraph to see the whole process in action.
