TypeScript is an open source programming language developed by Microsoft .

It is a strict syntactical superset of JavaScript and adds optional static typing to the language.

This tutorial is especially aimed at programmers who already know JavaScript, it will cover the fundamental concepts of TypeScript and will highlight some of the most important “gotchas”.

TypeScript was developed by Anders Hejlsberg, architect of the [C#] language (https://terminalroot.com/tags#csharp) and creator of the [Delphi] languages (https://www.embarcadero.com/products/delphi ) and Turbo Pascal.

TypeScript supports definition files that can contain type information from existing JavaScript libraries, just as C++ header files can describe the structure of existing object files.

The official address of TypeScript is: https://www.typescriptlang.org/.

You ask:

— If TypeScript is a superset of JavaScript, then all JavaScript code is also TypeScript?!!!

Even though the official TypeScript documentation itself, the answer is NO!

There are some differences, for example, if you create variables or constants (var, let or const) with the name: name in TypeScript, it will not work, it will give an error:

var name = "Marcos"

You will get the error:

■ Cannot redeclare block-scoped variable 'name'.

This is because the TypeScript transpiler already uses a declaration with the same name: name. If you are going to use something to name an object or anything else, use examples like this:

var userName = "Eric"
let firstName = "Camila"
const theName = "Marcos"

But, in JavaScript this is no problem, examples:

var name = "Deborah"
console.log(name)
alert(name)
document.write(name) // For use in the browser

This code below also DOES NOT WORK IN TypeScript!

the cool thing about JS is that it has several easter eggs pic .twitter.com/Jbks00bTTX

— Terminal Root (@TerminalRootTV) May 24, 2024

console.log(++[[]][+[]]+[+[]])

However, if you come from other programming languages, you will still have some difficulties understanding TypeScript. This, for example, works in TypeScript:

In JS constants are modifiable, this took a while to sink in pic.twitter.com/NVBd9ctCF3

— Terminal Root (@TerminalRootTV) May 5, 2024

How to Install TypeScript

To test TypeScript codes, you can write to TypeScript’s Playground. Or install the tsc command on your machine using NPM, like this:

sudo npm install -g typescript

On Windows and macOS you do not need sudo.

Then create a basic code, for example, main.ts (.ts extension):

console.log("Save, TypeScript!")

Run the file with the tsc command:

tsc main.ts
tsc main.ts --outFile index.js // Compiles to a different name

After running this command it will create a file with the same name, but with the extension .js: main.js.

And run using a JavaScript runtime, examples: Bun, Node or QuickJS:

bun main.js
node main.js
qjs main.js

iYou can also create a development environment, for example:

mkdir learn-typescript
cd learn-typescript
npm init -y
npm install typescript --save-dev
npx tsc --init

This is more interesting for your LSP: How to Configure the LSP for TypeScript in Neovim.

You can modify the tsconfig.json file, and leave it like this:

{
   "compilerOptions": {
     "outDir": "./dist",
     "module": "commonjs",
     "target": "es6"
   },
   "include": ["main.ts"]
}

It will always compile the main.ts file just by running:

tsc

And it will create a main.js inside the dist folder.

And run the JavaScript file:

bun dist/main.js

Or all at once: tsc && bun dist/main.js

For more details about the tsc command use the help:

tsc --help

Basic tutorial

TypeScript has types, that’s why its name is: TypeScript! 😃

01. Examples of its primitive types:

let isDone: boolean = false;
let age: number = 42;
let userName: string = "John Doe";

There is no float or double it’s all number! But, there are other types primitives like: bigint, symbol , unknown, …

In my case, I have OpenGL installed and it defined types for TypeScript, so the GLfloat type is available:

My LSP lists all the types for me!

But, if it doesn’t work for you (you have to have OpenGL installed on the system), set it like this:

type GLfloat = number;

let pi: GLfloat = 3.14;
console.info(pi);

There is a special type: any, which you can use whenever you don’t want a specific value to cause typing errors.

let obj: any = { x: 0 };

Find out more here.

02. It has Arrays and Tuples:

A tuple type is another type of Array that knows exactly how many elements it contains and exactly which types it contains at specific positions.

let numbers: number[] = [1, 2, 3];
let tuple: [string, number] = ["Hello", 42];

console.info(numbers[1])
console.log(tuple[1])

03. Enumerators

Enums allow a developer to define a set of named constants. Using enums can make it easier to document intent or create a set of distinct cases. TypeScript provides numeric and string-based enumerations.

enum Color { Red, Green, Blue }
let c: Color = Color.Green;

console.log(`The Green number is: ${c}`)

04. Interfaces and Classes

An interface declaration is another way of naming an object type:

Interface

interface Person {
     firstName: string;
     lastName: string;
     age?: number; // Optional
}

function greeter(person: Person) {
     return `What's up, ${person.firstName} ${person.lastName}?!`;
}

const myPerson: Person = {
     firstName: "Mark",
     lastName: "Simmons",
     age: 39
};

console.log(greeter(myPerson));

Class

class Animal {
     name: string;

     constructor(name: string) {
         this.name = name;
     }

     distance(distanceInMeters: number = 0) {
         console.log(`${this.name} is ${distanceInMeters}m away from me.`);
     }
}

const myAnimal = new Animal("cat");
myAnimal.distance(10);

Note: name is inside a class! 😃

Tips

• You can use union (|) and intersection (&) types for greater flexibility.

function padLeft(value: string, padding: number | string) {
   if (typeof padding === "number") {
     return `${value}: ${padding}`
   }
   if (typeof padding === "string") {
     return `${value} ${padding}`;
   }
   throw new Error(`Expected string or number, got '${typeof padding}'.`);
}

console.log(padLeft("Hello", "friend"))
console.log(padLeft("Hello", 36))
//console.log(padLeft(9, 36)) // Error

• Avoid using automatic types:

// Bad ideia
let myStr1 = "This is my string"

// Good idea
let myStr2 : string = "That's my string"

• Use modules (import and export) to organize your code.

// mymodule.ts
export function dizAi(name: string) {
     return `Calm ${name}`;
}

// main.ts
import { dizAi } from './mymodule';
console.log(dizAi("Calabreso"));

Note: I declared the variable name, but as a function argument!

After compiling and running:

tsc && bun dist/main.js
Calabreso

EXERCISE: Generate Numbers for Mega Millions with TypeScript

As we are going to use the process.stdout.write() function we need to install @types/node, so run:

npm i --save-dev @types/node

Now read the properly commented code with an explanation of each block:

// This function draws six different numbers between 1 and 60.
function megaMillions(): number[] { // Return type is an array of numbers

   // We use a Set to store the numbers. 
   // A Set does not allow duplicates, so it guarantees that all numbers are unique.
   const numbers: Set<number> = new Set();

   while (numbers.size < 6) {
     // The Math.random() function generates a pseudorandom number between 0 (inclusive) and 1 (exclusive). 
     // We multiply by 60 and add 1 to get a number between 1 and 60.
     const randomNumb = Math.floor(Math.random() * 60) + 1;
     numbers.add(randomNumb);
   }

   // After generating six numbers, convert them from Set to an Array and sort them in ascending order.
   return Array.from(numbers).sort((a, b) => a - b);
}

// we call the function that returns an Array
const array = megaMillions();

// We make a loop and use process.stdout.write to not skip lines, console.log skips
for (let index = 0; index < array.length; index++) {
   process.stdout.write(`${array[index]} `)
}
console.log()

Spin and don’t forget to play those numbers! 😃

Conclusion

TypeScript offers a powerful way to write typed JavaScript making your code easier to maintain.

With the above basics, you should be well equipped to start using TypeScript in your projects. Remember to take advantage of TypeScript’s features to create more robust code.

Continue your learning and consult the documentation on the official website.

typescript

Marcos Oliveira

Software developer

https://github.com/terroo