Everyday types
Learn and understand the most common types in Typescript. See the differences between
Javascript types and its corresponding Typescript values.
The primitives
In everyday life we use three main Javascript primitves: string
, number
and boolean
. All of
them have corresponding type in Typescript.
-
string
represents string values:
const singleQuotes: string = 'single' // ✅
const doubleQuotes: string = "double" // ✅
const backTicks: string = `${singleQuotes} backticks` // ✅
We can also define type using specific strings - it is called string literal type:
let breakfast: 'scrambled eggs'
breakfast = 'chia pudding' // ❌
-
number
is for numbers:
let year: number = 2022
year = 1945 // ✅
year = 2137 // ✅
year = "1410" // ❌
The number
can be decimal (base 10), hexadecimal (base 16) or octal (base 8)
let hexadecimal: number = 0x37CF // 14287 ✅
let octal: number = 0o377 // 255 ✅
let binary: number = 0b111001 // 57 ✅
-
boolean
can only store one of these two values:true
orfalse
const isAdmin: boolean = true
Defining types using
String
,Number
orBoolean
is possible and totally valid but the
convention is to use lowercased names:string
,number
andboolean
.
Non-primitives
Arrays
You can specify the type of an array two ways:
const array: number[] = [1, 2, 3, 4]
const genericArray: Array<number> = [5, 6, 7, 8]
The first syntax is more frequent. The number[]
means that we expect the array of numbers, for
the array of strings we would use string[]
and so on. The second line means the same thing but
it uses the generics syntax which I'll cover in a different article.
Tuple
A tuple type is another kind of Array
type that knows exactly how many elements it contains and
exactly what types it contains at defined positions.
let settings: [string, boolean]
settings = ["lightmode", true] // ✅
settings = ["ligthmode", true, 1] // ❌
Object
The object type is the most common sort of types in Javascript along with the primitives from
the previous part. Defining an object type is done by listing object's properties and their types:
let steak: { thickness: number, doneness: string, isVegan: boolean }
steak = {
thickness: 1, // ✅
doneness: "medium-rare", // ✅
isVegan: false, // ✅
internalTemp: 165 // ❌
}
We can also store a function as one of the object properties (then we call it a method):
let user: { name: string; sayHi(): string } = {
name: "John",
sayHi() {
return this.name
}
}
Enum
This specific type isn't available in plain Javascript. Enums are data structures of defined
length that hold a set of constant values. They are useful for setting properties that can only
be a certain number of possible values
- Numeric enums. By default, the first value is initialized with
0
and the following members are auto-incremented from that point on.
enum CardDeck {
Clubs,
Diamonds,
Hearts,
Spades,
}
CardDeck.Clubs // 0,
CardDeck.Diamonds // 1,
CardDeck[2] // "Hearts"
We can also change the values and their auto-incrementing behaviour:
enum CardDeck {
Clubs, // 0
Diamonds = 5,
Hearts, // 6
Spades, // 7
}
CardDeck.Clubs // 0,
CardDeck.Diamonds // 5,
CardDeck[6] // "Hearts"
- String enums are similar to number enums but a string enum's each member has to be initialized with a string literal - they don't have auto-incrementing behaviour:
enum CardDeck {
Clubs = "♣️"️,
Diamonds = "♦️",
Hearts = "♥️",
Spades = "♠️",
}
CardDeck.Clubs // "♣️"️
CardDeck[2] // ❌
Summary
These types will surely help you get started with Typescript in your projects. There is much
more to be learned but I'll try to do my best to cover all neccesary Typescript related topics
in the next articles. Stay tuned!
Top comments (0)