Treffer: An Exploratory Study of Decorators in the TypeScript Programming Language

Decorators are a feature of the TypeScript language that allows the configuration of additional metadata on code elements, such as members, methods, and the class definition itself. It has been officially supported only since version 5.0. This feature also exists in other languages, such as Java annotations and C# attributes. To understand and further study how developers use decorators, we conducted an exploratory study on 30 real-world, open-source, and popular projects hosted on GitHub. To extract the characteristics of decorators from the analyzed projects, the DSniffer (Decorators Sniffer) was developed. It can collect source code metrics’ values dedicated to metadata configuration. Among the results obtained, it was observed that 46% of the projects use decorators, among which we highlight some popular ones such as Angular and Visual Studio Code. We also noted that decorators use at most four parameters, but these can be quite complex objects, occupying up to 84 lines of source code. Thus, the study reveals high numbers of decorators in the projects and many repeated metadata configurations. This can negatively impact the readability of the source code and compromise maintenance. The study carried out in this work can serve as a basis for defining reference values or implementing a software visualization approach.