Mastering TypeScript: From Basics to Expert Proficiency

Mastering TypeScript

From Basics to Expert Proficiency

Copyright © 2024 by HiTeX Press

All rights reserved. No part of this publication may be reproduced, distributed, or transmitted in any form or by any means, including photocopying, recording, or other electronic or mechanical methods, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical reviews and certain other noncommercial uses permitted by copyright law.

Contents

1 Introduction to TypeScript

1.1 What is TypeScript?

1.2 History and Evolution of TypeScript

1.3 Benefits of Using TypeScript

1.4 Key Differences Between TypeScript and JavaScript

1.5 TypeScript’s Type System

1.6 Use Cases and Real-World Examples

1.7 Installing and Running TypeScript

1.8 Your First TypeScript Program

1.9 Helpful Resources and Communities

2 Setting Up the TypeScript Environment

2.1 System Requirements

2.2 Installing Node.js and npm

2.3 Installing TypeScript Compiler

2.4 Setting Up a TypeScript Project

2.5 Understanding tsconfig.json

2.6 Integrating TypeScript with Build Tools

2.7 Setting Up an Integrated Development Environment (IDE)

2.8 Using TypeScript with Visual Studio Code

2.9 Compiling TypeScript Code

2.10 Configuring TypeScript for Different Environments

3 Basic Types and Variables

3.1 Overview of TypeScript Types

3.2 Type Annotations and Type Inference

3.3 Primitive Types: Number, String, Boolean

3.4 Special Types: null, undefined, and void

3.5 Arrays and Tuples

3.6 Enums: Numeric and String Enums

3.7 The Any Type

3.8 Union and Intersection Types

3.9 Literal Types

3.10 Type Assertions

3.11 Variable Declarations with let and const

3.12 Type Compatibility and Type Coercion

4 Functions and Modules

4.1 Basic Functions in TypeScript

4.2 Function Types and Type Annotations

4.3 Optional and Default Parameters

4.4 Rest Parameters and the Spread Operator

4.5 Function Overloads

4.6 Arrow Functions and Lexical ’this’

4.7 Function Scope and Closures

4.8 Anonymous Functions and IIFE

4.9 Modules in TypeScript: An Introduction

4.10 Importing and Exporting Modules

4.11 Re-exporting and Aggregate Modules

4.12 Dynamic Import Expressions

5 Object-Oriented Programming in TypeScript

5.1 Introduction to Object-Oriented Programming (OOP)

5.2 Classes and Objects

5.3 Inheritance and Extending Classes

5.4 Public, Private, and Protected Modifiers

5.5 Readonly Properties

5.6 Static Members

5.7 Abstract Classes and Methods

5.8 Interfaces vs. Abstract Classes

5.9 Polymorphism and Method Overriding

5.10 Getters and Setters

5.11 The ’this’ Keyword in TypeScript

5.12 Decorators and Metadata Reflection

6 Interfaces and Type Aliases

6.1 Introduction to Interfaces

6.2 Defining and Implementing Interfaces

6.3 Optional Properties in Interfaces

6.4 Read-only Properties in Interfaces

6.5 Function Types and Interfaces

6.6 Indexable Types and Interfaces

6.7 Extending and Overriding Interfaces

6.8 Intersection Types in Interfaces

6.9 Type Aliases: Basics and Syntax

6.10 Differences Between Type Aliases and Interfaces

6.11 Union and Intersection Types with Type Aliases

6.12 Using Type Aliases for Function Types

7 Generics and Advanced Types

7.1 Introduction to Generics

7.2 Generic Functions

7.3 Generic Classes

7.4 Generic Interfaces and Type Aliases

7.5 Constraints in Generics

7.6 Using Multiple Type Parameters

7.7 Advanced Type Inference

7.8 Mapped Types

7.9 Conditional Types

7.10 Utility Types

7.11 Discriminated Unions

7.12 Recursive Types

8 Error Handling and Exceptions

8.1 Introduction to Error Handling

8.2 JavaScript and TypeScript Error Handling Differences

8.3 The try-catch Statement

8.4 Error Objects and Error Types

8.5 Custom Errors

8.6 Throwing Errors

8.7 Error Propagation and Handling

8.8 Best Practices in Error Handling

8.9 Debugging TypeScript Code

8.10 Using TypeScript’s Strict Mode for Error Prevention

8.11 Working with External Libraries and Error Handling

8.12 Error Handling in Asynchronous Code

9 Asynchronous Programming

9.1 Introduction to Asynchronous Programming

9.2 Callbacks and Higher-Order Functions

9.3 Promises: Basics and Syntax

9.4 Chaining Promises

9.5 Async and Await: Simplifying Asynchronous Code

9.6 Error Handling in Asynchronous Code

9.7 Parallel and Sequential Execution

9.8 Using Async Iterators

9.9 Working with Fetch API

9.10 Consuming Third-Party Asynchronous Libraries

9.11 Concurrency Patterns

9.12 Asynchronous Programming Best Practices

10 Testing and Debugging TypeScript

10.1 Introduction to Testing TypeScript

10.2 Setting Up a Testing Environment

10.3 Unit Testing with Jest

10.4 Mocking and Spying

10.5 Integration Testing

10.6 End-to-End Testing with Cypress

10.7 Writing Testable Code

10.8 Debugging TypeScript with Visual Studio Code

10.9 Using Source Maps in Debugging

10.10 TypeScript Compiler Options for Debugging

10.11 Logging and Error Monitoring

10.12 Testing Best Practices and Strategies

Introduction

TypeScript has rapidly emerged as a powerful tool in the modern software development landscape. Developed and maintained by Microsoft, TypeScript was designed to address some of the fundamental shortcomings of JavaScript by introducing a statically typed superset of the language. With its robust type system, TypeScript enables developers to catch errors early in the development process, improve code maintainability, and enhance overall productivity.

TypeScript extends JavaScript by adding static types, which can be used to define variables, function parameters, and return types, among other elements. The typing system helps in identifying type mismatches, thereby reducing runtime errors. This feature is particularly beneficial in large-scale applications where the complexity of code can make manual error detection challenging.

Another significant advantage of TypeScript is its toolset. The TypeScript compiler (tsc) offers seamless integration with popular code editors and IDEs, including Visual Studio Code, JetBrains WebStorm, and Microsoft Visual Studio. These tools provide intelligent code completion, real-time type checking, and advanced refactoring capabilities that streamline the development process.

TypeScript also introduces modern JavaScript features and syntactic sugar that may not yet be available in all browsers. This includes features from ECMAScript 6 (ES6) and later versions, such as classes, modules, arrow functions, and template literals. TypeScript’s transpilation process ensures that code written in TypeScript is converted to plain JavaScript that can run in any environment, providing backward compatibility and performance optimization.

Moreover, TypeScript supports a range of programming paradigms, including object-oriented, functional, and reactive programming. Its flexibility allows developers to choose the best approach for their specific use case, making it suitable for a variety of applications, from small scripts to large-scale enterprise applications.

TypeScript has also gained substantial traction in the open-source community. Projects like Angular, Vue.js, and React offer first-class TypeScript support, which has contributed to its widespread adoption. The active development community continually contributes to improving type definitions for popular JavaScript libraries, enhancing TypeScript’s utility.

With TypeScript, teams can enforce coding standards and consistency across their codebase through configurable compiler options. This enforces a level of discipline in code writing, leading to clean, understandable, and maintainable code. Additionally, TypeScript’s ecosystem includes tools for testing, linting, and formatting, which further enhance code quality.

In this book, we will explore TypeScript from the ground up, beginning with setting up the development environment, understanding basic types and variables, and progressing towards advanced topics such as generics, asynchronous programming, and error handling. Each chapter is designed to provide a comprehensive understanding of the topic, complete with practical examples and real-world use cases.

We aim to equip you with the knowledge and skills necessary to harness the full potential of TypeScript in your projects. By the end of this book, you should be proficient in writing type-safe, scalable, and efficient TypeScript code that adheres to industry standards.

Chapter 1

Introduction to TypeScript

