An Introduction to TypeScript

The front-end React developer world is all abuzz with the fondness of using and preferring TypeScript over JavaScript. Although it’s not recommended for all types of projects it strongly overcomes many shortcomings of JavaScript and improves over it.

In this beginner-friendly article, we will get to know what exactly TypeScript is, how is it a strongly-typed language, how it compares to JavaScript along some of its highlighting features. Of course, we will be writing our first .ts code too!

What is TypeScript?

TypeScript is a strongly typed programming language that builds on JavaScript giving you better tooling at any scale. It’s a free and open-sourced project created by Microsoft.

It is a ‘superset of JavaScript’, which means that you can continue to use the JavaScript skills you’ve already developed and add certain features that were previously unavailable to you. When compared to JavaScript, it’s a strongly typed language as opposed to JS which is a loosely typed language. You can consider this like JavaScript with superpowers!

Now here’s where this language actually shines…remember the term ‘strongly typed’ we used above? What does it mean in this context? Well, this means that the data types of variables/functions and other primitives must be pre-defined. This is one of the most important features of TypeScript (that’s why it focuses so much on the ‘type’).

Under the hood, it compiles to JavaScript, giving you the benefit of the JavaScript platform plus the intended advantages of types.

Top features of TypeScript

Now that you know a bit about this language, it’s time to see all the important and useful features it provides to the developer. Here are a few of them:

1. JavaScript and more: TypeScript adds additional syntactic sugar to your JavaScript code to support a tighter integration with your editor.

2. Runs anywhere where JavaScript does: TypeScript code converts to JavaScript which can then be run in a browser, on Node.js or Deno, and in your apps.

3. Safety with scalability: it uses type inference to give you great tooling without writing any additional code.

4. Editor support: most of the modern IDEs and code editors like VS Code come with built-in support for TypeScript files. You get autocompletion and auto-import support in VS Code out of the box.

5. Unique language features: here are some of the features which you will only find in a TypeScript code; Interfaces, Namespaces, Generics, Abstract classes, Data modifiers, and more!

6. Gradual adoption rate: you can apply the types to any previous JavaScript projects or codebase incrementally. With great editor support, TypeScript catches errors right inside your editor!

7. Easy to describe the data: it’s really easy to describe the shape of objects and functions in your code. This makes it possible to see documentation and issues in your editor.

All of this should give you a general idea of what TypeScript is and what are its features, it’s time to write our first TypeScript code and see how to use it with JavaScript gradually.

From JavaScript to TypeScript

We won’t be diving straight into a TypeScript code. Instead, we want you to get familiar with an already existing knowledge of JavaScript and use it to convert a small JS code to TS code.

Let’s say we have the following JavaScript code:

// @ts-check
function compact (arr) {
  if (orr. length > 10)
    return arr. trim(0, 10)
  return arr
}

Now you will see an error like “Cannot find name ‘orr‘.” Next, let’s say we do another mistake like using

triminstead of sliceon an array:

function compact (arr: string[]) {
  if (arr.length > 10)
    return arr.slice(0, 10)
  return arr
}

We add a type of string[] (String array) for the arrparameter so it should always accept a string-based array and nothing else. Hence, we call TypeScript ‘strongly-typed’.

Install and Setup TypeScript

Time to write some TS code locally on our machine! You can install TypeScript globally via the following NPM command:

npm install -g typescript

Next, you can confirm the installation by running tsc –v to check the version of TypeScript installed in your system.

Note that after you write a TypeScript code and want to run it, simply running tsc with file, the name won’t work as tscis just a TypeScript compiler. We need Node.js to get the actual log output. We can do it by running this command for a “Hello World” program:

tsc hello.ts && node hello.js 

Your first “Hello World!” in TypeScript

After you installed TypeScript globally on your machine. You can open a suitable code editor like VS Code which has excellent support for the TypeScript tooling.

1. Create a new TypeScript file called helloWorld.ts. Then simply write a console log statement as you would do in JavaScript:

console.log("Hello World!");

1. Open your command prompt or Terminal window and run tsc helloWorld.ts. You will see nothing will happen as there are no types assigned here hence no type errors.

2. Instead you will see the TypeScript compiler generates a new helloWorld.js file in the same directory. This is the same TS code but it is the generated JS file output.

3. Time to make our console statement better. Let’s say we want to log the person’s name and date by asking the user to enter it through a greeter function:
   

 function greet(person, date) {
  console.log(`Hello ${person}, today is ${date}!`);
}

greet('Brendan');

Notice the way we are calling the greet function. If you run this you will get this error because we passed only 1 argument instead of the expected 2:

// TS ERROR: Expected 2 arguments, but got 1.

The parameters to the greet() function don’t have any explicitly defined types so TS will give it any type.

1. Let’s fix our function with the following valid code:

// "greet() takes a person of type string, and a date of type Date"
function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}`);
}

greet('Maddison', new Date());

Now we have explicitly defined all the data types and we can happily see the log statement printing the exact output we need.

Just in case you are wondering the equivalent JS code of this will be:

// "greet() takes a person of type string, and a date of type Date"
function greet(person, date) {
    console.log("Hello " + person + ", today is " + date.toDateString() + "!");
}
greet('Maddison', new Date());

With that, we have covered the bare-minimum basics you need to know of the TypeScript language. As you saw, it’s very much close to JavaScript so if you were already working with JavaScript then it should be easy to learn and migrate your projects to TypeScript. To make your work easy, we’ve some sites like WrapPixel and AdminMart. Check out now!