In order for the compiler to pick the correct type check, it follows a similar process to the underlying JavaScript. With this change, the overloads now give us type checked calls to the pickCard function. This is notoriously confusing, especially when returning a function or passing a function as an argument.Īlert ( "card: " + pickedCard2. This makes it a very powerful and flexible feature, but it comes at the cost of always having to know about the context that a function is executing in. In JavaScript, this is a variable that’s set when a function is called. Yehuda’s article explains the inner workings of this very well, so we’ll just cover the basics here. If you need to learn how this works in JavaScript, though, first read Yehuda Katz’s Understanding JavaScript Function Invocation and “this”. Since TypeScript is a superset of JavaScript, TypeScript developers also need to learn how to use this and how to spot when it’s not being used correctly.įortunately, TypeScript lets you catch incorrect uses of this with a couple of techniques. Learning how to use this in JavaScript is something of a rite of passage. rest : string ) => string = buildName Try this This means you can use narrowing and rely on never turning up to do exhaustive checking in a switch statement.įor example, adding a default to our getArea function which tries to assign the shape to never will not raise an error when every possible case has been handled.Let buildNameFun : ( fname : string. The never type is assignable to every type however, no type is assignable to never (except never itself). In those cases, TypeScript will use a never type to represent a state which shouldn’t exist. When narrowing, you can reduce the options of a union to a point where you have removed all possibilities and have nothing left. They’re good for representing any sort of messaging scheme in JavaScript, like when sending messages over the network (client/server communication), or encoding mutations in a state management framework. You’ll see that type-checking can help avoid bugs when accidentally falling through different clauses in a switch statement.ĭiscriminated unions are useful for more than just talking about circles and squares. The important thing here was the encoding of Shape.Ĭommunicating the right information to TypeScript - that Circle and Square were really two separate types with specific kind fields - was crucial.ĭoing that lets us write type-safe TypeScript code that looks no different than the JavaScript we would’ve written otherwise.įrom there, the type system was able to do the “right” thing and figure out the types in each branch of our switch statement.Īs an aside, try playing around with the above example and remove some of the return keywords. In many editors we can observe these types as they change, and we’ll even do so in our examples. It looks at these special checks (called type guards) and assignments, and the process of refining types to more specific types than declared is called narrowing. TypeScript follows possible paths of execution that our programs can take to analyze the most specific possible type of a value at a given position. Within our if check, TypeScript sees typeof padding = "number" and understands that as a special form of code called a type guard. Much like how TypeScript analyzes runtime values using static types, it overlays type analysis on JavaScript’s runtime control flow constructs like if/else, conditional ternaries, loops, truthiness checks, etc., which can all affect those types. While it might not look like much, there’s actually a lot going on under the covers here. The idea is that TypeScript’s type system aims to make it as easy as possible to write typical JavaScript code without bending over backwards to get type safety. If this mostly looks like uninteresting JavaScript code, that’s sort of the point.Īpart from the annotations we put in place, this TypeScript code looks like JavaScript.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |