Introducción a types en TypeScript

Data types in TypeScript represent a powerful tool for structuring information efficiently. Unlike other elements of the language, types have unique characteristics that make them especially useful for robust application development. Although they do not translate directly into JavaScript, their value in the development phase is invaluable for maintaining data integrity.

What are types in TypeScript and why are they so special?

Types in TypeScript are a way of structuring data that, interestingly, have no direct equivalence in JavaScript. This means that you can use them extensively during development, but when you compile your code to JavaScript, they disappear without a trace, unless you create an object based on them.

To better understand this concept, we can create a basic file:

type PersonaType = { name: string; age: number;}
class PersonaClass { name: string; age: number;
 constructor() { this.name = ""; this.age = 0; } }}

The fundamental difference between a type and a class is that the type can only have properties, while a class can have both properties and methods and constructor. Types serve primarily to structure data in a clear and consistent way.

When compiling this code to JavaScript, you will notice something surprising: only the class is translated to the resulting file, while the type simply disappears. This shows that types are unique TypeScript tools for the development phase.

How to take advantage of mapped types to transform data structures?

Mapped types are an advanced feature that allows you to transform existing types following specific patterns. They are especially useful when you need to create variations of a base type.

Partial types

You can create a type that makes all properties of another type optional:

type Partial<T> = { { [P in keyof T]? T[P];};
type PersonaPartial = Partial<PersonaType>;// Result equivalent to:// {// name?: string;// age?: number;// }

This mapped type goes through all the properties of the original type and adds a question mark to them, indicating that they can accept null values.

Read-only types

Similarly, you can create a type that makes all properties read-only:

type ReadOnly<T> = { readonly [P in keyof T]: T[P];};
type PersonReadOnly = ReadOnly<PersonType>;// Equivalent result to:// {// readonly name: string;// readonly age: number; //// }

To use these types in code that compiles to JavaScript, you need to create objects based on them:

const person: readonlyPerson = { name: "Min", age: 30};
console.log(person.name); // This will indeed compile to JavaScript.

What other advanced types does TypeScript provide?

TypeScript provides several advanced types that significantly increase the expressiveness and safety of the code.

Template literal types

These types allow you to create variants based on literal strings:

type Variants = "small" | "medium" | "large";type ClassCSS = `button-${Variants}`;
// let buttonSmall: ClassCSS = "button-small";// let buttonMedium: ClassCSS = "button-medium";// let buttonLarge: ClassCSS = "button-large";

Template literal types are perfect for working with consistent naming conventions, such as CSS classes or element identifiers.

Conditional types

Conditional types allow you to perform evaluations and determine the resulting type based on conditions:

type EsNumero<T> = T extends number ? true : false;
function esNumero<T>(value: T): EsNumero<T> { return (typeof value === "number") as any;}
const result1 = esNumero(42); // trueconst result2 = esNumero("hello"); // false
console.log(result1);console.log(result2);

This example demonstrates how conditional types can be used to validate data before sending it to a database or service, improving the robustness of applications.

Types in TypeScript represent a fundamental tool for ensuring data integrity in your applications. Although they do not translate directly to JavaScript, they provide an additional layer of security during development that helps prevent common errors. Have you used types in your projects? Share your experience and how they have improved your workflow in the comments.