DEV Community

Matthew Bill
Matthew Bill

Posted on

2

TypeScript Regions

For those coming to TypeScript from C# you might have become used to regions as a way to organize code. These also exist within TypeScript/VSCode:

Using Regions

You can define regions of code that can be expanded/collapsed like the following:

Image description

This allows you to order functions of larger files and reduce what you have visible on screen.

Image description

Minimap

Regions appear in the minimap (although formatted strangely)

Image description

Outline

At the moment the regions don't appear in the outline, which is a shame:

Image description

There is an issue raised for this on GitHub, but it has been closed as there are no current plans to improve this:

https://github.com/microsoft/vscode/issues/51364

Folding/Unfolding

You can fold and unfold all regions through the command pallet and through shortcuts (though not the easiest to remember).

Image description

Top comments (0)

11 Tips That Make You a Better Typescript Programmer

typescript

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!