Introduction to TypeScript
Ian Felix
Posted on January 8, 2022
Introduction to TypeScript
In this article, we will learn how to use TypeScript and its basic features.
What is TypeScript?
- TypeScript is a superset of JavaScript that compiles to plain JavaScript.
- Add basically static typing to JavaScript.
Why use TypeScript?
- avoid unexpected errors and results.
- reduce the amount of bugs.
- reduce the amount of time to fix bugs.
- IDE support.
Types
Below is a list of basic types in TypeScript.
boolean true/false
string 'foo', "foo", `foo`
number int, float, hex, binary
array type[]
array Array<string | number> // union type of string and number
tuple (type[number,string])
enum key and value
enum colors {
withe = '#fff'
black = '#000'
}
any (any type)
void () does not return anything
null | undefined
never (never type) no return type
object {}
Type Inference
The own typescript infers the type when passed a simple value.
let message = 'Hello World'; // let message: string
message = 123; // error: type number is not assignable to string
const isActive = true; // const isActive: boolean
const count = 10; // const count: number
const list = [1, 2, 3]; // const list: number[]
const user = {
name: 'John',
age: 30,
}; // const user: { name: string; age: number }
user.name = 123; // error: type '123' is not assignable to type 'string'
Type Aliases and Interfaces
- Type Aliases:
Type aliases are used to create a new name for an existing type and can be reused.
type StringType = string;
type StringOrNumber = StringType | number; // union type of string and number
type StringOrNumber = {
id: number;
value?: string; // optional property
};
const value: StringType = 'foo'; // no error
const value2: StringType = 123; // error: type '123' is not assignable to type 'string'
const value3: StringType = true; // error: type 'boolean' is not assignable to type 'string'.
- Interfaces:
Similar to the type alias but it only works with objects and is more for creating more complex objects.
Use interface for public API's definition when authoring a library or 3rd party ambient type definitions, as this allows a consumer to extend them via declaration merging if some definitions are missing. - TypeScript Docs
interface Game {
id: string | number; // union type of string and number
title: string;
genre: string
discription: string;
platform?: string[]; // optional property
}
Difference between interface and type aliases
You can find more information about interfaces and type aliases in the official TypeScript documentation. - TypeScript Docs
Thank you for reading this article.
If you enjoy this article, please up vote and comment.
Follow me on Twitter
Posted on January 8, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related