How TypeScript Can Improve Your Web Development Projects

Hi, everyone! In this article I'm going to talk about how TypeScript can help enhance and improve your web development projects.

If you're not familiar with TypeScript, you can read through this comprehensive beginner's guide to get started. If you do know some TS, that's great – I'll discuss why it's recommended in most projects that use JavaScript.

What is TypeScript?

TypeScript is a superset of JavaScript. This means you can use all the useful JavaScript features you already know and love, along with some others that TypeScript adds that didn't exist before.

In other words, TypeScript offers all the JavaScript functionality plus an extra layer, which is the TypeScript type system.

TypeScript addresses many of JavaScript's limitations that other languages have tackled to help produce complex applications.

With TypeScript, you can run your code anywhere and on any platform, browser or hosted. This is because these tools are multi-platform, which means you can develop TypeScript applications using Windows, Mac, or Linux.

Microsoft developed TypeScript to meet the challenges of modern web development. It provides static type checking along with many productivity-enhancing features. It also aligns with the rapid evolution of ECMAScript.

Some of TypeScript's most useful features are its types, annotations, interfaces, classes, encapsulation of your logic, and data with access modifiers. You can also take advantage of productivity enhancements such as variable and property renaming. All this helps you more easily find errors in your code before executing it.

What Makes TypeScript So Successful?

TypeScript fills a gap in the world of web development, offering a versatile, high-performance solution to help you build scalable, high-quality web applications.

TypeScript was first announced in October 2012. Since then it has grown rapidly and steadily, becoming a popular solution for web development and application development in general.

TS adds a variety of useful tools and syntax to an already mature language, bringing the power and productivity of open source object-oriented development to a fully compatible core of JavaScript.

Here are some of the advantages that have made TypeScript so successful and a better choice for web development:

• TypeScript is a superset of JavaScript, meaning that all existing JavaScript code is valid in TypeScript. Developers can gradually migrate their JavaScript code to TypeScript without disrupting their workflow.
• TypeScript offers static type checking, which means that developers can detect typing errors early in the development phase. This significantly reduces type-related bugs and improves code stability and reliability.
• Thanks to its static typing system, TypeScript provides editor assistance, an autocomplete feature, and better documentation. This makes development easier and accelerates developer productivity.
• Thanks to static type checking, many errors that would normally occur at runtime in JavaScript are detected at the development stage, reducing debugging time and effort.
• TypeScript benefits from an active and constantly growing community of developers, as well as regular support and frequent updates from Microsoft, which continues to perfect this technology.

Thanks to these benefits, TypeScript has gained in popularity and is a solid choice for modern web development. Its ability to improve code quality, facilitate smooth development, and deliver a better overall experience has contributed to its success in the web development ecosystem.

Using TypeScript with Other Technologies

TypeScript integrates seamlessly with other popular technologies and frameworks such as React, Angular, Vue.js and Node.js. This compatibility makes it a natural choice for developers working in these ecosystems.

TypeScript also encourages better code organization through the use of interfaces, classes, and modules. This facilitates code maintenance and readability, especially when managing complex projects.

TypeScript and Angular

Google's Angular caught everyone's attention when it decided to use TypeScript as its primary programming language from the start of its development in September 2014.

The Angular development team announced this change at ng-conf in October 2014, where they presented Angular 2 (the major version of AngularJS) based on TypeScript.

Let's look at an example of some Angular code before the introduction of TypeScript:

// Angular Component in JavaScript (ES5)
angular.module('app').component('appRoot', {
    templateUrl: './app.component.html',
    controller: function () {
        this.message = "Hello, JavaScript and Angular!";
    }
});

Here's what's going on and what to note:

• AngularJS Syntax: Before the arrival of Angular 2, Angular used JavaScript (ES5) syntax. In the above example, we're using angular.module to define a module, and component to define a component.
• Controller: In AngularJS, a controller is used to manage the logic of a component. In the example above, the controller function defines the property this.message.
• TemplateUrl: The HTML template is defined via the templateUrl property in the component configuration. In this example, it's supposed to be in the file './app.component.html'.

And here's what the same Angular component would look like after the introduction of TypeScript:

// Angular Component in TypeScript
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    message: string = "Hello, TypeScript and Angular!";
}

It's important to note that the switch from JavaScript to TypeScript in Angular has brought several benefits, including:

• Strong typing: TypeScript lets you specify variable types, making code safer and less error-prone.
• Better Intellisense: The code editor can provide suggestions and type information in real time, improving developer productivity.
• Early error detection: TypeScript can detect compiler errors before runtime, making debugging easier and reducing runtime errors.
• Better maintainability: Type annotations and code structure make code easier to read and maintain.

Angular switched to TypeScript because of several factors, including TypeScript's static type checking, which solved many of the typing problems encountered in AngularJS (the previous version of Angular).

TS also offered advantages in terms of complex project management, productivity, compatibility with JavaScript and active support from Microsoft.

TypeScript also offered developers greater productivity thanks to its advanced development support features, such as autocompletion, code navigation, and early error detection. This has enabled Angular to establish itself as a robust web development framework appreciated by many developers and companies.

Angular has continued to evolve using TypeScript as its core language, and the combination of Angular and TypeScript has become a common choice for the development of modern web applications.

This has also helped to strengthen TypeScript's adoption among the developer community, making it one of the most popular languages for web development.

