Code Away!

Whats new with Typescript 5.1

Easier Implicit Returns for undefined

Returning Functions: TypeScript now allows you to implicitly return undefined from functions that do not return anything. This can make your code more concise and easier to read.

function foo() {
// No need to provide a return type ,, this will compile now !
}

• This code would not work in TypeScript 4.3. The types of getters and setters must be the same. This would cause a type error in TypeScript 4.3.
• In TypeScript 5.1, the types of getters and setters can be different. This is because TypeScript 5.1 introduced a new feature called “unrelated types for getters and setters.”
• The following code is an example of how to use the unrelated types for getters and setters feature:

class Person {
  private _id: string;

  get id() {
    return this._id;
  }

  set id(value: number) {
    this._id = value.toString();
  }
}

Decoupled Type-Checking Between JSX Elements and JSX Tag Types

TypeScript now decouples type-checking between JSX elements and JSX tag types. This can improve the performance of type-checking for large JSX files.

• In TypeScript 4.x, type checking for JSX elements and JSX tag types was coupled together. This meant that the type of a JSX element was dependent on the type of its tag type. For example, the following code would not compile in TypeScript 4.x:

const div = <div x={1}>This is a div</div>;

This is because the type of the div element is JSX.Element, but the type of the x attribute is number. The type checker would not be able to infer the type of the div element because it would not know the type of the x attribute.

This is because the type checker is now able to infer the type of the div element based on the value of the x attribute. The type of the div element is now {x: number}.

This change can improve the performance of type checking for large JSX files. It can also make it easier to write code that uses JSX.

In TypeScript 5.1, type checking for JSX elements and JSX tag types has been decoupled. This means that the type of a JSX element is no longer dependent on the type of its tag type. For example, the following code would compile in TypeScript 5.1.

Namespaced JSX Attributes

TypeScript now allows you to namespace JSX attributes. This can help to improve the readability of your code and avoid naming conflicts.

In this example, we could use the a:stock attribute to render a stock ticker symbol and its current price for a financial website that displays the latest stock prices.Lets define a namespaced JSX attribute called a:stock. This attribute has two properties: symbol and price. The symbol property is of type string, and the price property is of type number.

// In some library's code or in an augmentation of that library:
namespace JSX {
  interface IntrinsicElements {
    ["a:stock"]: {
      symbol: string;
      price: number;
    };
  }
}

// In our code:
let x = <a:stock symbol="GOOGL" price="1000" />;

TypeRoots Are Consulted In Module Resolution

TypeScript now consults typeRoots when resolving modules. This can improve the accuracy of type inference and help to prevent errors.

In TypeScript 5.1, the typeRoots option can be used in workspaces. This can be useful when working on a project that uses multiple libraries, each of which has its own type definition file.

For example, the following configuration tells TypeScript to look for type definition files in the node_modules/@types directory of each of the libraries in the workspace:

{
  "compilerOptions": {
    "typeRoots": ["node_modules/@types"]
  }
}

The mapped modifier with the typeRoots option can be used specify a mapping from namespaces to directories. In the example below — teh config is pointing TypeScript to look for type definition files for the React library in the node_modules/@types/react directory.

{
  "compilerOptions": {
    "typeRoots": {
      "mapped": {
        "react": "./node_modules/@types/react"
      }
    }
  }
}

TypeScript 5.1 has improved performance when resolving type definition files from typeRoots directories. This can make it faster to compile code, especially when using a large number of libraries.

Linked Cursors for JSX Tags

TypeScript will now support linked editing cursors for JSX tags. This allows an editor to edit multiple locations at the same time automatically.

If we want to edit a tag, we can use linked cursors by positioning the cursors where we want to edit the tag. Once we have positioned the cursors, we can use the LinkedEdit command to edit the text. To do this, we will press Ctrl+Alt+L.

When we press Ctrl+Alt+L, TypeScript will automatically create a linked edit for each cursor. This means that when we edit one cursor, the other cursor will be updated to match the changes.

The feature is available with Visual Studio Code . You may have to check IDE compatibility for support.

Snippet Completions for @param JSDoc Tags

TypeScript now provides snippet completions for @param JSDoc tags.

In this example, a function called printValue takes a parameter called value. The @param JSDoc tag tells the TypeScript compiler that the value parameter is a number.

/**
 * This function prints the value of a parameter.
 *
 * @param {number} value The value to print.
 */
function printValue(value) {
  console.log(value);
}

Of course the best source for what has changed is the official documentation at https://devblogs.microsoft.com/typescript/announcing-typescript-5-1-beta/#linked-cursors-for-jsx-tags

Hope this helps !