What is Typecript? Why use it and how? | By Roberto Micheletti | April 2025

Hi everyone 👋, today I mean what is typed, why use it and how? (Since I discovered it, I have continued to use it in any project 🧐)

Prerequisite

• JavaScript knowledge
• JavaScript Runtime like Node.js, Bun or Deno
• Your favorite text editor (Visual Studio code) or IDE (Intellij Ultimate)

What is TypeScript

Typescript is a programming language that extends Javascript’s features, adding an optional static typing, allowing developers to create a cleaner and maintainable code. When the code is compiled, it will be transformed into JavaScript, to maintain compatibility with browsers and environments such as the node. 🎉

In a few words, facilitate our work 😁

For what

You may be wondering why we should use Typescript, well, there are many reasons.

• Catching errors related to the type during compilation rather than at the time of execution is really a big change
• Development is easier because you know which variables, functions or objects refer or need, throwing less time looking for what everything contains or can receive. Knowing if a variable can be zero is something wonderful ✨
• Improves the quality of the code, add an IDE support (our life becomes easier)
• Simplify the refactor code while maintaining the flexibility of JavaScript (this is a very important point, because in the event of modifications, if you only use JavaScript, this can be embarrassing 😖)

How should manage in existing projects 🤔

In some projects that have already started, it is impossible or too complicated to change all the code of JS to TS, but it is not necessary, because TS ends up becoming JS. Consequently, it can be added to existing projects, but gradually, in new developments, functionalities or updates of certain parts, so that it does not have a serious impact on the team or the budget.

I know, I know, the theory is boring 😖, but it is necessary, and I will try to make it as simple as possible! 😁

Primitive types

These are the same as all programming languages.

• number / / chain / / Boolean
• null / / indefinite → Absence of value
• symbol → Unique identifiers
• big → This available after ES2020

Special types

• any → This type deactivates the type verification (it is preferable to avoid when possible)
• unknown → is an alternative to its safety to “any‘, It’s good when you don’t know what you are going to receive (an example is with a library that does not support TS)
• empty → For functions without return value
• Never → It’s special, you can put a function back of a function, and it indicates that an error will launch or that something cannot happen

Complex types

• Paintings → It can be defined in two ways, ‘number[]‘ Or ‘Arroy ‘
• Tules → These are fixed -type paintings, like ‘[string, number]“The first element will always be a chain and the second issue, there are no more elements.
• Objects → This can be defined by the work ‘interface‘ Or ‘type‘, but according to the documentation of TypeScript, the best approach is to use’interface‘

Advanced types

These are very powerful types, which can be easier to develop us

• Union → This is used when you know that a variable can have two or more different types, you must separate using ‘|’.
  An example is’String | number‘
• Guys → It is a way to create a new definition based on others, it can be used to create objects, but it’s more powerful!
• Intersection → is a way to say that the variable is the combination of two or more objects at the same time, you separate the different types of ‘&’, an example is’Administer & User‘
• Generics → It is a very powerful way to do a dynamically function or object, an example of this is the table, using the ‘<>‘ you can define the type that will be stored, it is the same with functions and objects

It’s a lot, isn’t it? 😖 We will see an example of all this, don’t be afraid.

Characters

There is a character from JavaScript that we can use, they will help us define certain behaviors.

• ? → is used to define that a variable can be zero or not defined, and is used to access the properties inside an object and do not launch an error if you access a zero variable
• ?? → is used when a variable or a result is zero, attribute a default value
• ! → is used to indicate that the variable is not zero (be careful with it, because if the variable is zero, I launch an exception)

Well, we will start with the base, how can we attribute a type to a variable? It can be explicit as this example

let count: number = 0
let title: string = 'Hello World'
let show: boolean = true
let image = 'some image' as string
let users: User[] = []
let user: User = {} // Inside data of the user definition

As you can see, it is very easy to assign a type to a variable, you only have to use the ‘:’ after the name of the variable. But is not always necessary, to Primitive types It can be ignored or when you receive another variable or function, TS will automatically include the type. See the image below.

But what happens if my variable can be zero, not defined or more of one type? Well, we will use the union operator or the operator to define the null or undefined.

let count: number | null = 0 // This can number or null
let title: ?string // This is equal to string | null
let image: string | undefined
let show: boolean | number | string = true

It is easy to mix different types. ✨

Objects

⚠️ This is my opinion, but I recommend creating a folder called types in your project, in this folder, you will organize all types, interfaces and other definitions of Typecript as you wish, I also recommend creating a file by definition or concept, without putting everything in a single file.

Now we must know how to define the structure of an object, using the ‘interface‘keyword.

// You need to export your's interface to be used outside the current file, 
// with only export you can export many interfaces from the same file
export interface Role {
id: number // Every line is a variable
name: string
}
// There can be exist only one 'export default' 
export default interface User {
id: number
name: string
lastname: string
age?: number // This can be a number or undefined, is because of the '?'
phoneNumber: string | null
roles: Role[] // We can use other objects 
some: { // Or we can define a local object
}
}

It’s easy, right? Now we have to dig a little more with more things that can help us

// Creating a base interface to define person
export interface Person {
name: string
lastname: string
age: number
}
// Creating a User and extending from Person, to have the father variables
export default interface User extends Person {
id: number
phoneNumber: string | null
roles: Role[]
extra: Role | null
}
// Same as user
export interface Admin extends Person {
// Data only available for admins
}

This adds the possibility of creating smaller interfaces, an interface can extend the multiple other interfaces, which makes it practical. But what can do with this other that makes it cleaner? Well, you can receive in a function the object PersonWhether it is a user or an administrator. See this example.

// The keyword type is needed to differ between a TS import and normal imports
// You need to use {} when the you import a normal export
import type {Person} from "./types/person"
// You define the return type using ':' after the ')'
const getSomeData = (person: Person): string => {
return person.name // We return a data that both have from parent
}

If you wish, you can also limit the user or administrator only, you can also deduct the type and access to variables from one type or another, like this.

import type User from "./types/person" // This kind of import is for export defaul
import type {Admin} from "./types/person"
const getSomeData = (person: User | Admin): string | number => {
if ('id' in person) { // Id is available only in user
// Here TS infer that we're accessing to a User object
// The IDE will help us showing all the data of User
return person.age
}
// Here TS infer that the object is an Admin
return person.name
}

As you can see, it is very easy to understand, but there is still one thing, how do we access the by-owners when a property can be zero? Well, is not difficult, you just need to use the ‘?’ character.

let user: User = {} // Initialize user
user.extra?.id // With this, it will return the id or null
user.extra?.id ?? 0 // you can use double '??' to return a default value if is null

See 😶‍🌫️, is very easy to understand and if you forget that a property may be zero, don’t worry, typescript will tell you 😁

I know we haven’t seen everything, but I think it’s tiring to read a lot, I’m going to release the next game to talk about the things we missed in the coming days, so follow me and leave it if you liked it ✨!

Follow me on LinkedIn! 🎉

Before leaving: