{"id":20607,"date":"2023-08-01T10:16:56","date_gmt":"2023-08-01T08:16:56","guid":{"rendered":"https:\/\/www.oimmei.com\/typescript-altri-5-trucchi-per-lo-sviluppo\/"},"modified":"2025-08-06T11:21:59","modified_gmt":"2025-08-06T09:21:59","slug":"typescript-more-5-tricks-for-development","status":"publish","type":"post","link":"https:\/\/www.oimmei.com\/en\/typescript-more-5-tricks-for-development\/","title":{"rendered":"TypeScript: 5 More Tricks for Development"},"content":{"rendered":"\r\n

Are you a web developer? Did you happen to work on a fairly complex JavaScript project, such as a Node.js<\/a> server or a nice and complicated React<\/a> website? Have the limitations in the programming language ever caused you to lose a lot of time and sanity in order to track down particularly sneaky bugs?<\/p>\r\n\r\n\r\n\r\n

Well, all of the above happened to us. Many times, actually. Enough to make me wonder if there is any better tool for developing and maintaining web projects. Something that makes it easier to find errors while using data structures, for instance.<\/p>\r\n\r\n\r\n\r\n

Luckily, the answer is yes<\/em>, and this tool is TypeScript<\/a>! Open source syntactical superset of JavaScript developed mostly by Microsoft, TypeScript adds to every browser\u2019s favorite programming language a lot of new tools and features, mainly static typing, to make web projects easier to build and maintain.<\/p>\r\n\r\n\r\n\r\n

You most likely already know all of this, especially if you often hang out on this blog. Not only because of the incredible popularity<\/a> reached by TypeScript in the last few years, but also because right on this website there\u2019s already an article of mine<\/a> discussing some interesting features of this language. Back when I wrote it I talked about a potential sequel, and here it pops up just like a \u201cCannot read property of undefined\u201d error in a JavaScript program.<\/p>\r\n\r\n\r\n\r\n

Let\u2019s get into it, then. Five sections, five TypeScript tools you may or may not know, with full examples and links to the official playground<\/a> for version 5.1. Here we go.<\/p>\r\n\r\n\r\n\r\n

Tuple<\/h2>\r\n\r\n\r\n\r\n

This one is really simple, but I bet it\u2019ll be new to somebody.<\/p>\r\n\r\n\r\n\r\n

Everyone who works with TypeScript knows how to statically type arrays: you just set the type of the elements, and then add the square brackets afterwards.<\/p>\r\n\r\n\r\n\r\n

const numberArray: number[] = [];\r\n\r\n\/\/ Valid:\r\nnumberArray.push(1);\r\nnumberArray.push(2);\r\n\r\n\/\/ Not valid:\r\nnumberArray.push(\"string\");<\/pre>\r\n\r\n\r\n\r\n
Try it on the playground<\/a><\/p>\r\n\r\n\r\n\r\n
What\u2019s not so obvious is that you can use type definitions as a simple way to create tuples<\/a> – already mentioned in the previous article<\/a> -, meaning ordered lists of non-unique elements. Here\u2019s a tuple of three numbers.<\/p>\r\n\r\n\r\n\r\n
\/\/ Valid:\r\nconst numberTuple1: [number, number, number] = [1, 2, 3];\r\n\r\n\/\/ Not valid:\r\nconst numberTuple2: [number, number, number] = [];\r\n\r\n\/\/ Not valid:\r\nconst numberTuple3: [number, number, number] = [1, 2, 3, 4];<\/pre>\r\n\r\n\r\n\r\n
Try it on the playground<\/a><\/p>\r\n\r\n\r\n\r\n
The good thing about tuples is that, as you can see from the snippet, static typing allows TypeScript to validate the cardinality of the list, not just the type of its elements. This ensures that the data structure always contains exactly the elements you expect in the positions you expect.<\/p>\r\n\r\n\r\n\r\n
Tuples have plenty of applications in JavaScript projects. In React, for instance, they\u2019re useful for defining state variables<\/a> that keep in one simple structure a bunch of values tightly related to one another, so you can easily read and update it without making the related component too verbose, especially with hooks<\/a>.<\/p>\r\n\r\n\r\n\r\n
Finally, it\u2019s worth pointing out that tuples can contain diverse data of any type, even complex ones – including other tuples, if you want to be creative!<\/p>\r\n\r\n\r\n\r\n
interface ResponseBody {\r\n  title: string\r\n  content: string\r\n}\r\n\r\n\/\/ This tuple contains an HTTP code, a \r\n\/\/ response message and the response body.\r\nconst apiResponse: [number, string, ResponseBody] = [\r\n  200,\r\n  \"success\",\r\n  {\r\n    title: \"Title\",\r\n    content: \"Content\",\r\n  },\r\n];\r\n\r\n\/\/ Getting the items with a destructuring assignment\r\n\/\/ (https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment).\r\nconst [statusCode, message, body] = apiResponse;\r\n\r\nconsole.log(statusCode);\r\nconsole.log(message);\r\nconsole.log(body);<\/pre>\r\n\r\n\r\n\r\n
Try it on the <\/a>playground<\/a><\/p>\r\n\r\n\r\n\r\n
Utility types: Readonly e NonNullable<\/h2>\r\n\r\n\r\n\r\n
Utility types<\/a>! Remember them? I already talked about a couple of these type modifiers in the previous article<\/a>. Today we\u2019ll look at two more of them, often overlooked but far from useless.<\/p>\r\n\r\n\r\n\r\n
Readonly<\/a> is a modifier that creates a read only version of a given type. If you have the interface for an object, for example, this utility type can make sure none of the properties can be reassigned after the object is created.<\/p>\r\n\r\n\r\n\r\n
\/\/ Interface for an item with an ID and a title.\r\ninterface SomeInterface {\r\n  id: number\r\n\r\n  title: string\r\n}\r\n\r\n\/\/ SomeInterface object:\r\nconst someObject: SomeInterface = {\r\n  id: 1,\r\n  title: \"Title\",\r\n};\r\n\r\n\/\/ Readonly SomeInterface object:\r\nconst someReadonlyObject: Readonly<SomeInterface> = {\r\n  id: 2,\r\n  title: \"Readonly title\",\r\n};\r\n\r\n\/\/ Valid:\r\nsomeObject.title = \"Another title\";\r\n\r\n\/\/ Not valid:\r\nsomeReadonlyObject = \"Yet another title\";<\/pre>\r\n\r\n\r\n\r\n
Provalo sul <\/a>playground<\/a><\/p>\r\n\r\n\r\n\r\n
This can look sort of useless, but think about all the times you deal with values that should<\/em> be read only: objects that contain some sort of configuration parameters, the state of a React component<\/a>, the state of a Redux store<\/a> or data related to any library that relies on regular JavaScript comparisons in order to trigger some event in your application. Thanks to Readonly<\/strong>, TypeScript itself can help you deal with this data by throwing an error whenever you reassign a value that shouldn\u2019t be reassigned. It\u2019s like const<\/strong>, but deeper!<\/p>\r\n\r\n\r\n\r\n
NonNullable<\/a> is a modifier that excludes null<\/strong> or undefined<\/strong> from a union type. I don\u2019t think this one needs much of an explanation: it\u2019s useful when you have a type, like the type of an interface property (you do remember you can access the type of a property, right?<\/a>), that can be empty but you need to initialize it to a non-empty value.<\/p>\r\n\r\n\r\n\r\n
interface SomeInterface {\r\n  \/\/ In this interface, value may be empty.\r\n  value: number | null | undefined\r\n}\r\n\r\n\/\/ I'll initialize a variable I'll use as my value,\r\n\/\/ but this time I need it to not be empty.\r\n\r\n\/\/ Valid:\r\nconst val1: SomeInterface[\"value\"] = null;\r\n\r\n\/\/ Not valid:\r\nconst val2: NonNullable<SomeInterface[\"value\"]> = null;\r\n\r\n\/\/ Valid:\r\nconst val3: NonNullable<SomeInterface[\"value\"]> = 10;<\/pre>\r\n\r\n\r\n\r\n
Try it on the playground<\/a><\/p>\r\n\r\n\r\n\r\n
Generic types: default type, constraints, conditional types<\/h2>\r\n\r\n\r\n\r\n
Whoever worked with programming languages like Java<\/a> or C#<\/a> – also known as Microsoft Java<\/a> – definitely knows what generics<\/a> are. For anybody else, meaning all developers who still have some of their sanity, generics allow you to create software components that may accept a variety of different types, with the specific type provided by the component user, while still taking advantage of static typing.<\/p>\r\n\r\n\r\n\r\n
\/\/ Let's say you need to write a function that takes any input parameter \r\n\/\/ and returns it. Without generics, this is the best you can do.\r\nfunction identityAny(param: any): any {\r\n  return param;\r\n}\r\n\r\n\/\/ But *with* generics:\r\nfunction identity<T>(param: T): T {\r\n  return param;\r\n}\r\n\r\n\/\/ Valid:\r\nconsole.log(identity<string>(\"string\"));\r\nconsole.log(identity<number>(42));\r\n\r\n\/\/ Not valid:\r\nconsole.log(identity<boolean>(11));\r\n\r\n\/\/ You can use them for interfaces...\r\ninterface GenericInterface<T1, T2> {\r\n  param1: T1\r\n\r\n  param2: T2\r\n}\r\n\r\n\/\/ ...classes...\r\nclass GenericClass<P> {\r\n  prop: P\r\n\r\n  constructor(propValue: P) {\r\n    this.prop = propValue;\r\n  }\r\n\r\n  getProp(): P {\r\n    return this.prop;\r\n  }\r\n}\r\n\r\n\/\/ ...functions...\r\nfunction genericFunction<P>(param: P): P {\r\n  return param;\r\n}\r\n\r\n\/\/ ...and even arrow functions.\r\nconst genericArrowFunction = <P,>(param: P): P => param;<\/pre>\r\n\r\n\r\n\r\n
Try it on <\/a>the<\/a> playground<\/a><\/p>\r\n\r\n\r\n\r\n
The official docs<\/a> extensively talk about generics, so if you need a more lengthy introduction I recommend giving them a read. In this article, I\u2019ll just mention some interesting things about the topic.<\/p>\r\n\r\n\r\n\r\n
For instance: generic types can be made optional by providing a default value in their declaration, just like with the input parameters of a function. If no type is specified when the component is used, TypeScript will fall back to the default one.<\/p>\r\n\r\n\r\n\r\n
\/\/ string is the default type for this interface.\r\ninterface GenericInterface<T = string> {\r\n  param: T\r\n}\r\n\r\n\/\/ Valid:\r\nconst value1: GenericInterface = {\r\n  param: \"string\"\r\n}\r\nconst value2: GenericInterface<number> = {\r\n  param: 42\r\n}\r\n\r\n\/\/ Not valid: TypeScript assumes param is typed as a string.\r\nconst value3: GenericInterface = {\r\n  param: 42\r\n}<\/pre>\r\n\r\n\r\n\r\n
Try it on the playground<\/a><\/p>\r\n\r\n\r\n\r\n
This feature can be used to introduce generic types into a component that currently has none, or to add more of them next to existing ones, while also keeping said component backward compatible.<\/p>\r\n\r\n\r\n\r\n
Be careful though: setting a default type doesn\u2019t mean constraining the types that can be actually provided upon using the component. The type the user developer provides may be completely different from the default one, as you saw earlier with number<\/strong> and string<\/strong>.<\/p>\r\n\r\n\r\n\r\n
That\u2019s why it\u2019d be a mistake to write something like this.<\/p>\r\n\r\n\r\n\r\n
\/\/ An interface of the project.\r\ninterface SomeInterface {\r\n  id: number\r\n  \r\n  name: string\r\n}\r\n\r\n\/\/ This function has a generic type, with the interface as its default.\r\nfunction someFunction<T = SomeInterface>(param: T): void {\r\n  \/\/ Not valid: there's no way to be sure T and SomeInterface will be compatible.\r\n  console.log(param.name);\r\n}<\/pre>\r\n\r\n\r\n\r\n
Try it on the playground<\/a><\/p>\r\n\r\n\r\n\r\n
However, it actually is possible to set a constraint for the types your component will be able to receive. You can do that with the extends<\/strong> keyword, which may also be used along with a default type.<\/p>\r\n\r\n\r\n\r\n
\/\/ An interface of the project.\r\ninterface SomeInterface {\r\n  id: number\r\n  \r\n  name: string\r\n}\r\n\r\n\/\/ This function has a generic type that extends SomeInterface.\r\nfunction someFunction<T extends SomeInterface = SomeInterface>(\r\n  param: T\r\n): void {\r\n  \/\/ Valid: whatever the actual type of T is,\r\n  \/\/ it will be compatible with SomeInterface.\r\n  console.log(param.name);\r\n}\r\n\r\n\/\/ Not valid: number is not compatible with SomeInterface.\r\nsomeFunction<number>(42);<\/pre>\r\n\r\n\r\n\r\n
Try it on the playground<\/a><\/p>\r\n\r\n\r\n\r\n
For complex cases, you can also use conditions to change the static typing for other parts of your components according to the provided types. A classic example: let\u2019s say you have a component that deals with a value, and this value could either be a single item or a list of items with the same type.<\/p>\r\n\r\n\r\n\r\n
With generics, you\u2019re able to handle everything with just one interface like this:<\/p>\r\n\r\n\r\n\r\n