Para los que no tengan esta configuraci贸n
"**/*.ts", "**/*.tsx"
Introducci贸n
El presente del Frontend es TypeScript
Tipado impl铆cito vs. tipado expl铆cito
Creando una app con React y TypeScript
Tipado en React
Diferentes formas de definir un componente
El objeto props y children
State con tipos primitivos
State con tipos personalizados
React y el DOM
Tipos para eventos y callbacks de escuchadores
Tipos para referencias y observadores
Lazy loading con observadores
Componentes que extienden elementos DOM
Reto: sigamos extendiendo el DOM
Configuraciones avanzadas
Creando tipos propios para la aplicaci贸n
Trabajando con librer铆as no-tipadas
Trabajando con librer铆as que extienden el objeto window
Pr贸ximos pasos
驴Quieres m谩s cursos de React con TypeScript?
You don't have access to this class
Keep learning! Join and start boosting your career
TypeScript has proven to be a powerful tool for developers, allowing the definition of types that improve code quality and aid in error prevention. An essential aspect of TypeScript is the option to define global types that can be used in all files in an application, known as global types. Although they are extremely useful, it is important to handle them with care and to understand when and how to implement them properly.
Global types in TypeScript allow certain type definitions to be accessible from any file in the application. They are usually defined in files with a .d.ts
extension, known as declaration files. These files describe the general types of an application and their correct implementation is essential to maintain consistency and avoid problems in the code.
To create a global type in TypeScript, you need to follow a series of steps:
Declaration file: Global types must be defined inside a file with extension .d.ts.
For example, app.d.ts
is a common name used to store global types.
Type definition: Any type definition that should be global should be moved from its local ubiquity to this declaration file. For example, if you have an ImageItem
type that consists of an ID
and a URL
, you can move it from the local component to the app.d.ts
file.
Type naming: It is recommended to follow a naming convention where global types start with a capital letter I
or T
to indicate that it is a global type. For example: IImageItem
.
Project configuration: It is vital to ensure that the tsconfig.json
file is configured to include all .ts
files, ensuring that TypeScript processes the global types file correctly.
Implementing global types should be done with caution. Here are some tips:
Global relevance: define a type as global only if it is truly relevant to the entire application. Avoid falling into the trap of making all types global, as this can cause confusion and disorganization in the project.
Keep local first: Start by defining types locally within specific components. Evaluate making them global only when they need to be used in multiple files in the application. Also, it is good practice to consult with the team before making this decision.
Good documentation: Make sure that each global type is well documented to facilitate its understanding and correct use by other team members.
Here is an example of how to properly organize a global type in an app.d.ts
file:
// app.d.ts
interface IImageItem { id: string; url: string;}
This IImageItem
type is now available for use anywhere in the application, improving consistency and reducing the possibility of type-related errors.
Global types are powerful and, if used correctly, can significantly improve the efficiency of TypeScript development. However, they should be used with discernment and always with an eye toward maintaining project structure and organization. Be sure to follow established conventions and maintain open communication with your team to maximize the benefits that global types offer. Continue to explore and learn about the capabilities of TypeScript and how it can enhance your projects.
Contributions 4
Questions 0
Para los que no tengan esta configuraci贸n
"**/*.ts", "**/*.tsx"
Tipos Globals:
Es bueno pero tambi茅n malo tener tipos globables. Analiza bien tu necesidad de negocio para saber qu茅 s铆 deber铆a ser global. No abuses de los tipos globales.
Muy buena informaci贸n para optimizar nuestros proyectos y no abusar de los Tipados propios global
Want to see more contributions, questions and answers from the community?