How to Configure TypeScript for Use in Existing JavaScript Projects

Angular is already based on TypeScript, so there's no need to convert JavaScript to TypeScript in your modern Angular projects.

But if you use JavaScript in your TypeScript files, it will be less strict in its type checks. So, when integrating TypeScript into your existing JavaScript-based projects, it's important to make a gradual transition, set up tsconfig.json, manage types carefully, and test regularly.

How to Use TypeScript with Node.js:

As your development needs grow with your team, you may need more powerful tools and syntax when working with Node.js.

This is where using TypeScript with Node.js can be a good approach – and it lets you take adtvantage of TS's static type checking, as well as support for the latest JavaScript features.

The first thing to do is install or add TypeScript to the project like this:

npm install --save-dev typescript

Create a TypeScript configuration file (tsconfig.json) manually at the root of the project or by running the command below, which will generate it automatically.

npx tsc --init

Modify the  tsconfig.json file to specify the necessary compilation parameters and configure the paths to existing JavaScript files.

This is an example of the TypeScript configuration file (tsconfig.json):

{
  "compilerOptions": {
    "target": "ES2020",              // Target JavaScript version
    "module": "CommonJS",            // Module system to use
    "outDir": "./dist",              // Output directory for compiled files
    "rootDir": "./src",              // Source directory for TypeScript files
    "strict": true,                  // Enable strict type checking
    "esModuleInterop": true,         // Enable ES6 module interop
    "forceConsistentCasingInFileNames": true, // Check consistent file casing
    "declaration": true,            // Generate declaration files (.d.ts)
    "sourceMap": true               // Generate source map files (.js.map)
  },
  "include": ["src/**/*.ts"],       // Files to include in compilation
  "exclude": ["node_modules"]       // Files to exclude from compilation
}

Don't forget to place the tsconfig.json file at the root of your project if you've done this manually. Then be sure to adjust the values of the options according to your project's needs, such as source directory (rootDir), output directory (outDir), "target", "module" options, etc.

After doing this you'll be ready to use TypeScript in your Node projects.

How to Use TypeScript with React:

TypeScript offers developers a more structured approach to JavaScript application development, and is a natural fit for the processes that most React developers already use.

Combining React's component-based approach with TypeScript's discipline allows you to create clean web applications that will be easier to maintain over time.

React has various tools at its disposal, such as accessory types and flow, but if you want a more mature option, that's where TypeScript comes in. It enables better management of component states, properties, events, and so on.

TS also implements many best coding practices and built-in type checking to approve the syntax and coding styles of your code.

For a new React.JS project, there are many ways to configure TypeScript. There are tools that allow you to run React and TypeScript online, which can be useful for debugging or making shareable reproductions. Examples of these tools include StackBlitz and CodeSandbox, or you can use this React TypeScript Cheatsheets checklist as a reference.

You can also simply use Create React App and set it up via your terminal with this command:

npx create-react-app my-app --template typescript

For an existing React project, create-react-app uses Babel to compile the JavaScript code. So for TypeScript you'll just need to install a few TypeScript-related packages like @types/react and @types/react-dom in your project.

Don't forget the various compilation options that you'll need to define in the tsconfig.json file. dom must be included in lib (Note: if no liboption is specified, dom is included by default) and JSX must be set to one of the valid options. Preserved should be sufficient for most applications.

All that's left is to rename the files to TypeScript and convert the code to TypeScript (component, and so on). JavaScript files in the React application can be renamed using the extension .tsx for files containing JSX (React) code and .ts for files containing standard TypeScript code.

For example, if you have a src/App.js file, you can rename it to src/App.tsx. Don't forget to do the same for the other files.

Now open the .tsx files you've renamed and start adding types to declarations, React components, and any other appropriate places.

npm install @types/react @types/react-dom

or if you miss certain dependencies you can run this:

cd mon-app
npm install typescript @types/node @types/react @types/react-dom @types/react-scripts --save

Now you're all set to use TS in your React projects.

How to Use TypeScript with Next.js:

TypeScript can help improve the performance of server-side rendering (SSR) and client-side rendering (CSR) applications by detecting errors early and facilitating type sharing between server and client.

It also enables better integration with Next.js, such as interfaces for SSR data and type annotations for routing functions.

Next.js provides a TypeScript-first development experience for building your React applications. It comes with built-in TypeScript support for automatically installing the necessary packages and configuring the proper settings.

For new projects just use create-next-app which now comes with TypeScript by default.

npx create-next-app@latest

In your existing projects, the first thing to do is install or add TypeScript to your project by renaming a file to .ts / .tsx. Run next dev and next build to automatically install the necessary dependencies and add a tsconfig.json file with the recommended config options.

If you already had a jsconfig.json file, copy the paths compiler option from the old jsconfig.json into the new tsconfig.json file, and delete the old jsconfig.json file.

Conclusion

TypeScript has been steadily growing in popularity in the web development ecosystem, thanks to its performance, type safety, and productivity advantages.

As the preferred choice for technologies such as ReactJS, Next.js, Angular and others, TypeScript improves code quality, facilitates collaboration between development teams, and enables the creation of high-performance, scalable web applications.

For more information on TypeScript, here are some helpful resources:

• TypeScript - Official documentation
• Microsoft Learn - TypeScript
• TypeScript course on freeCodeCamp

Thanks for reading. You can find me on LinkedIn here, and follow me on all socials @AdalbertPungu.