In #Angular Typed Forms, the `get` method takes a string with dot-separated control names, and returns a fully typed value. How is this possible?
We can actually parse the argument at compile time, using the magic of #TypeScript template literal types! Let's see how it works. 🧵
We can actually parse the argument at compile time, using the magic of #TypeScript template literal types! Let's see how it works. 🧵
Imagine you have a type listing various products, and you want to automatically generate a type for corresponding database columns.
We define a template literal type called DatabaseColumn. It takes any subtype of string, and maps each element onto a string with a column prefix.
We define a template literal type called DatabaseColumn. It takes any subtype of string, and maps each element onto a string with a column prefix.
The previous example generates a string type by concatenation. However, can we also go the other direction, breaking apart a string type?
The answer is yes! Using the `infer` keyword, we can implement a simple parser. This `ProductFrom` type extracts product names from columns.
The answer is yes! Using the `infer` keyword, we can implement a simple parser. This `ProductFrom` type extracts product names from columns.
Let's implement a tokenizer with our new knowledge.
This type splits a string, similar to the previous example. We look for the first dot as the split point.
The result is the first token, followed by the recursive tokenization of the remainder.
This type splits a string, similar to the previous example. We look for the first dot as the split point.
The result is the first token, followed by the recursive tokenization of the remainder.
Angular's `get` method tokenizes its argument using this technique. Then, we can check for the specified property at compile time.
(P.S. Follow me for more about TypeScript and Angular!)
(P.S. Follow me for more about TypeScript and Angular!)
• • •
Missing some Tweet in this thread? You can try to
force a refresh
