this and arrow functions

this and arrow functions In JavaScript, this is a variable that’s set when a function is called. 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. This is notoriously confusing, especially when returning a function or passing a function as an argument. Let’s look at an example: let deck = { suits: ["hearts", "spades", "clubs", "diamonds"], cards: Array(52), createCardPicker: function()

this

this Learning how to use this in JavaScript is something of a rite of passage. 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. Fortunately, TypeScript lets you catch incorrect uses of this with a couple of techniques. If you need to learn how this works in JavaScript, though, first read Yehuda Katz’s Understanding JavaScript Function Invocation and “this”. Yehuda’s article explains the in

The JSX result type

The JSX result type By default the result of a JSX expression is typed as any. You can customize the type by specifying the JSX.Element interface. However, it is not possible to retrieve type information about the element, attributes or children of the JSX from this interface. It is a black box.

The Impact of ES6 on Module Plugins

The Impact of ES6 on Module Plugins Some plugins add or modify top-level exports on existing modules. While this is legal in CommonJS and other loaders, ES6 modules are considered immutable and this pattern will not be possible. Because TypeScript is loader-agnostic, there is no compile-time enforcement of this policy, but developers intending to transition to an ES6 module loader should be aware of this.

The as operator

The as operator Recall how to write a type assertion: var foo = <foo>bar; Here we are asserting the variable bar to have the type foo. Since TypeScript also uses angle brackets for type assertions, JSX’s syntax introduces certain parsing difficulties. As a result, TypeScript disallows angle bracket type assertions in .tsx files. To make up for this loss of functionality in .tsx files, a new type assertion operator has been added: as. The above example can easily be rewritten with the as

Test the resulting app

Test the resulting app gulp node dist/main.js The program should print “Hello from TypeScript!”.

Test

Test Run the project. You should see a message when you type in the input boxes:

Test

Test Run the project. You should see a message when you type in the input boxes:

Templates

global-modifying-module.d.ts global-plugin.d.ts global.d.ts module-class.d.ts module-function.d.ts module-plugin.d.ts module.d.ts

Templates

Templates In Templates you’ll find a number of declaration files that serve as a useful starting point when writing a new file. Refer to the documentation in Library Structures to figure out which template file to use.