Typescript Deep Dive by Basarat Ali Syed

TypeScript Deep Dive
JSX Support
TypeScript supports JSX transpilation and code analysis. If you are unfamiliar with JSX here is an excerpt from the official
website:
JSX is a XML-like syntax extension to ECMAScript without any defined semantics. It's NOT intended to be
implemented by engines or browsers. It's NOT a proposal to incorporate JSX into the ECMAScript spec itself. It's
intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.
The motivation behind JSX is to allow users to write HTML like views in JavaScript so that you can:
Have the view Type Checked by the same code that is going to check your JavaScript
Have the view be aware of the context it is going to operate under (i.e. strethen the controller-view connection in
traditional MVC)
This decreases the changes of errors and increases the maintainability of your user interfaces. The main consumer of JSX
at this point is ReactJS from facebook. This is the usage of JSX that we will discuss here.
Setup
Use files with the extension .tsx (instead of .ts ).
Use "jsx" : "react" in your tsconfig.json 's compilerOptions .
Install the definitions for JSX and React into your project : ( tsd install react --save --resolve ).
Import react into your .tsx files ( import * as React from "react" ).
HTML Tags vs. Components
React can either render HTML tags (strings) or React components (classes). The JavaScript emit for these elements is
different ( React.createElement('div') vs. React.createElement(MyComponent) ). The way this is determined is by the case of
the first letter. foo is treated as an HTML tag and Foo is treated as a component.
Type Checking
HTML Tags
An HTML Tag foo is to be of the type JSX.IntrinsicElements.foo . These types are already defined for all the major tags in
a file react-jsx.d.ts which we had you install as a part of the setup. Here is a sample of the the contents of the file:
declare module JSX {
interface IntrinsicElements {
a: React.HTMLAttributes;
abbr: React.HTMLAttributes;
div: React.HTMLAttributes;
span: React.HTMLAttributes;
}
}
/// so on ...
Components
JSX
69