TS Tutorial

programming<--

What is TypeScript?

TypeScript is an open-source language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. TypeScript compiles to plain JavaScript and can be used to build large-scale web applications with improved maintainability and developer experience.

At its core, TypeScript extends JavaScript by adding type definitions. This means you can declare the types of variables, function parameters, and return values, allowing for early detection of errors during development rather than at runtime. This leads to more robust and easier-to-maintain code, especially in larger projects and teams.

TypeScript supports all JavaScript features, meaning any valid JavaScript code is also valid TypeScript code. This makes it easy for JavaScript developers to transition to TypeScript incrementally. It integrates seamlessly with popular JavaScript frameworks and libraries like React, Angular, and Vue.js.

Learning TypeScript

These articles will describe the TypeScript language in detail. If you read one article every day, you will finish learning in about 10 days. We organize pages in logical order, but sometimes you need to read them twice. For each page, you should spend between 1 and 3 hours. Don't forget to take a break every hour or even more frequently. You can use the next index to review each chapter. If you are here for the first time, ignore the index and continue reading, then return to the index and deep dive.

Tutorial Index:

Running TypeScript

To run TypeScript code, you generally need to compile it into JavaScript first. This compilation process is handled by the TypeScript compiler (`tsc`). You can then run the resulting JavaScript code in any JavaScript runtime environment, such as a web browser or Node.js.

How to get started with TypeScript:

First, you need to install Node.js (if you haven't already), as the TypeScript compiler runs on Node.js. Then, you can install TypeScript globally via npm:

npm install -g typescript

Once installed, you can create a TypeScript file (e.g., `hello.ts`):

// hello.ts
function greet(person: string) {
    return "Hello, " + person;
}

let user = "Jane User";
console.log(greet(user));

To compile it to JavaScript, run the TypeScript compiler in your terminal:

tsc hello.ts

This will create a `hello.js` file:

// hello.js
function greet(person) {
    return "Hello, " + person;
}
var user = "Jane User";
console.log(greet(user));

You can then run the JavaScript file using Node.js:

node hello.js

Or, if you are developing for the web, include the compiled `hello.js` file in your HTML:

<!DOCTYPE html>
<html>
<head>
    <title>TypeScript Demo</title>
</head>
<body>
    <script src="hello.js"></script>
</body>
</html>

Using `ts-node` for quick execution:

For development purposes, you can use `ts-node`, which allows you to run TypeScript files directly without a separate compilation step. Install it globally:

npm install -g ts-node

Then run your TypeScript file:

ts-node hello.ts

Running TypeScript via `ts-node`

Working with TypeScript in your IDE:

Modern IDEs like Visual Studio Code have excellent built-in support for TypeScript, providing features like intelligent code completion, error checking, and refactoring, which greatly enhance the development experience.

TypeScript in Visual Studio Code

How to run TypeScript on TypeScript Playground website:

The TypeScript Playground is an online environment where you can write TypeScript code and instantly see the compiled JavaScript output. It's a great tool for experimenting with TypeScript features without any local setup.

TypeScript Playground

TypeScript - Prep Quiz

This quiz is designed for mobile or tablet. It has 100 questions. Some questions have more than one correct answer (checkboxes). Select all correct options! The quiz requires you to sign in using your Google account. Good luck!

TypeScript Quiz

Privacy Terms: We record your name with the test results on Google drive. If you score more than 80% we will recognize your skill and will endorse you on Linked-in. If you don't agree, you can use name: Anonymous but then we can't endorse your new skills.

References

These references are ad-free. We have studied these in order to create our articles. Now that you are more familiar with TypeScript, you should understand these resources. The TypeScript team does a great job maintaining reference documentation for the latest TypeScript version. TypeScript is continuously improved. You should use these resources to search for recent features of TypeScript.

Read next: Setup & Compilation