TypeScript is a statically typed superset of JavaScript that introduces strong typing and modern JavaScript features to improve code quality and developer productivity. Originating from Microsoft, it offers advantages such as early error detection, enhanced code maintainability, and seamless integration with popular development tools. Throughout this chapter, we will explore the history, key differences from JavaScript, component types of the TypeScript ecosystem, and practical use cases, culminating in writing your first TypeScript program and understanding the resources and communities available for continued learning.

1.1

What is TypeScript?

TypeScript is defined as a statically typed superset of JavaScript, developed and maintained by Microsoft. It introduces static typings, classes, and interfaces to JavaScript, thus bringing the power of modern programming languages such as Java and C# to the web development arena.

The primary distinction between JavaScript and TypeScript is its type system. While JavaScript is a dynamically typed language, TypeScript is statically typed. This means that type-checking is performed at compile-time instead of run-time, allowing developers to catch potential errors earlier in the development cycle.

TypeScript code is transpiled into standard JavaScript code via the TypeScript compiler, enabling it to run anywhere JavaScript runs. The file extension for TypeScript files is .ts, whereas JavaScript files have the extension .js. The transpilation process can be handled using the TypeScript compiler, which is typically installed via Node Package Manager (npm).

The TypeScript type system supports various types, both primitive and user-defined. Primitive types include number, string, and boolean. Additionally, TypeScript introduces type annotations, which provide a way to declare variable types explicitly. This is especially useful for maintaining large codebases by improving readability and reducing the potential for bugs.

let

isDone

:

boolean

=

false

;

let

decimal

:

number

=

6;

let

color

:

string

=

"

blue

"

;

In the example above, isDone is declared as a boolean, decimal as a number, and color as a string. These type annotations are useful documentation within the code and provide a mechanism for the TypeScript compiler to ensure variables are used consistently.

Beyond primitive types, TypeScript allows the definition of complex types through interfaces and classes. Interfaces in TypeScript enforce contracts on classes or objects, ensuring that they adhere to a particular structure. Below is an example of defining and using an interface in TypeScript:

interface

Person

{

firstName

:

string

;

lastName

:

string

;

}

function

greet

(

person

:

Person

)

{

return

‘

Hello

,

$

{

person

.

firstName

}

$

{

person

.

lastName

}‘;

}

let

user

=

{

firstName

:

"

John

"

,

lastName

:

"

Doe

"

};

console

.

log

(

greet

(

user

)

)

;

In this example, the interface Person defines the structure of a person object, ensuring that any object of type Person must have firstName and lastName properties of type string. The greet function enforces the use of this structure, providing certainty about the shape of person parameter it receives.

TypeScript also supports object-oriented programming paradigms with features such as classes, inheritance, and access modifiers. Classes in TypeScript can have properties and methods, and they can extend other classes to inherit their behaviors. Below is an example demonstrating the use of a simple class:

class

Student

{

fullName

:

string

;

constructor

(

public

firstName

:

string

,

public

middleInitial

:

string

,

public

lastName

:

string

)

{

this

.

fullName

=

‘

$

{

firstName

}

$

{

middleInitial

}

$

{

lastName

}‘;

}

}

let

student

=

new

Student

(

"

Jane

"

,

"

M

.

"

,

"

Doe

"

)

;

console

.

log

(

greet

(

student

)

)

;

In the example above, a Student class is defined with a constructor that initializes the object’s firstName, middleInitial, and lastName properties. The Student class can be instantiated, and its fullName property is initialized upon creation.

TypeScript’s powerful tooling integration allows for superior development experiences. Enhanced code navigation, refactoring, and autocompletion are realized through editors such as Visual Studio Code, which natively supports TypeScript. Furthermore, TypeScript’s rich type inference mechanism reduces the amount of required type annotations, thus simplifying code while maintaining its robustness.

Overall, TypeScript aims to provide a more robust development experience by overlaying a strong type system onto JavaScript, resulting in improved early error detection, code maintainability, and seamless tool integration.

1.2

History and Evolution of TypeScript

Microsoft released TypeScript publicly on October 1, 2012, introducing it as a free and open-source programming language developed to address shortcomings in JavaScript, particularly for large-scale application development. Developed under the leadership of Anders Hejlsberg, a prominent software engineer known for his work on Turbo Pascal, Delphi, and C#. TypeScript was designed to enhance the tooling and development experience with JavaScript, effectively by bringing static typing capabilities, advanced IDE features, and early error detection.

