TypeScript Programming Language: A Replacement for JavaScript

TypeScript programming language offers many advantages over JavaScript for developers. Its additional features help you build complex, interactive applications and websites with fewer bugs.

TypeScript also comes with a rich ecosystem of developer tools. These tools provide inline documentation and live code checks, making it easier to spot coding errors while writing code.

This article explains what TypeScript is, how it relates to JavaScript, and where you can start learning to build frontend and backend applications.

TypeScript is a statically-typed language and a superset of JavaScript. It builds on top of existing JavaScript syntax and functionality. In other words, you can use JavaScript code inside TypeScript.

However, the reverse doesn’t work. You can’t run TypeScript code directly in JavaScript because TypeScript uses features and syntax that JavaScript doesn’t recognize.

To run in browsers or Node.js, you must compile TypeScript into JavaScript. After compilation, you shouldn’t edit the JavaScript output directly.

A typical workflow looks like this:

1. Write code in TypeScript.

2. Compile it to JavaScript.

3. Deploy the compiled file.

TypeScript became popular not because it introduced a new language, but because it compiles into JavaScript and runs on existing systems.

Files written in TypeScript use the .ts extension. For example, a file named index.ts might contain:

undefined let message: string = "Hello, World!";

function greeting () {
console.log(message);
}

greeting();

If you observe, although the syntax is very similar to JavaScript, there’s something different in the code example above—the variable `message` is followed by a colon (:) and its type. In this case, TypeScript allows us to specify that the message must be a string, and cannot take a value of any other type.

TypeScript is named as such because its main feature is introducing type safety in JavaScript. In the example above, the string type is enforced for the message variable, so no numerical value or any other type can be used there.

This may seem restrictive, but it’s actually highly beneficial for developers.

Type safety and compile-time checks reduce the likelihood of programming errors.

Consider this scenario where you take values from two HTML text inputs and want to add them. JavaScript reads these values as strings (they’re from text boxes!). As a result, the output will be:

undefined let a = "2"; // Assuming the value has been read from a text input
let b = "5";
console.log(a + b); // Result is "25"

This code runs without any warnings or errors, with the text box values treated as strings, meaning the values are concatenated instead of being added using arithmetic operations, leading to an undesired result of “25” instead of the number 7.

This is problematic if you’re building an e-commerce website, as it would result in an incorrect charge to the customer!

This case shows why type safety is important. Below, the type of the variables is added:

undefined let a: number = "2";
let b: number = "2";
console.log(a + b);

If you try to compile and run this code, it won’t succeed. Instead, you’ll get an error:

Type ‘string’ is not assignable to type ‘number’

This tells you that you’ve mistakenly tried to assign a string value to a numeric variable, so you must fix it—perhaps by explicitly converting the string to a number.

By preventing you from compiling and running code with typos, TypeScript makes applications easier to debug and more reliable for users.

You don’t have to specify variable types when working in TypeScript. You can declare and use variables without a specified type, and TypeScript will infer the type based on the value and usage.

This is useful when incorporating untyped JavaScript code into a TypeScript project. If you want to try it yourself, TypeScript Playground allows you to write and test TypeScript code directly in your browser without needing to compile it.

Type, Classes, and Custom Interfaces Keep Your Data Consistent

TypeScript extends JavaScript’s support for object-oriented programming with custom types, as well as improvements to classes, interfaces, and inheritance.

• Building object types and interfaces allows you to model data in TypeScript to ensure that your data is processed and stored correctly.
• Classes and inheritance enable clean code and DRY principles, keeping your codebase much more organized than JavaScript could allow.
  Enums and literal types make your code more understandable.

Enum and literal types make your code easier to understand

With TypeScript, Enum make your code easier to read and understand by giving names to values that might be unclear (ambiguous).

For example, suppose you store order statuses in a database as numeric values to save space and speed up searches. Instead of “pending,” “paid,” and “shipped,” you could store those as the numbers 0, 1, and 2, respectively.

