So what exactly does the parameter in brackets after the function name mean? It's called a generic type parameter, and it allows us to write functions that can work with different types of data while still maintaining type safety.

What Are TypeScript Generics?

In TypeScript, generics are a way to create reusable components that can work with a variety of data types while still maintaining type safety. Imagine them as placeholders for any type. They allow developers to write flexible functions, classes, or interfaces that can handle different types of arguments while preserving the benefits of type checking.

A generic function might look something like this:

function identity<T>(arg: T): T {
  return arg;
}

In this example, T is a type variable — a stand-in for any type. The <T> right after the function name declares a generic function. This function can work with any type T. The (arg: T): T means that this function takes one argument, arg, of type T and returns a value of the same type T.

Why Are Generics Useful?

TypeScript is a statically typed superset of JavaScript, meaning it adds static types to the JavaScript language. This feature allows the compiler to check types before the code runs, which can help catch errors early.

However, JavaScript is inherently a dynamically typed language, and sometimes, we need our TypeScript code to maintain some of that flexibility. This is where generics shine.

Generics allow developers to write flexible and reusable code while preserving the benefits of type safety. You can use generics to create functions, classes, and interfaces that can work with different data types without losing the benefits of the compiler's type checks.

When Are Generics Useful?

Generics are particularly useful when you need a function, class, or interface to work with different data types while still maintaining type safety.

For example, consider an array in JavaScript, which can contain elements of any type. If you're writing a TypeScript function that operates on an array, you could use generics to ensure that the function works with arrays of any type while still benefiting from TypeScript's type checks.

Here's some maybe more practical examples:

function getLastItem<T>(arr: T[]): T {
  return arr[arr.length - 1];
}

let numArr = [1, 2, 3, 4, 5];
let strArr = ['Apple', 'Banana', 'Cherry'];

console.log(getLastItem(numArr)); // Outputs: 5
console.log(getLastItem(strArr)); // Outputs: 'Cherry'

function getLastItem<T>(arr: T[]): T {
  return arr[arr.length - 1];
}

let numArr = [1, 2, 3, 4, 5];
let strArr = ['Apple', 'Banana', 'Cherry'];

console.log(getLastItem<string>(numArr)); // Outputs: 5
console.log(getLastItem<string>(strArr)); // Outputs: 'Cherry'

In this example, getLastItem is a generic function that can work with arrays of any type. The type T is replaced with the actual type of the array when the function is called, and TypeScript enforces that the return type matches the type of the array's elements.

Conclusion

Generics are a powerful feature in TypeScript that allow you to write reusable, flexible, and type-safe code. They are an essential tool in any TypeScript developer's toolkit. By understanding and utilizing generics, you can greatly improve the robustness and maintainability of your TypeScript code.

Typescript is essentially an added typing layer to vanilla Javascript. As we know, JavaScript is a popular programming language that is widely used for web development. However, as applications grow in complexity and size, the limitations of JavaScript become more apparent. TypeScript adds optional type annotations and other features that make it easier to write and maintain large-scale applications.

Benefits of TypeScript

Type annotations and type checking: One of the main benefits of TypeScript is its support for optional type annotations. This allows developers to specify the expected data types of variables, function parameters, and return values. TypeScript's type checker then uses this information to catch type-related errors at compile time, rather than at runtime. This can help prevent a class of bugs and make the development process more efficient.

Improved code maintainability and readability: With TypeScript's optional type annotations, it's much easier to understand what a function or variable is supposed to do, which can greatly improve code maintainability and readability. Additionally, TypeScript provides better IntelliSense and auto-completion support, which makes it easier to navigate large codebases.

Better tooling support: TypeScript has better tooling support than JavaScript. Many popular IDEs and text editors have built-in support for TypeScript, which can make the development experience more seamless. Additionally, TypeScript is compatible with many popular libraries and frameworks, such as React and Angular, which means developers can use TypeScript with their existing toolset.

Improved scalability: TypeScript's type annotations and improved tooling support make it a better choice for building large-scale applications. The type annotations provide a way to catch errors early in the development process, while the improved tooling support makes it easier to navigate and maintain large codebases.

Strong OOP Support: TypeScript offers features like class, interfaces, and private members, which makes it more suitable for Object-oriented development (This point is more focused on backend code, where ts would also be beneficial).

Code Examples

I'll just take a small component in the existing navigator code base and rewrite it using typescript:

// original file in javascript
import React from 'react'
import { Error } from '@progress/kendo-react-labels'

const FilterMessages = (props) => {
  const { messages, fieldkey, innerId } = props;

  const filteredMessages = messages.filter(
    (message) => message.field === fieldkey;
  )

  let content = null;
  if (filteredMessages.length) {
    if (innerId) {
      content = <Error id={innerId}>{filteredMessages[0].message}</Error>
    } else {
      content = (
        <ul>
          {filteredMessages.map((message) => (
            <li key={message}>{message.message}</li>
          ))}
        </ul>
      )
    }
  }
  return content;
}

// same file rewritten with types
import React from 'react';
import { Error } from '@progress/kendo-react-labels';

type Message = {
  id: number;
  field: string;
  message: string;
};

interface FilterMessagesProps {
  messages: Message[];
  fieldKey: string;
  innerId: string;
}

export default function FilterMessages({
  messages,
  fieldKey,
  innerId,
}: FilterMessagesProps): JSX.Element {
  const filteredMessages: Message[] = messages.filter(
    (message: Message) => message.field === fieldKey,
  );

  if (!filteredMessages.length) {
    return;
  }
  if (innerId) {
    return <Error id={innerId}>{filteredMessages[0].message}</Error>;
  }

  return (
    <ul>
      {filteredMessages.map((message: Message) => (
        <li key={message.id}>{message.message}</li>
      ))}
    </ul>
  );
}

You can see in the rewrite that I have created an interface for the React component which will self-document what we expect to receive as props and above that I have created a Message type which tells us what we expect every element of the messages array to contain.

This is useful because it immediately will show you what a message contains. Take this image from my IDE as an example:

Once you start to write the code, vscode will pop up with what it already knows message can contain. This eliminates typos which in turn removes a high percentage of bugs that make it to shipped code.

Rewriting this in typescript also immediately found an error in the code. The original code has the following HTML element:

<li key={message}>message.message}</li>

We can see that message is trying to be used as a key for the <li /> element which is invalid as message is an object not a string or number.

With typescript the IDE flags this as an error and gives a helpful message:

Now if you go to consume this component you will get useful autocomplete and errors if the props do not match the typing that we've set up.

Demo

Conclusion

For any frontend web projects being started fresh I don't think there are any drawbacks to leveraging typescript and there are a ton of benefits with little to no learning curve for new devs as they can take or leave the typing syntax as they begin to learn it. It will eliminate bugs in production and make code much cleaner while giving devs useful quality of life improvements.

Sermone fata

Lorem markdownum, bracchia in redibam! Terque unda puppi nec, linguae posterior in utraque respicere candidus Mimasque formae; quae conantem cervice. Parcite variatus, redolentia adeunt. Tyrioque dies, naufraga sua adit partibus celanda torquere temptata, erit maneat et ramos, iam ait dominari potitus! Tibi litora matremque fumantia condi radicibus opusque.

Deus feram verumque, fecit, ira tamen, terras per alienae victum. Mutantur levitate quas ubi arcum ripas oculos abest. Adest commissaque victae in gemitus nectareis ire diva dotibus ora, et findi huic invenit; fatis? Fractaque dare superinposita nimiumque simulatoremque sanguine, at voce aestibus diu! Quid veterum hausit tu nil utinam paternos ima, commentaque.