The need for TypeScript stemmed from the growing complexity of web applications. While JavaScript is a powerful and flexible language, it lacked the robust type system found in traditional programming languages such as Java or C#. The absence of static type checking in JavaScript meant that developers often had to deal with runtime errors that could be detected and corrected at compile time in statically typed languages. TypeScript emerged to provide a statically-typed layer atop JavaScript, enabling the development of more robust, maintainable, and scalable applications.

Initial Release and Features

Upon its initial release, TypeScript encompassed basic, yet significant, extensions to JavaScript, including:

Static Typing: Allowing developers to specify types for variables, function parameters, and return values.

Classes and Interfaces: Bringing object-oriented programming constructs that align with ES6 standards.

Type Inference: Automatically deducing types to lessen the verbosity for the developer while still benefiting from type safety.

ES6 Support: Compatibility with ECMAScript standards, enabling forward compatibility and the use of modern JavaScript features.

These features aligned with the vision of improving developer productivity by providing better tooling support, such as enhanced code navigation, refactoring, and auto-completion features in Integrated Development Environments (IDEs).

Evolution and Milestones

TypeScript’s progression has been marked by a series of major releases, each incorporating advancements driven by both user feedback and ECMAScript standard evolution. Here are key milestones in its development:

TypeScript 1.0 (April 2014): The first stable version, TypeScript 1.0 solidified its initial features and garnered a growing developer community.

TypeScript 1.5 (July 2015): Introduced support for ES6 modules, decorators, and better tooling integration.

TypeScript 2.0 (September 2016): Marked a leap forward with the introduction of non-nullable types, control flow analysis, and improved module resolution. Key additions included:

null and undefined types: Types that provide additional compile-time safety checks.

Read-only property support: Enabling better immutability patterns.

Declaration file acquisition: Simplifying the use of JavaScript libraries without TypeScript typings.

TypeScript 2.1 (December 2016): Implemented async functions and object spread/rest syntax, mirroring JavaScript advancements.

TypeScript 2.4 (June 2017): Introduced dynamic import expressions for lazy module loading, an essential factor in optimizing large applications.

TypeScript 3.0 (July 2018): This milestone included:

Project references: Allowing large codebases to scale more efficiently.

Unknown and never types: Enhancing type safety and control flows.

Richer tuple types: Providing variadic tuple elements and improved destructuring.

TypeScript 3.7 (November 2019): Highlighted by features such as optional chaining and nullish coalescing, borrowing from the latest ECMAScript proposals.

TypeScript 4.0 (August 2020): Continued to refine the language with variadic tuple types, labeled tuple elements, and new tooling support.

TypeScript 4.5 (November 2021): Added support for ECMAScript module support in Node.js, template literal types, and improved performance.

Community and Ecosystem

Beyond the language itself, TypeScript has fostered a vibrant community and ecosystem. The DefinitelyTyped repository, a crowdsourced collection of type definitions for JavaScript libraries, vastly improves TypeScript’s utility by providing typings for thousands of JavaScript packages.

Integration with popular frameworks and libraries has also been a crucial aspect of TypeScript’s rise. Angular adopted TypeScript as its primary language, which significantly boosted TypeScript’s visibility and credibility. In addition, frameworks like React and Vue provide extensive support for TypeScript, further solidifying its importance in modern web development.

TypeScript’s evolution continues to be aligned with the advancements in the JavaScript ecosystem. The open-source model and the collaboration with the developer community ensure that it remains poised to address current and future challenges in software development. Through each iteration, TypeScript refines its capabilities, maintaining a balance between rigorous type systems and JavaScript’s dynamic nature, making it an indispensable tool for developers across the globe.

1.3

Benefits of Using TypeScript

TypeScript offers multiple advantages that contribute to improved code quality, developer productivity, and efficient project management. As a statically typed superset of JavaScript, it incorporates strong typing, robust tooling support, and modern JavaScript features. These attributes enable developers to detect errors early, maintain large codebases more effectively, and integrate seamlessly with existing JavaScript projects.

1. Early Error Detection

