Sebastian Gomez

Apr 15, 2023

Updated: Jun 25, 2026

TypeScript Fundamentals

If you've started working with Angular, you've probably noticed that most of the documentation is written in TypeScript. That's because the Angular team decided to build Angular on top of TypeScript. TypeScript is a superset of JavaScript created and maintained by Microsoft, whose main goal is to add optional static typing to JavaScript.

In other words, with TypeScript you can annotate your variables, parameters, and return values with types, so the compiler catches errors before you run the code. JavaScript has had classes, constructors, and methods since ES2015, so TypeScript does not turn JavaScript into an object oriented language. What it adds are types and tools such as access modifiers (public, private, protected) that help you write safer, more maintainable code.

What is TypeScript?

We can define TypeScript as a JavaScript transpiler. Yes, a transpiler. Basically, TypeScript converts your TypeScript code into JavaScript code that the browser or Node.js can run directly. But that's not all.

As I've told you in past tutorials, JavaScript evolves through the ECMAScript standards (ES2015, also called ES6, and every yearly release after it). Today, in 2026, ES2015 and far later versions enjoy universal support in modern browsers and in Node.js, so you no longer need to worry about whether your modern code will run. The old ES5 is only relevant as a compatibility target for legacy environments.

This is where TypeScript shines: you can write code with the most modern syntax and choose which ECMAScript version the output is transpiled to (for example ES2022 or ESNext for current environments, or ES5 only if you need to support very old browsers).

First steps with TypeScript

In this tutorial we'll forget about Angular itself and focus only on TypeScript on its own. So our first step is to install TypeScript. To do that we'll run the following command (remember to have Node.js installed):

npm install -g typescript

Once that's done, we already have TypeScript on our system. Let's look at some examples now.

Typed variables and functions

You can simply annotate your values with data types, like this:

let nombre: string = "Esto es un string";
let edad: number = 43;
let bandera: boolean = true;

// Takes a string as a parameter and returns a string as a result
function hola(nombre: string): string {
  return "hola " + nombre;
}

Arrays

let empresas: Array<string> = ['IBM', 'Microsoft', 'Google'];
let marcas: string[] = ['Apple', 'Dell', 'HP'];

Any

You can use the any type to assign any type to a variable. It's like a wildcard. That said, use it sparingly, because it disables the type checks that are precisely TypeScript's advantage.

Void

You can declare functions that don't return anything using the void type.

function setNombre(nombre: string): void {
  this.nombre = nombre;
}

Classes and objects

We can create classes with properties, methods, and constructors.

// Defines a class named "Persona"
class Persona {
  // Declares a "nombre" property of type string
  nombre: string;
  // Declares an "edad" property of type number
  edad: number;
  // Declares a "casado" property of type boolean
  casado: boolean;

  // Defines the class constructor, which takes three arguments: nombre, edad, and casado
  constructor(nombre: string, edad: number, casado: boolean) {
    // Assigns the "nombre" argument to the instance's "nombre" property
    this.nombre = nombre;
    // Assigns the "edad" argument to the instance's "edad" property
    this.edad = edad;
    // Assigns the "casado" argument to the instance's "casado" property
    this.casado = casado;
  }

  // Defines a method named "myMetodo" that returns a string
  myMetodo(): string {
    // Returns a string
    return "Este metodo simplemente retorna un string";
  }
}

// Creates a new instance of the "Persona" class named "persona"
const persona: Persona = new Persona("juan", 12, false);

Inheritance

Yes. Believe it or not, you can use inheritance with TypeScript and it's ridiculously easy. Just remember that if the parent class has a constructor with parameters, the subclass must pass those arguments through super():

// Defines a class named "Estudiante" that inherits from the "Persona" class
class Estudiante extends Persona {
  // Declares a "universidad" property of type string
  universidad: string;

  // Defines the "Estudiante" class constructor
  constructor(nombre: string, edad: number, casado: boolean, universidad: string) {
    // Calls the parent "Persona" class constructor with its arguments
    super(nombre, edad, casado);
    // Assigns the property specific to "Estudiante"
    this.universidad = universidad;
  }
}

How to use TypeScript in your projects

After installing TypeScript, you need to create your nombre.ts file. Notice it ends in .ts, because that's TypeScript's specific notation. Once you have this, you can run the command:

tsc nombre.ts

You'll see it creates a file named nombre.js in the same folder as your .ts file. This is the file you can include in your projects, whether you're using Angular or not.

Another feature of TypeScript is that, as I mentioned, you can choose which ECMAScript version your code is transpiled to. To do that you can create a tsconfig.json file and adjust the following options:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "esnext",
    "moduleResolution": "bundler",
    "sourceMap": true,
    "removeComments": false,
    "strict": true
  }
}

Note on decorators. It used to be common to see "experimentalDecorators": true and "emitDecoratorMetadata": true in this file. Decorators are now a standardized proposal (Stage 3) and TypeScript 5.x supports the standard syntax natively, without those flags. You only need to enable experimentalDecorators if you work with a framework that still relies on the legacy decorators, like Angular.

If you use this file, you can simply run the command:

tsc

That way, it will transpile every .ts file to .js without you having to specify them one by one.

And that's it. Remember that this post is part of a series of tutorials about Angular. Even though we didn't cover much Angular in this post, I assure you these principles will help us keep learning Angular.

Conclusions

TypeScript lets you transpile .ts files to .js so you can easily include them in projects with or without Angular.
Through a tsconfig.json file you can configure specific compilation options, such as the output ECMAScript version or comment removal.
TypeScript's real value is optional static typing, which helps you catch errors before running your code and write more maintainable applications.

Suggested exercises

Create a simple project using TypeScript. Configure a tsconfig.json file that transpiles your code to ES2022.
Add comments to your .ts files and modify the tsconfig.json file so they're removed at compile time.
Create a TypeScript class that uses inheritance (remember to pass the arguments to super()) and test how it works.

3-point summary

TypeScript is a superset of JavaScript created by Microsoft that adds optional static typing and transpiles to standard JavaScript.
The tsconfig.json file lets you configure how your .ts files are compiled and which ECMAScript version they're transpiled to.
Knowing how to use TypeScript will help you advance in Angular development and build more efficient, well structured applications.

That's all, I hope this post is useful to you and that you can apply it to a project you have in mind.

If you have any questions, don't hesitate to leave me a comment below. And remember, if you liked it, you can also share it using the social links below. Good luck!