Understanding typescript latest features - examples

Understanding typescript latest features - examples

Latest Typescript update

Typescript 5.3.3 arrived and was released in December 2023.

The latest typescript version was released by Microsoft. Typescript is an extended version of javascript based on the ECMA standard for type safety. There is a major structural change released with this.

In this article, We will see the major features and examples.

Features

  • Project references
  • Richer Tuple types
  • Unknown Type
  • Support for DefaultProps in JSX
  • Improved error messaging
  • API breaking changes

Project Reference changes

It is a major feature that will be helpful for larger projects.

Modularize your bigger project into a smaller project so that compilation and built time are reduced and code can be reused across multiple projects.

A project is dependent on other projects.

Each project has a typescript configuration file tsconfig.json. a project tsconfig.json file can be used by another tsconfig.json file.

A big project can be divided into smaller projects to have linearized the build and built time is improved and transparent across multiple projects

Typescript Advantages

  • Improves Build times
  • Logical separation of code based on features
  • Clean separation and code manageable

Typescript Tuple Types

A tuple is not a named type but is a fixed combination of different types.

let tupleValue: [number, string];
tupleValue = [30, "testvalue"]; // OK

Added more functionality to existing tuple types Parameters at the end are optional Parameters can be applied as rest operators.

typescript the optional tuple types

method function has two parameters, one is boolean other is tuple type. Tuple type which has b and c are optional

function method(a: boolean, b = 30, c?: string) {}

method(true);
method(true, undefined, "testvalue");
method(true, 100);

typescript Rest Operator tuple types

here function method requires zero or more numbers

function method(...a: number[]) {}
method();
method(1, 3);
method(2);

typescript Unknown type

Unlike any, unknown restricts access to variables, properties, and function calls. It introduced a new inbuilt type unknown type. We already saw the any type in typescript that accepts the any type of value. The Any type does not do any type check before assigning its value or calling it.

The unknown type also has the same as any value, Any can be assigned to it.

The difference Any value can be assigned to the unknown type. But you can not access any variables/access/call those unknown types.

typescript Any example usage

let anyType: any = 50;
// Below will compile as anyType is of type 'any'
anyType.prop;
anyType();
new anyType();
method(anyType);
anyType`test example!`;

function method(str: string) {
  return str.toLowerCase();
}

typescript unknown type example

let anyType: unknown = 50;
// Does not compile as anyType is of type 'unknown'
anyType.prop;
anyType();
new anyType();
method(anyType);
anyType`test example!`;

function method(str: string) {
  return str.toLowerCase();
}

IDE Support

Various editors provide support for the latest TypeScript release, including:

  • Visual Studio Code
  • Sublime Text 3 with TypeScript plugin
  • Visual Studio Code