RRARI504

Posted on Nov 17 • Edited on Nov 19

Typescript

#typescript #webdev #javascript #learning

What is Typescript:

Typescript is a language that builds on top of Javascript offering everything that Javascript offers but with an additional layer. "TypeScript is JavaScript with syntax for types." (1). Every Javascript program is a Typescript program and comes with features like static types, interfaces and more. In essence typescript enhances Javascript and makes development more reliable for developers.

How does typescript work?:

The way typescript works is that it is transpiled into Javascript via the TypeScript compiler (TSC). When this happens Typescript performs a type check which analyzes your code and points out errors like incorrect variable types or invalid function calls. This helps devs catch issues before the code runs which in turn reduces bugs and debug time.

Some of the key capabilities include optional static typing, type reference, interfaces, type aliases and classes with visibility modifiers & compiling to Javascript for browser and server use.

Where did it come from?

Typescript was created by Microsoft and released to the public in 2012 with version 0.8 after about 2 years of internal development.

We released the first public preview of TypeScript last month, and have been excited to see the great reaction from the developer community. Since the preview, we’ve seen an influx of suggestions and bug reports, integration into various build and testing tools, and declare files for a variety of existing JavaScript libraries (3).

When released, it was very popular in the coding community. Miguel de Icaza, a software engineer for Microsoft who has made multiple open-sourced programs; loved Typescript when it was released but criticized the lack of a more mature integrated development environment (IDE). With support only for Microsoft's Visual Studio, which was unavailable for Linux and macOS at the time.
As of April 2021 there is support in other IDEs and text editors, including Emacs, Vim, WebStorm, Atom and Microsoft's own Visual Studio Code.(4)

Typescript was made to help with Javascript scalability because as web applications began to grow in popularity and size developers needed different tools to help with structure and error detection; and Typescript added these tools that were not native to Javascript.

How does it look?

Here are some basic examples of how Typescript will look and work in your code:

BASIC TYPES:

const message: string = "Hello World";

Here, message must be a string and Typescript will enforce this by preventing assignments of other types. For example if you try this:

message = 42;

To ensure variables stay consistent with their declared type, Typescript will say, 'The number is not assignable to the type 'string'.

INTERFACE

interface Person {
  name: string;
  age: number;
}

function greet(person: Person) {
  return "Hello " + person.name;
}

The Person interface defines the required "shape" of a person object. The function greet requires any argument to match { name: string, age: number }.

greet({ name: "Alice" });

If greet was called this way TypeScript would enforce all required properties to exist with the correct types; here the property 'age' is missing in type.

CLASSES

class Point {
  x: number;
  y: number;

  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}

The class Point defines two properties: x and y, which are both numbers. The constructor requires two numeric arguments to be passed in.

const p = new Point("hello", 10);

If the point class was invoked this way you would get an error from Typescript to ensure that class instances follow their declared structure: Argument of type 'string' is not assignable to parameter of type 'number'.

Conclusion

Typescript helps scale Javascript code by adding, useful tools, clear structure and type safety. Javascript is still a very dynamic and loved language, but typescript continues to grow in popularity throughout the tech community. Bug prevention, improves dev productivity and makes application development smoother overall; for modern web development Typescript offers a more reliable process than Javascript making it value choice for your next project.

DEV Community