TypeScript for those who don’t know TypeScript

Typescript, you might of heard of it before and are now looking to learn more about it or just want to see how to get started in it. You have come to the right place. This is a sort of tutorial that goes over getting started in using Typescript.

Prerequisites

Be able to use a computer and computer terminal (Required)

Be familiar with any programming language (Required)

Know JavaScript (Optional but recommended )

Photo by Chris Ried on Unsplash

What is TypeScript?

For those coming to this tutorial with no previous knowledge of what TypeScript is, TypeScript is a super set of JavaScript. Simply put, TypeScript is an additional set of features for JavaScript bundled as a language. As the name implies TypeScript adds Types as its main feature, allowing for more strict data movement which aims to aid in development. TypeScript being a super set of JavaScript also allows it to be compatible with all JavaScript code and thus can be incorporated seamlessly into any project (for the most part).

Source: https://www.typescriptlang.org/

How to get TypeScript?

There are Two easy steps to install TypeScript on your computer.

First, download Node.js with npm if you have not already from: https://nodejs.org/en/ .

Second, in any terminal run

npm install -g typescript

and voila, you know have TypeScript.

How to use TypeScript?

Alright now that you have TypeScript you need to actually use it. The basics will be mainly covered here but I recommend looking at the documentation for more information on TypeScript.

To use TypeScript open you IDE of choice (VS code recommended) or even a text editor. Create a file with any name, we will call it “demo” for today, and then save it with the type “.ts” for TypeScript.

In this file we are able to write any TypeScript code we would like. As is customary lets start with a simple HelloWorld program. In your TypeScript file write console.log("Hello World!") .

Now to actually run it. There are many ways to run TypeScript code depending on what you are using it for. To run it from the command line simply run

npx tsc demo.ts

in a terminal at the file location (demo.ts switched with your file name). This will create a new file in the same folder that is in JavaScript. The new file (demo.js) can now be run like any JavaScript file by running node demo.js .

If you would like to skip the compilation to a JavaScript file, you can install ts-node which will compile and run TypeScript code on the fly.
To install run npm install -g ts-node then use npx ts-node demo.ts to run your code.

TypeScript Types

As stated earlier TypeScript is used to add types, all other syntax is the same as JavaScript.

Types are declared when variables are declared. For example, when creating a Boolean isTrue it can be declared with type Boolean as such

let isTrue: boolean;

It can also be initialized when declared as such

let isTrue: boolean = true;

if the type is not specified, the type is automatically set to the type of the initialized value.

let isTrue = true;

In the example above isTrue is set to a boolean type since it is initialized with boolean.

let isTrue;

If no type is declared and the variable is not initialized then by default the variable will become of the type “any”, which means it can be anything. While this is allowed in TypeScript is should be avoided as it removes the advantages of the language.

The main types included are but are not limited to:

• boolean: True or False
• string: text
• number: numerical values
• Array: a collection of any type
• unknown: used for unknown values (typeof() checks need to be added in code to use properly)
• Any: any type assignable
• null: a null value
• undefined: an undefined value

A variable is also able to be set to be many different types by using| .

let birthday: string|number|null;

In the example above birthday can be either a string, number or null.

Functions can also have a type declared to their parameters and their return types.

let myAdd = function (value: number, increase: number): number {
return (value + increase);
};

Conclusion

Now that you have the basics of TypeScript you are able to use it in the place of JavaScript as other than types it is the same. It is an extremely powerful and useful language. I hope this tutorial has helped. :)

code if needed: https://github.com/YoussefZayed/Medium-content/tree/main/TypeScript