One significant benefit of TypeScript is its ability to identify errors during development rather than at runtime. By introducing static typing, TypeScript helps catch type-related errors early in the development process. Developers can define explicit types for variables, function parameters, and return types, which dramatically reduces the probability of encountering type-related bugs.

//

TypeScript

Code

Example

function

addNumbers

(

a

:

number

,

b

:

number

)

:

number

{

return

a

+

b

;

}

addNumbers

(5,

’

10

’

)

;

//

Error

:

Argument

of

type

’

string

’

is

not

assignable

to

parameter

of

type

’

number

’

.

In the above example, TypeScript immediately flags the incorrect argument type (a string instead of a number), preventing the execution of potentially erroneous code. This timely feedback minimizes debugging efforts and enhances code reliability.

2. Improved Code Maintainability

TypeScript’s strong typing system aids in long-term code maintainability, especially in large codebases with extensive developer collaboration. By defining and enforcing data types, function signatures, and class structures, TypeScript makes it easier to understand the code’s intent and structure. This self-documenting nature simplifies code reviews, refactoring, and onboarding new developers.

Interfaces - Enforce consistent API structures across modules and components.

Type Aliases - Define complex types in a readable manner.

Enums - Cater to clearly defined sets of named constants.

//

TypeScript

Code

Example

interface

User

{

name

:

string

;

age

:

number

;

role

:

UserRole

;

}

enum

UserRole

{

Admin

,

Editor

,

Viewer

}

const

newUser

:

User

=

{

name

:

"

Alice

"

,

age

:

30,

role

:

UserRole

.

Admin

};

The clear definition of user properties and roles in the above example ensures consistent data handling and reduces ambiguity.

3. Enhanced Tooling and IDE Support

The rich tooling ecosystem of TypeScript significantly enhances the developer experience. With features such as IntelliSense, code navigation, and automated refactoring, TypeScript-aware Integrated Development Environments (IDEs) increase productivity and minimize the chance of introducing errors.

IntelliSense - Offers smart code completion, parameter info, quick info, and member lists.

Code Navigation - Facilitate quick jumps to definitions, references, and implementations.

Refactorings - Enable safe and automated code modifications.

Most popular IDEs, such as Visual Studio Code, WebStorm, and Sublime Text, provide first-class TypeScript support, making it easier for developers to manage complex projects effectively.

4. Modern JavaScript Features

TypeScript incorporates features from the latest ECMAScript standards, ensuring that developers can utilize modern JavaScript capabilities regardless of the runtime environment’s support. TypeScript transpiles these features to compatible JavaScript versions, enhancing backward compatibility and future-proofing development efforts.

//

TypeScript

Code

Example

class

Employee

{

private

name

:

string

;

constructor

(

name

:

string

)

{

this

.

name

=

name

;

}

getName

()

:

string

{

return

this

.

name

;

}

}

const

emp

=

new

Employee

(

"

John

Doe

"

)

;

console

.

log

(

emp

.

getName

()

)

;

//

Output

:

John

Doe

In the above example, TypeScript seamlessly integrates modern JavaScript features such as classes, access modifiers, and template literals.

5. Seamless Integration with JavaScript

TypeScript’s design aims to be highly compatible with existing JavaScript codebases. Developers can gradually adopt TypeScript and incrementally apply typing to their projects. TypeScript files can coexist with JavaScript files, facilitating a smooth transition without necessitating complete rewrites.

//

JavaScript

Code

function

multiply

(

a

,

b

)

{

return

a

*

b

;

}

//

TypeScript

Code

import

{

multiply

}

from

’

./

multiply

’

;

const

result

:

number

=

multiply

(5,

10)

;

console

.

log

(

result

)

;

//

Output

:

50

This interoperability ensures that existing JavaScript libraries and frameworks can continue to be used alongside TypeScript code, optimizing development workflows and leveraging past investments.

6. Robust Community and Ecosystem

TypeScript’s growing popularity has cultivated a robust ecosystem, with extensive libraries, frameworks, and tooling support. The proactive community and comprehensive documentation provide valuable resources for learning, troubleshooting, and staying updated with best practices.

DefinitelyTyped - Offers type definitions for popular JavaScript libraries.

TsLint/ESLint - Facilitate code linting and style consistency.

