4/20/2024 0 Comments Ag grid typings![]() ![]() ![]() We are trying to prevent the use of the ColDef interface with no type parameters from leading to a breakdown in inference of the TData generic type. This next section covers the specific changes made to the AG Grid component to improve its generic type support. You can use this approach to experiment with your generic types to find those that give the best developer experience based on common use cases. This means you could validate inference for a component in an easily shareable environment like TS Playground. This gives us a useful mechanism for experimenting with different generic setups without the need to run the Angular compiler over our component in a template. It is defined in the following way with many properties omitted for brevity. This component is generic with respect to row data. To give a concrete example of the breakdown in inference we can look at the ag-grid-angular component from AG Grid. We will do this by tweaking how we define our component's generic types. In these situations we need to start applying new techniques to help improve the developer experience with generics in Angular. In our example above this means the error about providing IPerson to the selection event would just disappear. At this point you will stop getting template type errors because any matches any type. When Typescript cannot narrow the type specified in every code path you may see that the generic type is inferred as any. This happens because type inference in Typescript has to ensure it is accurate across every code path. However, if the component gets more complex, in its use of the generic type parameter, then you may start to see a breakdown / widening in type inference. In most cases when working with Generic components in Angular everything will work as expected. It certainly seems like it does from this example. You may now be wondering why we said that Angular doesn't support generic types fully. Now if we make a mistake in the configuration, and provide incompatible types to multiple generic properties, we will get a build error. That type then becomes EventEmitter and the compiler can validate that the types of rowData and onSelection are consistent. ![]() Using this information the compiler then applies the correct type to the onSelection Output. It then infers that the generic type TData should be set to ICar. Without Generics we have to specify the type of the row data as any because we want to re-use this grid component with different data sets.Įnter fullscreen mode Exit fullscreen modeĪt this point the Angular compiler knows that the property carData has the type ICar and this has been assigned to the Input rowData which has the type TData. Let's say we have a grid component that displays items and fires an event when users select a row. By making the grid component generic users can provide their own interface that represents their row data and have that interface used throughout the grid components' properties.īefore we dive into the technical details of generic components I think it's important that we understand why we want to have generic support for our components. For example, you might have a grid component to display rows of data. Through generics we are able to customise existing Interfaces to a specific use case. ![]() Typescript Generics are a very powerful feature. In this article we will explain how Angular does it, but also how you can help the Angular Compiler be more accurate in complex components. You may be familiar with writing Typescript Generics like Grid but how does this work for Angular components? We can't provide generic types to our template selectors so how does Angular support generic components? ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |