Typescript Deep Dive by Basarat Ali Syed

TypeScript Deep Dive
Components are type checked based on the props property of the component. This is modeled after how JSX is
transformed i.e. the attributes become the props of the component.
To create React components we recommend using ES6 classes. The react.d.ts file defines the
React.Component class which you should extend in your own class providing your own Props and State
interfaces. This is demonstrated below:
interface Props {
foo: string;
}
class MyComponent extends React.Component {
render() {
return {this.props.foo}
}
}
Non React JSX
TypeScript provides you with the ability to use something other than React with JSX in a type safe manner. The following
lists the customizability points, but note that this is for advanced UI framework authors:
You can disable react style emit by using "jsx" : "preserve" option. This means that JSX is emitted as is and then
you can use your own custom transpiler to transpile the JSX portions.
Using the JSX global module:
You can control what HTML tags are available and how they are type checked by customizing the
JSX.IntrinsicElements interface members.
When using components:
You can control which class must be inherited by components by customizing the default interface
ElementClass extends React.Component { } declaration.
You can control which property is used to type check the attributes (the default is props ) by customizing the
declare module JSX { interface ElementAttributesProperty { props: {}; } } declaration.
Fork me on github
JSX
70