Testing Frameworks - Supported by Jest, Mocha, and other testing tools.

This thriving ecosystem elevates the overall developer experience, enriching the toolkit available for building scalable and maintainable applications.

By leveraging these benefits, developers can achieve higher code quality, better maintainability, and enhanced productivity. TypeScript’s compatibility with modern JavaScript features, extensive tooling support, and strong community presence make it a valuable asset for contemporary software development.

1.4

Key Differences Between TypeScript and JavaScript

TypeScript (TS) is a statically typed superset of JavaScript (JS) that compiles to plain JavaScript. Understanding the key differences between TypeScript and JavaScript is crucial for leveraging the advantages TypeScript offers. This section delineates the primary distinctions in type system, compilation, tool support, and language features.

1. Type Annotations

TypeScript introduces type annotations to enable static type checking. In JavaScript, types are determined at runtime, making it difficult to catch type-related errors during development. TypeScript’s type annotations allow developers to specify types explicitly.

let

message

:

string

=

"

Hello

,

TypeScript

"

;

let

count

:

number

=

42;

let

isValid

:

boolean

=

true

;

In JavaScript, the same variables would be declared without any type information:

let

message

=

"

Hello

,

JavaScript

"

;

let

count

=

42;

let

isValid

=

true

;

2. Compilation

TypeScript code is compiled, or transpiled, to JavaScript. This step identifies type errors before the code is run, improving reliability and reducing debugging time. The TypeScript compiler (tsc) performs this transpilation.

tsc

app

.

ts

The above command compiles the app.ts file into a JavaScript file, app.js. JavaScript does not have a build step like this unless specifically set up with tools like Babel.

3. Interfaces and Type Aliases

TypeScript introduces interfaces and type aliases that allow more advanced type definitions. Interfaces define the structure of an object, ensuring it adheres to a particular format.

interface

Person

{

name

:

string

;

age

:

number

;

}

function

greet

(

person

:

Person

)

{

return

‘

Hello

,

$

{

person

.

name

}‘;

}

JavaScript does not support interfaces directly. Instead, developers validate object structures manually or use libraries for this purpose.

4. Enums

TypeScript supports enumerated types (enum), which are not natively available in JavaScript. Enums allow a variable to be one of a set of predefined constants.

enum

Direction

{

Up

,

Down

,

Left

,

Right

}

let

move

:

Direction

=

Direction

.

Up

;

In JavaScript, enums must be simulated using objects.

const

Direction

=

{

Up

:

0,

Down

:

1,

Left

:

2,

Right

:

3

};

let

move

=

Direction

.

Up

;

5. Generics

TypeScript supports generics, which provide a way to create reusable components. Generics allow functions, classes, and interfaces to operate with specific types without losing type information.

function

identity

<

T

>(

arg

:

T

)

:

T

{

return

arg

;

}

let

output

=

identity

<

string

>(

"

Generic

String

"

)

;

JavaScript does not natively support generics, so developers often rely on untyped workarounds.

function

identity

(

arg

)

{

return

arg

;

}

let

output

=

identity

(

"

Generic

String

"

)

;

6. Advanced Type Features

TypeScript includes features like union and intersection types, allowing for more precise type definitions.

type

ID

=

number

|

string

;

function

display

(

id

:

ID

)

{

console

.

log

(‘

ID

:

$

{

id

}‘)

;

}

JavaScript does not have built-in support for such advanced types.

7. Null and Undefined Handling

TypeScript enforces stricter null and undefined handling compared to JavaScript. By enabling the –strictNullChecks compiler option, TypeScript ensures null or undefined values are not assignable to other types.

let

name

:

string

=

null

;

//

Error

with

--

strictNullChecks

JavaScript allows null and undefined values implicitly unless explicitly checked.

let

name

=

null

;

//

No

error

8. Modules

Both TypeScript and JavaScript support modules, but TypeScript builds on top of JavaScript’s module system by allowing type-safe imports and exports.

//

file

:

module

.

ts

export

const

pi

=

3.14;

//

file

:

app

.

ts

import

{

pi

}

from

"

./

module

"

;

console

.

log

(

pi

)

;

