Setting Up TypeScript

To start using TypeScript, the first step is to install Node.js. You can opt for either the Long-Term Support (LTS) version or the Current (latest) version based on your needs.

Understanding the TypeScript Compiler

Begin by creating an index.ts file in your directory. Add a simple console.log statement and compile the .ts file with tsc index.ts.

Upon compilation, you'll notice that a corresponding .js file is generated. This is because the console.log statement is standard JavaScript, requiring no modifications during the compilation process.

By default, TypeScript compiles to ES3, which does not support async-await. If you include an async method in your code and run the tsc command, the resulting .js file will contain additional code to accommodate the async-await syntax.

To take advantage of newer ES versions that support async-await, you can create a tsconfig.json file to configure your settings.

After saving the configuration file and running the tsc command, you will see that the generated .js file mirrors the .ts file, confirming that the esnext version supports the async-await syntax.

You can also enable the watch option to automatically compile changes in your code without needing to run tsc each time, or use the lib option to include specific libraries that provide automatic typings for DOM methods.

Integrating Third-Party Libraries

TypeScript allows you to incorporate third-party libraries to enhance your development experience. For example, let's explore the lodash library.

Install it using:

npm install lodash

When attempting to import it into your .ts file, you may encounter errors indicating that the module declaration is unrecognized, resulting in a lack of intellisense and typing support.

Fortunately, the TypeScript community offers type definitions for most commonly used libraries. To resolve the previous issue, run:

npm install -D @types/lodash

After installation, the errors will disappear, and you'll regain intellisense and autocompletion for the lodash library.

TypeScript Basics

With a grasp of how the TypeScript compiler operates, let's review how to enforce strong typing in your code. There are two primary approaches to achieve this.

For special cases requiring flexibility, you can use the any type. However, it's advisable to avoid it, as it undermines the core advantages of TypeScript and prevents the editor from catching type-related errors.

Additionally, you can define your own types to restrict the parameters allowed in specific fields.

Creating interfaces can also help enforce strict typing for objects. This way, you can easily identify fields with incorrect values.

While flexibility is beneficial, overusing it may render TypeScript ineffective and lead to error-prone code.

Strongly Typed Functions

In addition to variable typing, functions can also be strongly typed. For example, in the first function without type declarations, the IDE fails to recognize errors even with incorrect input types. Conversely, if you declare the types of your function arguments and return values, the IDE will promptly highlight any type mismatches.

For helper functions that do not return any value, you can specify the return type as void.

Strongly Typed Arrays

Next, let's examine strongly typed arrays. If you declare an array without specifying its type, it can accept any type of data.

However, when you enforce a specific type for the array, the IDE will flag any incorrect data types that you attempt to insert.

TypeScript Generics

Lastly, TypeScript generics allow you to define a generic type for your class. This ensures compatibility for other classes that may extend it.

By using generics, other classes or variables that utilize your class can specify their types without compatibility issues.

Conclusion

This article aims to spark your interest in transitioning to TypeScript from traditional JavaScript. While no language is flawless, the advantages of TypeScript are evident through the examples presented. The learning curve may be steep, but once you embrace it, you won't look back. Don't let minor bugs disrupt your workflow any longer! Let's embrace TypeScript for a smoother front-end development experience.

Join Medium with my referral link - DevJo

As a Medium member, your subscription contributes to the writers you read, granting you full access to all stories. Explore more at medium.com.

iMore content at **PlainEnglish.io*. Sign up for our free weekly newsletter. Follow us on Twitter and LinkedIn. Check out our Community Discord and join our Talent Collective.*