Today we’re excited to announce our Beta of TypeScript 4.3!<\/p>\n
To get started using the beta, you can get it through NuGet<\/a>, or use npm with the following command:<\/p>\n You can also get editor support by<\/p>\n Let’s dive in to what TypeScript 4.3 brings!<\/p>\n In JavaScript, it’s pretty common for APIs to convert values that are passed in before storing them. This often happens with getters and setters too. For example, let’s imagine we’ve got a class with a setter that always converts a value into a How would we type this JavaScript code in TypeScript? Well, technically we don’t have to do anything special here – TypeScript can look at this with no explicit types and can figure out that The problem is that But that’s no good – That’s why TypeScript 4.3 allows you to specify types for reading and writing to properties.<\/p>\n In the above example, our When considering how two properties with the same name relate to each other, TypeScript will only use the “reading” type (e.g. the type on the Keep in mind, this isn’t a pattern that’s limited to classes. You can write getters and setters with different types in object literals.<\/p>\nnpm install typescript@beta<\/pre>\n<\/div>\n
\n
Separate Write Types on Properties<\/h2>\n
number<\/code> before saving it in a private field.<\/p>\nclass<\/span> Thing<\/span> {<\/span>\r\n #size<\/span> =<\/span> 0<\/span>;<\/span>\r\n \r\n get<\/span> size<\/span>(<\/span>)<\/span> {<\/span>\r\n return<\/span> this<\/span>.<\/span>#size<\/span>;<\/span>\r\n }<\/span>\r\n set<\/span> size<\/span>(<\/span>value<\/span>)<\/span> {<\/span>\r\n let<\/span> num<\/span> =<\/span> Number<\/span>(<\/span>value<\/span>)<\/span>;<\/span>\r\n\r\n \/\/ Don't allow NaN and stuff.<\/span>\r\n if<\/span> (<\/span>!<\/span>Number<\/span>.<\/span>isFinite<\/span>(<\/span>num<\/span>)<\/span>)<\/span> {<\/span>\r\n this<\/span>.<\/span>#size<\/span> =<\/span> 0<\/span>;<\/span>\r\n return<\/span>;<\/span>\r\n }<\/span>\r\n\r\n this<\/span>.<\/span>#size<\/span> =<\/span> num<\/span>;<\/span>\r\n }<\/span>\r\n}<\/span><\/pre>\n<\/div>\nsize<\/code> is a number.<\/p>\nsize<\/code> allows you to assign more than just number<\/code>s to it. We could get around this by saying that size<\/code> has the type unknown<\/code> or any<\/code> like in this snippet:<\/p>\nclass<\/span> Thing<\/span> {<\/span>\r\n \/\/ ...<\/span>\r\n get<\/span> size<\/span>(<\/span>)<\/span>: unknown<\/span> {<\/span>\r\n return<\/span> this<\/span>.<\/span>#size<\/span>;<\/span>\r\n }<\/span>\r\n}<\/span><\/pre>\n<\/div>\nunknown<\/code> forces people reading size<\/code> to do a type assertion, and any<\/code> won’t catch any mistakes. If we really want to model APIs that convert values, previous versions of TypeScript forced us to pick between being precise (which makes reading values easier, and writing harder) and being permissive (which makes writing values easier, and reading harder).<\/p>\nclass<\/span> Thing<\/span> {<\/span>\r\n #size<\/span> =<\/span> 0<\/span>;<\/span>\r\n\r\n get<\/span> size<\/span>(<\/span>)<\/span>: number<\/span> {<\/span>\r\n return<\/span> this<\/span>.<\/span>#size<\/span>;<\/span>\r\n }<\/span>\r\n\r\n set<\/span> size<\/span>(<\/span>value<\/span>: string<\/span> |<\/span> number<\/span> |<\/span> boolean<\/span>)<\/span> {<\/span>\r\n let<\/span> num<\/span> =<\/span> Number<\/span>(<\/span>value<\/span>)<\/span>;<\/span>\r\n\r\n \/\/ Don't allow NaN and stuff.<\/span>\r\n if<\/span> (<\/span>!<\/span>Number<\/span>.<\/span>isFinite<\/span>(<\/span>num<\/span>)<\/span>)<\/span> {<\/span>\r\n this<\/span>.<\/span>#size<\/span> =<\/span> 0<\/span>;<\/span>\r\n return<\/span>;<\/span>\r\n }<\/span>\r\n\r\n this<\/span>.<\/span>#size<\/span> =<\/span> num<\/span>;<\/span>\r\n }<\/span>\r\n}<\/span><\/pre>\n<\/div>\nset<\/code> accessor takes a broader set of types (string<\/code>s, boolean<\/code>s, and number<\/code>s), but our get<\/code> accessor always guarantees it will be a number<\/code>. Now we can finally assign other types to these properties with no errors!<\/p>\nlet<\/span> thing<\/span> =<\/span> new<\/span> Thing<\/span>(<\/span>)<\/span>;<\/span>\r\n\r\n\/\/ Assigning other types to `thing.size` works!<\/span>\r\nthing<\/span>.<\/span>size<\/span> =<\/span> \"hello\"<\/span>;<\/span>\r\nthing<\/span>.<\/span>size<\/span> =<\/span> true<\/span>;<\/span>\r\nthing<\/span>.<\/span>size<\/span> =<\/span> 42<\/span>;<\/span>\r\n\r\n\/\/ Reading `thing.size` always produces a number!<\/span>\r\nlet<\/span> mySize<\/span>: number<\/span> =<\/span> thing<\/span>.<\/span>size<\/span>;<\/span><\/pre>\n<\/div>\nget<\/code> accessor above). “Writing” types are only considered when directly writing to a property.<\/p>\nfunction<\/span> makeThing<\/span>(<\/span>)<\/span>: Thing<\/span> {<\/span>\r\n let<\/span> size<\/span> =<\/span> 0<\/span>;<\/span>\r\n return<\/span> {<\/span>\r\n get<\/span> size<\/span>(<\/span>)<\/span>: number<\/span> {<\/span>\r\n return<\/span> size<\/span>;<\/span>\r\n }<\/span>,<\/span>\r\n set<\/span> size<\/span>(<\/span>value<\/span>: string<\/span> |<\/span> number<\/span> |<\/span>