The effect would be that your code would become confusing, as the numbers don’t really explain much. Furthermore, you might forget which number corresponds to which status, and use the wrong number. Enums offer an easy solution:

undefined enum OrderStatus {
pending,
paid,
shipped,
}

In the enum above, “pending” has a value of 0, “paid” has a value of 1, and “shipped” has a value of 2. When using an enum, you refer to the value by name, and the indexed value will be returned:

console.log(OrderStatus.paid); // Will output 1

Literal types and union types enforce specific values for variables. For instance, you might have a function that only expects either “cat” or “dog” as input:

undefined function myFunction(pet: "cat" | "dog") {
console.log(pet);
}

If your code gives a value other than “cat” or “dog” to this function, an error will occur. This helps ensure more issues are caught during development.

You can write functions that expect specific input, knowing that if a bug is introduced with an unexpected value, your application won’t compile.

TypeScript code needs to be compiled into JavaScript to run in web browsers and Node.js. To do this, you need to install the TypeScript compiler.

You can install TypeScript globally using the following npm command.

npm install -g typescript

Once installed, you can run the TypeScript compilation command tsc from anywhere in the terminal as long as you use npx:

tsc index.ts

The above command will compile the TypeScript file index.ts and generate a compiled JavaScript file named index.js.

TypeScript is great for building multi-page applications and complex websites. Most developers won’t use it for basic things like adding interactivity to a single-page website.

But developers will use it to build large applications with React or Angular.

Many developers use code editors that support TypeScript integration so they can take advantage of code completion, inline documentation, and error highlighting to simplify their development and debugging process.

Can I Use Existing JavaScript Code?

Yes! TypeScript is compatible with JavaScript. You can use old JavaScript code and continue to use it in a TypeScript project, then refactor it over time to take advantage of TypeScript’s new functionality.

Building Frontend with TypeScript for the Browser

React is a library that helps you build user interfaces for the frontend. It provides a foundation for you to build reusable components, modularize, and simplify application development.

This library also lets you create dynamic pages that can interact with users by displaying, hiding, moving, and changing content on the screen.

React applications can be written in TypeScript, and this combination is a popular and powerful toolchain for frontend developers.

Angular is a complete framework that uses TypeScript to build its components. It takes things further than React. In addition to providing tools to build user interfaces, it provides a framework for the entire application.

Angular’s great approach allows developers to build faster, as long as their application’s concepts align with Angular’s architecture.

Both React and Angular can be used to build TypeScript applications for Ionic and Electron. Ionic allows you to build mobile apps for iOS and Android using TypeScript.

On the other hand, Electron allows you to embed web applications into desktop apps for Windows, Linux, and macOS.

Deploying TypeScript Backend to the Server

TypeScript is not limited to building frontend applications. It can also be used with Node.js to develop backend services and command-line applications.

You can also use TypeScript with the Fastify web framework or with TypeScript-specific frameworks like Nest to build type-safe APIs.

TypeScript comes with many useful features for developers, and learning and implementing them all at once may feel overwhelming. However, because it supports existing JavaScript code, you don’t need to implement every TypeScript feature at once.

One approach is to learn a few TypeScript features, then apply them to your JavaScript code, function by function, and once done, pick another set of TypeScript concepts to implement and repeat.

This helps you migrate your codebase to TypeScript with minimal effort and helps you dive deeper into those concepts.

The TypeScript Handbook is a great place to learn how to build applications in TypeScript. The book explains its concepts well and contains relevant examples. It’s also updated regularly with new information about TypeScript and its uses.

That’s the article about the TypeScript programming language, a replacement for JavaScript, shared by Mangcoding. Hopefully, this article is helpful and provides new knowledge for you. If you have any feedback or suggestions, please feel free to comment or send an Email or through Mangcoding’s social media.

Source : contentful.com