Today we’re announcing the availability of TypeScript 4.6.<\/p>\n
If you’re not yet familiar with TypeScript, it’s a language that builds on JavaScript and adds syntax for types.\nTypes help describe what kinds of values you’re working with and what kinds of functions you’re calling.\nTypeScript can use this information to help you avoid about mistakes like typos, missing arguments, or forgetting to check for To get started using TypeScript, 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 If you’ve already read our beta<\/a> or RC blog posts<\/a>, you can read up on what’s changed since<\/a>.<\/p>\n Here’s a quick list of what’s new in TypeScript 4.6!<\/p>\n When we announced our beta, we missed documenting two great features – control flow analysis for destructured discriminated unions<\/a> and the addition of the One change that made its way to our RC, but which we didn’t capture in our prior announcement was suggestions for mismatched JSDoc parameter names<\/a>.<\/p>\n Since our RC, we’ve also done some internal refactoring which has fixed certain issues, corrected some bizarre error messages, and improved type-checking performance by 3% in certain cases.\nYou can read up more on that change here<\/a>.<\/p>\n In JavaScript classes it’s mandatory to call This made it cheap to check that We’d like to extend our thanks to Joshua Goldberg<\/a> for patiently working with us to land this change<\/a>!<\/p>\n TypeScript is able to narrow types based on what’s called a discriminant property.\nFor example, in the following code snippet, TypeScript is able to narrow the type of This lets us work with objects that can hold different data, but a common field tells us which<\/em> data those objects have.<\/p>\n This is very common in TypeScript; however, depending on your preferences, you might have wanted to destructure null<\/code> and undefined<\/code>!\nBut this type-checking isn’t the only thing TypeScript does – it uses the information from these types to give you an amazing editing experience, powering things like code-completions, go-to-definition, renaming, and more.\nIf you already use JavaScript in Visual Studio or Visual Studio Code, you’ve already been using TypeScript indirectly!<\/p>\nnpm install typescript<\/span>\r\n<\/code><\/pre>\n\n
\n
super()<\/code><\/a><\/li>\n--target es2022<\/code><\/a><\/li>\nreact-jsx<\/code><\/a><\/li>\n<\/a> What’s New Since the Beta and RC?<\/h2>\n
es2022<\/code><\/a> output target.\nAn additional noteworthy change that has been present since our beta is the removal of void 0<\/code> arguments in the react-jsx<\/code> mode<\/a><\/p>\n<\/a> Allowing Code in Constructors Before
super()<\/code><\/h2>\nsuper()<\/code> before referring to this<\/code>.\nTypeScript enforces this as well, though it was a bit too strict in how<\/em> it ensured this.\nIn TypeScript, it was previously an error to contain any<\/em> code at the beginning of a constructor if its containing class had any property initializers.<\/p>\nclass<\/span> <\/span>Base<\/span> {<\/span>\r\n <\/span>\/\/ ...<\/span>\r\n}<\/span>\r\n\r\nclass<\/span> <\/span>Derived<\/span> <\/span>extends<\/span> <\/span>Base<\/span> {<\/span>\r\n <\/span>someProperty<\/span> = <\/span>true<\/span>;<\/span>\r\n\r\n <\/span>constructor<\/span>() {<\/span>\r\n <\/span>\/\/ error!<\/span>\r\n <\/span>\/\/ have to call 'super()' first because it needs to initialize 'someProperty'.<\/span>\r\n <\/span>doSomeStuff<\/span>();<\/span>\r\n <\/span>super<\/span>();<\/span>\r\n }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\nsuper()<\/code> gets called before this<\/code> is referenced, but it ended up rejecting a lot of valid code.\nTypeScript 4.6 is now much more lenient in that check and permits other code to run before super()<\/code>., all while still ensuring that super()<\/code> occurs at the top-level before any references to this<\/code>.<\/p>\n<\/a> Control Flow Analysis for Destructured Discriminated Unions<\/h2>\n
action<\/code> based on every time we check against the value of kind<\/code>.<\/p>\ntype<\/span> <\/span>Action<\/span> =<\/span>\r\n | { <\/span>kind<\/span>: <\/span>"NumberContents"<\/span>, <\/span>payload<\/span>: <\/span>number<\/span> }<\/span>\r\n | { <\/span>kind<\/span>: <\/span>"StringContents"<\/span>, <\/span>payload<\/span>: <\/span>string<\/span> };<\/span>\r\n\r\nfunction<\/span> <\/span>processAction<\/span>(<\/span>action<\/span>: <\/span>Action<\/span>) {<\/span>\r\n <\/span>if<\/span> (<\/span>action<\/span>.<\/span>kind<\/span> === <\/span>"NumberContents"<\/span>) {<\/span>\r\n <\/span>\/\/ `action.payload` is a number here.<\/span>\r\n <\/span>let<\/span> <\/span>num<\/span> = <\/span>action<\/span>.<\/span>payload<\/span> * <\/span>2<\/span>\r\n <\/span>\/\/ ...<\/span>\r\n }<\/span>\r\n <\/span>else<\/span> <\/span>if<\/span> (<\/span>action<\/span>.<\/span>kind<\/span> === <\/span>"StringContents"<\/span>) {<\/span>\r\n <\/span>\/\/ `action.payload` is a string here.<\/span>\r\n <\/span>const<\/span> <\/span>str<\/span> = <\/span>action<\/span>.<\/span>payload<\/span>.<\/span>trim<\/span>();<\/span>\r\n <\/span>\/\/ ...<\/span>\r\n }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\nkind<\/code> and payload<\/code> in the the example above.\nPerhaps something like the following:<\/p>\ntype<\/span> <\/span>Action<\/span> =<\/span>\r\n | { <\/span>kind<\/span>: <\/span>"NumberContents"<\/span>, <\/span>payload<\/span>: <\/span>number<\/span> }<\/span>\r\n | { <\/span>kind<\/span>: <\/span>"StringContents"<\/span>, <\/span>payload<\/span>: <\/span>string<\/span> };<\/span>\r\n\r\nfunction<\/span> <\/span>processAction<\/span>(<\/span>action<\/span>: <\/span>Action<\/span>) {<\/span>\r\n <\/span>const<\/span> { <\/span>kind<\/span>, <\/span>payload<\/span> } = <\/span>action<\/span>;<\/span>\r\n <\/span>if<\/span> (<\/span>kind<\/span> === <\/span>"NumberContents"<\/span>) {<\/span>\r\n <\/span>let<\/span> <\/span>num<\/span>