Originally released in 1995 after a staggeringly short development period, JavaScript has since gone on to become an integral part of many sites and apps. Today, JavaScript has found a home in both client and server-side applications. Developers still request plenty of features, despite all the changes it has experienced over the years.

TypeScript is a scripting language that extends JavaScript with many of these long-awaited features. Type annotation, custom typing, and interfaces are all major components, along with better tooling to increase productivity.

Why Bother Switching?

The prospect of switching out languages on major projects can be stressful. Thankfully for anyone considering the task, the process of porting a project from JavaScript to TypeScript is quite simple.

JavaScript has spent the last few years gaining traction as a major programming language. Originally used only for front-end scripting on websites, the release of Node.js brought JavaScript server side, helping expand its popularity.

While JavaScript has become far more popular recently, there are plenty of features that its latest implementation, ES6, still lacks. For many developers, these lacking features limit the usefulness of JavaScript as a language.

TypeScript aims to rectify those concerns by wrapping JavaScript with extra features, then transpiling user code. The result is a type-safe language with the ease and usability of JavaScript.

There are already several tools and frameworks out there with full TypeScript support. Angular has been using it for a long time, and even React has ways to implement TypeScript.

TypeScript Is Like JavaScript Enhanced

TypeScript implements many of the features that developers often request in JavaScript. TypeScript is named for the complete type system that it implements, including features like type checking, safety, and implicit typing. TypeScript even lets you define and use custom namespaces.

TypeScript also contains interfaces, enumerations, and type inference. TypeScript maintains support for features from the latest JavaScript implementation alongside legacy features, and adds a suite of new features.

Overall, TypeScript’s focus is on creating a safer development process with stronger tooling to assist coders.

It Encourages Type-Safe Code

TypeScript uses a built-in type-checking system to validate variable types. It includes a set of standard types with the option to define your own classes and types. Types can be explicitly declared, or inferred based on assignment.

TypeScript has several standard data types, including strings, numbers, booleans, and tuples. There are also the variable types, like unknown and any, which let you use weakly-typed code.

TypeScript’s type inference allows you to run type checks on even standard JavaScript code by running it through TypeScript’s transpiler.

Transpilation Makes It Easy to Use

From a developer perspective, one of the best features of TypeScript is that it outputs vanilla JavaScript. You can run TypeScript code through a process known as transpilation, which is similar to compilation.

Rather than an executable, the result of transpilation is a script in a language other than the code’s original one.

TypeScript code transpiles to JavaScript which you can then run on a server or client. This lets you quickly and easily write code that you can run on nearly any platform.

TypeScript Aids Developer Productivity

Adding types to JavaScript not only allows code to run safely, it also provides developers with tools that make coding easier. Most modern IDEs offer TypeScript support that allows code completion tools like IntelliSense to offer additional context to code. It can also offer type checking as you write, helping you catch errors more rapidly.

Additionally, TypeScript’s extra data structures and syntax are designed to increase code readability. These features make it quicker and easier to create high-quality code and spot potential issues before they become problematic.

How Can You Port Your Code?

If you are starting a brand new project, creating a new TypeScript project is quite simple. Converting a pre-existing project over to TypeScript, however, is a bit more involved.

Under most normal circumstances, the prospect of converting a project from one language to another is a frightening one. The conversion from JavaScript to TypeScript, however, is surprisingly simple.

TypeScript as a Superset of JavaScript

TypeScript is considered a superset of JavaScript. That means that TypeScript adds additional layers of syntax and functionality, without changing or removing the core functionality that it builds around.

For developers, this means that any code that runs properly in JavaScript will automatically run correctly in TypeScript. Whether the script in question is a web server written to run in NodeJS, or a set of front-end scripts for a web page, switching over is exceptionally simple.

After installing the TypeScript transpiler, you can create a simple tsconfig.json file with the following content:

        {
 "compilerOptions": {
   "outDir": "./build",
   "allowJs": true,
   "target": "es5"
  },
 "include": ["./src/**/*"]
}
    

Move any applicable files to the src directory and run the transpiler. This will create the resulting JavaScript files in the build directory.

These quick and simple changes will convert a standard JavaScript project to a TypeScript one. From here, you’re free to use the new features that TypeScript offers at your leisure. You can annotate types on variables, implement custom types, and define interfaces.

After each transpilation, you can use the output from the build directory as necessary by adding the files into any project just as you normally would. The transpiler will type check standard JavaScript and convert new features into valid ES5 scripts.

What You Need to Know to Go From JS to TS

The process of converting a project from JavaScript to TypeScript is exceptionally easy. Converting is as simple as switching out the directory structure, adding a config file, and installing the transpiler.

Getting all the benefits out of the new language, however, can be a much longer project. While TypeScript can infer the type of every variable in a project, these should be explicitly declared. Going back through and adding custom types to a project, adding proper annotations, and creating interfaces can be time-consuming.

Adding these features to a project, however, will allow you to reap the benefits that come with proper type checking and expanded tooling. Major projects will be quicker and easier to build, you’ll identify errors earlier, and new developers will have an easier time reading your code.