Unlock TypeScript 3.7+ Power: Must‑Know New Features for Safer, Cleaner Code

1. New Supported Features

TypeScript is a superset of JavaScript types, not syntax, so some valid JavaScript may still error in TypeScript. It is primarily used as a powerful static analysis tool rather than a code transpiler.

<code>let x = 1
x = 'hello world'</code>

Recent versions have added support for new JavaScript syntax, allowing developers to bypass Babel in some cases.

1.1 Optional Chaining & Nullish Coalescing

Supported since TypeScript 3.7, these stage‑4 features simplify handling of nullable values.

1.2 Private Fields & Namespace Exports

Since 3.8, TypeScript supports the stage‑3 private fields syntax, enabling true private class properties via WeakMap, and also adds namespace export syntax.

<code>class Foo {
  #bar
}</code>

<code>export * as utils from './utils'</code>

1.3 Inference of Class Field Types

From version 4.0, TypeScript can automatically infer the types of class properties without explicit declarations.

2. New Tuple Types

TypeScript 4.0 introduces two new tuple declaration styles:

Variadic tuple types

Labeled tuple types

2.1 Variadic Tuple Types

<code>type Foo<T extends any[]> = [boolean, ...T, boolean]</code>

This enables more precise function parameter typing, especially useful in functional programming.

2.2 Labeled Tuple Types

<code>const Address = [string, number]

function setAddress(...args: Address) {
  // some code here
}</code>

To retain parameter meaning, labeled tuples allow naming each element:

<code>const Address = [streetName: string, streetNumber: number]

function setAddress(...args: Address) {
  // some code here
}</code>

This improves code readability and maintainability.

3. Recursive Types

Since TypeScript 3.7, a single type declaration can represent JSON structures:

<code>type JSONValue =
  | string
  | number
  | boolean
  | null
  | JSONValue[]
  | { [key: string]: JSONValue }</code>

4. Error and Assertion Handling

4.1 // @ts-expect-error vs // @ts-ignore

TypeScript 3.9 introduces

// @ts-expect-error

as a clearer alternative to

// @ts-ignore

, explicitly documenting expected errors and providing forward‑compatible warnings.

4.2 The unknown Type

Unlike

any

,

unknown

forces developers to narrow types before use, offering safer handling of uncertain values.

<code>try {
  willThrowAnError()
} catch (err) {
  console.log(typeof err.message)
}</code>

Depending on how

willThrowAnError

is implemented,

err.message

may be a string,

undefined

, or cause another error, illustrating why the catch parameter defaults to

any

. The

unknown

type provides a safer default.

子曰：知之为知之，不知为不知。

4.3 Assertion Functions

Since TypeScript 3.7, functions can assert types based on

return

or

throw

statements.

<code>function assertIsArray(val: any): asserts val is any[] {
  if (!Array.isArray(val)) throw new Error(`${val} is not an array`)
}</code>

5. Modules

5.1 Type‑Only Imports

Starting with 3.8, you can import only types, preventing side‑effects from executing when a module is imported.

<code>import type { SomeThing } from "./some-module.js"

export type { SomeThing }</code>

6. Conclusion

The article quickly surveys practical TypeScript features introduced since version 3.7, helping you write more robust and elegant code. TypeScript 4.3 is scheduled for release on May 25, 2021, promising additional exciting enhancements.