Unlock TypeScript 4.0: Essential Guide for Beginners to Boost Your Frontend Skills

Background

On August 20, TypeScript 4.0 was officially released. Although it does not bring major new features compared to 3.9, the announcement emphasizes that it is the best time for beginners to start learning TypeScript.

What is TypeScript

TypeScript is a superset of JavaScript that compiles to plain JavaScript. It adds static type annotations and performs type checking during compilation, helping catch errors early and improving code readability.

Core Benefits

Provides documentation-like type information for complex code structures.

Enables better IDE auto‑completion.

Allows early type checking, catching many errors before runtime.

Basic Types

Boolean : <span>let isDone: boolean = false</span> Number : <span>let age: number = 18</span> String : <span>let name: string = 'jiangmo'</span> Void (no return value):

<span>function alertName(): void { alert('My name is Tom'); }</span>

Null & Undefined :

<span>let u: undefined = undefined</span>
<span>let n: null = null</span>

Advanced Types

Any : disables type checking.

<span>let a: any = 123</span>
<span>a = '123'</span>
<span>a.foo && a.foo()</span>

Union Types :

<span>let x: string | number = 1</span>
<span>x = '1'</span>

Type Assertions : <span>(something as string).length</span> String Literal Types :

<span>type EventNames = 'click' | 'scroll' | 'mousemove'</span>

Tuples : fixed‑length arrays with specific types.

<span>let man: [string, number] = ['Tom', 25]</span>
<span>man.push('male') // allowed, type becomes union of element types</span>

Enums :

<span>enum Directions { Up, Down, Left, Right }</span>
<span>let d: Directions = Directions.Left</span>

Const Enums (removed at compile time):

<span>const enum Directions { Up = 'UP', Down = 'DOWN', Left = 'LEFT', Right = 'RIGHT' }</span>
<span>let d = Directions.Left // compiled to "LEFT"</span>

Generics

Generics allow functions, interfaces, and classes to be defined with type parameters that are specified when they are used, enabling reusable and type‑safe code.

<span>function genericFunc<T>(arg: T): T { return arg; }</span>
<span>let n = genericFunc<number>(1); // n is number</span>
<span>let s = genericFunc<string>('hello'); // s is string</span>

Generic interfaces and classes work similarly:

<span>interface GenericFn<T> { (arg: T): T; }</span>
<span>class GenericClass<T> { zeroValue: T; constructor(a: T) { this.zeroValue = a; } }</span>

Declaration Files

Declaration files (*.d.ts) contain only type information and no executable code. They allow JavaScript libraries to be used in TypeScript projects with full type support. For example, installing @types/jquery provides typings for the jQuery library.

When a library is written in TypeScript, its compiled JavaScript can be shipped together with a generated .d.ts file so that both JavaScript and TypeScript projects can consume it.

References

TypeScript Handbook – Basic Types

Official TypeScript Documentation