JavaScript uses similar syntax for modules, but lacks type safety.

//

file

:

module

.

js

export

const

pi

=

3.14;

//

file

:

app

.

js

import

{

pi

}

from

"

./

module

.

js

"

;

console

.

log

(

pi

)

;

9. Tooling and Editor Support

TypeScript’s integration with modern editors like Visual Studio Code provides enhanced features such as autocompletion, refactoring tools, and in-line type-checking. While JavaScript has some of these capabilities through additional extensions and tools, the advancements in TypeScript stem from its richer type information enabling more intelligent tooling.

These distinctions underline the enhancements TypeScript brings to JavaScript, particularly in terms of type safety and developer tooling. Understanding these differences aids developers in choosing the right language for their projects and fully leveraging the benefits TypeScript offers.

1.5

TypeScript’s Type System

TypeScript’s type system is one of the fundamental aspects that distinguish it from JavaScript. The type system introduces static typing to the otherwise dynamically typed JavaScript language, allowing for early detection of errors, improved code navigation, and better IDE support. In TypeScript, you can define types for variables, function parameters, return values, and object properties, leading to more robust and maintainable code.

Basic Types

TypeScript provides several basic types which include boolean, number, string, array, tuple, enum, any, void, null, undefined, and never. These types serve as the building blocks for more complex type definitions.

//

Boolean

let

isDone

:

boolean

=

false

;

//

Number

let

decimal

:

number

=

6;

let

hex

:

number

=

0

xf00d

;

let

binary

:

number

=

0

b1010

;

let

octal

:

number

=

0

o744

;

//

String

let

color

:

string

=

"

blue

"

;

color

=

’

red

’

;

//

Array

let

list

:

number

[]

=

[1,

2,

3];

let

anotherList

:

Array

<

number

>

=

[1,

2,

3];

//

Tuple

let

x

:

[

string

,

number

];

x

=

[

"

hello

"

,

10];

//

OK

x

=

[10,

"

hello

"

];

//

Error

//

Enum

enum

Color

{

Red

,

Green

,

Blue

}

let

c

:

Color

=

Color

.

Green

;

//

Any

let

notSure

:

any

=

4;

notSure

=

"

maybe

a

string

instead

"

;

notSure

=

false

;

//

OK

,

definitely

a

boolean

//

Void

function

warnUser

()

:

void

{

console

.

log

(

"

This

is

my

warning

message

"

)

;

}

//

Null

and

Undefined

let

u

:

undefined

=

undefined

;

let

n

:

null

=

null

;

//

Never

function

error

(

message

:

string

)

:

never

{

throw

new

Error

(

message

)

;

}

//

Object

declare

function

create

(

o

:

object

|

null

)

:

void

;

create

({

prop

:

0

})

;

//

OK

create

(

null

)

;

//

OK

Type Inference and Type Annotations

TypeScript’s type inference capability allows the compiler to infer types when they are not explicitly defined. This feature can make code shorter and more readable while still maintaining type safety.

let

count

=

10;

//

inferred

type

is

number

//

Function

with

inferred

return

type

function

add

(

a

:

number

,

b

:

number

)

{

return

a

+

b

;

}

However, TypeScript also allows for explicit type annotations to ensure that variables and function signatures adhere to specified types.

let

message

:

string

=

"

Hello

,

TypeScript

!

"

;

function

greet

(

name

:

string

)

:

string

{

return

"

Hello

,

"

+

name

;

}

Type Aliases and Interfaces

Type aliases and interfaces in TypeScript are powerful ways to define custom types that can be reused throughout an application. Type aliases allow developers to create new names for existing types, while interfaces define the structure of an object.

type

StringOrNumber

=

string

|

number

;

let

sample

:

StringOrNumber

=

"

hello

"

;

sample

=

42;

//

OK

interface

Person

{

firstName

:

string

;

lastName

:

string

;

age

?:

number

;

//

optional

property

}

function

welcome

(

person

:

Person

)

{

console

.

log

(

"

Hello

,

"

+

person

.

firstName

)

;

}

let

user

=

{

firstName

:

"

John

"

,

lastName

:

"

Doe

"

};

welcome

(

user

)

;

//

OK

Generics

Generics enable