TypeScript 3.1 JSX
介绍
TypeScript 支持内嵌，类型检查以及将 JSX 直接编译为 JavaScript 。
一、基本用法
如果要用 JSX 必须做两件事情：
- 给文件一个
.tsx扩展名 - 启用
jsx选项
TypeScript 有三种 JSX 模式，preserve、react 和 react-native，这些模式只在代码生成阶段起作用 - 类型检查并不受影响。
在 preserve 模式下生成代码中会保留 JSX 以便于后续的转换操作使用（比如给 Babel 使用）。另外，输出文件会带有 .jsx 扩展名。
react 模式会生成 React.createElement，在使用前不需要进行转换操作，输出文件的扩展名是 .js。
react-native 模式相当于 preserve,它保留了所有的 JSX 但是输出文件的扩展名是 .js。
| 模式 | 输入 | 输出 | 输出文件扩展名 |
|---|---|---|---|
| preserve | <div/> | <div/> | .jsx |
| react | <div/> | React.createElement | .js |
| react-native | <div/> | <div/> | .js |
可以通过在命令行使用 --jsx 标记或者是在 tscofnig.json 中选项来指定相应到的模式
注意：React 标识符是写死的硬编码，所以必须保证
React(大写的 R) 是可用的。
二、as 操作符
比如有一个类型断言：
var foo = <foo>bar;这里断言 bar 是 foo 类型的。因为 TypeScript 也使用尖括号来表示类型断言，在结合 JSX 的语法后将带来解析上的困难。
因此 typescript 在 .tsx 文件里禁用了使用尖括号的类型断言。
优于不能在 .tsx 文件中使用上述语法，因此应该使用另一个类型断言操作符：as
上面例子的改写：
var foo = bar as foo;as 操作符在 .ts 和 .tsx 文件里面都是可用的，并且与尖括号类型断言是等价的。
三、类型检查
为了理解 JSX 的类型检查，首先要理解固有元素和基于值的元素之间的区别。
假设有一个 JSX 表达式 <expr />，expr 可能引用环境自带的一些东西（比如 DOM 环境中的 div 和 span）或者是自定义组件。这是非常重要的，原因有下面两点：
- 对于 React 固有元素会生成字符串
React.createElement('div')，然而自定义的组件则不会生成React.createElement('MyComponent')。 - 传入 JSX 元素里的属性类型的查找方式不同，固有元素 本身 就支持，然而自定义组件会自己去指定它们具有哪个属性。
TypeScript 使用和 React相同点的规范来区分这两者。固有元素总是以一个小写字母开头，基于值的元素总是以一个大写字母开头。
1、固有元素
固有元素使用特殊的接口 JSX.IntrinsicElements 来查找，默认的，如果这个借口没有指定，会全部通过，不对固有元素进行类型检查。然而，如果这个接口存在，那么固有元素的名字需要在 JSX.IntrinsicElements 接口的属性里查找，比如：
declare namespace JSX {
interface IntrinsicElements {
foo: any
}
}
<foo /> // 正确
<bar /> // 错误上面的例子中，<foo /> 没有问题，但是 <bar /> 会报错，因为它没在 JSX.IntrinsicElements 里指定。
注意可以在
JSX.IntrinsicElements上指定一个用来捕获所有字符串索引：
declate namespace JSX {
interface IntrinsicElements {
[elemName: string]: any
}
}2、基于值得元素
基于值的元素会简单的在它所在的作用域里按照标识符查找。
import MyComponent from './myComponent';
<MyComponent /> // 正确
<SomeOtherComponent /> // 错误有两种方式可以定义基于值的元素：
- 无状态函数组件（SFC）
- 类组件
由于这两种基于值元素在 JSX 表达式里面无法区分，因此 TypeScript 首先会尝试将表达式作为无状态函数组件进行将诶西，如果解析成功，那么 TypeScript 就完成了表达式到其声明的解析操作。如果按照无状态组件解析失败，则 TypeScript 会继续尝试以类组件的形式进行解析。如果依旧解析失败，那么将会输出一个错误。
无状态函数组件
组件被定义成 JavaScript 函数，第一个参数是 props 对象。 TypeScript 会强制它的返回值可以赋值给 JSX.Element。
interface FooProp {
name: string;
X: number;
Y: number;
}
declare function AnotherComponent(prop: {name: string});
function ComponentFoo(prop: FooProp) {
return <AnotherComponent name={prop.name} />;
}
const Button = (prop: {value: string}, context: { color: string }) => <button>由于无状态函数组件是简单的 JavaScript 函数，所以我们还可以利用函数重载。
interface ClickableProps {
children: JSX.Element[] | JSX.Element
}
interface HomeProps extends ClickableProps {
home: JSX.Element;
}
interface SideProps extends ClickableProps {
side: JSX.Element | string;
}
function MainButton(prop: HomeProps): JSX.Element;
function MainButton(prop: SideProps): JSX.Element {
...
}类组件
可以定义类组件的类型。不过需要首先需要弄懂两个术语：元素类的类型 和 元素实例的类型
现在有 <Expr /> 元素类的类型是 Expr 的类型，所以在上面的例子中，如果 MyComponent 是 ES6 的类，那么类类型就是类的构造函数和静态部分。
如果 MyComponent 是工厂函数，则类类型是这个函数。
一旦建立了类类型，实例类型由类构造器或调用签名（如果存在的话）的返回值的联合构成。再次说明，在 ES6 类的情况下，实例类型就是这个类的实例的类型，如果是工厂函数，实例类型就是这个函数返回值的类型。
class MyComponent {
render() {}
}
// 使用构造签名
var myComponent = new MyComponent();
// 元素类的类型 => MyComponent
// 元素实例的类型 => { render: () => void }
function MyFactoryFunction() {
return {
render: () => {
}
}
}
// 使用调用签名
var myComponent = MyFactoryFunction();
// 元素类的类型 => FactoryFunction
// 元素实例的类型 => { render: () => void }元素的实例类型很有趣，因为它必须赋值给 JSX.ElementClass 或者抛出一个错误，默认的 JSX.ElementClass 为 {}，但是它可以被扩展用来限制 JSX 的类型以符合相应的接口。
declare namespace JSX {
interface ElementClass {
render: any;
}
}
class MyComponent {
render() {}
}
function MyFactoryFunction() {
return { render: () => {} }
}
<MyComponent />; // 正确
<MyFactoryFunction />; // 正确
class NotAValidComponent {}
function NotAValidFactoryFunction() {
return {};
}
<NotAValidComponent />; // 错误
<NotAValidFactoryFunction />; // 错误3、属性类型检查
属性类型检查的第一步是确定元素属性类型，这在固有元素和基于值的元素之间稍有不同。
对于固有元素，这是 JSX.IntrinsicElements 属性的类型。
declare namespace JSX {
interface IntrinsicElements {
foo: { bar?: boolean }
}
}
// `foo`的元素属性类型为`{bar?: boolean}`
<foo bar />;对于基于值得元素会稍微复杂些，取决于先前确定的在元素实例类型上的某个属性的类型，至于该使用哪个属性来确定类型取决于 JSX.ElementAttributesProperty，它应该使用单一的属性来定义，这个属性名之后会被使用。 TypeScript 2.8 版本，如果没有指定 JSX.ElementsArrtibutesProperty 那么将使用类元素构造函数或 SFC 调用的第一个参数的类型。
declare namespace JSX {
interface ElementAttributesProperty {
props; // 指定用来使用的属性名
}
}
class MyComponent {
// 在元素实例类型上指定属性
props: {
foo?: string;
}
}
// `MyComponent`的元素属性类型为`{foo?: string}`
<MyComponent foo="bar" />元素的属性类型用于 JSX 里进行属性的了性检查，支持可选属性和必选属性：
declare namespace JSX {
interface IntrinsicElements {
foo: { requiredProp: string; optionalProp?: number }
}
}
<foo requiredProp="bar" />; // 正确
<foo requiredProp="bar" optionalProp={0} />; // 正确
<foo />; // 错误, 缺少 requiredProp
<foo requiredProp={0} />; // 错误, requiredProp 应该是字符串
<foo requiredProp="bar" unknownProp />; // 错误, unknownProp 不存在
<foo requiredProp="bar" some-unknown-prop />; // 正确, `some-unknown-prop`不是个合法的标识符注意，如果一个属性名不是个合法的 JS 标识符（比如
data-*属性），并且它没有出现在元素属性类型里时不会当做有一个错误。
另外，JSX 还会使用 JSX.IntrinsAttributes 接口来制定额外的属性，这些额外的属性通常不会被组件的 props 和 arguments 使用 - 比如 React 的 `key。
还有，JSX.IntrinsicClassAttributes<T> 泛型类型也可以用来做同样的事情。
这里的泛型参数表示类实例类型，在 React 中，它用来允许 Ref<T> 类型上的 ref 属性。通常来讲，这些接口上的所有属性都是可选的，除非你想要用户在每个 JSX 标签上都提供一些属性。
延展操作符也可以使用：
var props = { requiredProp: 'bar' };
<foo {...props} />; // 正确
var badProps = {};
<foo {...badProps} />; // 错误4、子孙类型检查
从 TypeScript 2.3 开始，引入了 children 类型检查，children 是元素属性（attribute）类型的一个特殊属性(property)，子 JSXExpression 将会被插入到属性中。
与使用 JSX.ElementAttributesProperty 来决定 props 名差不多，可以使用 JSX.ElementChildrenAttribute 来决定 children 名。JSX.ElementChildrenAttribute 应该被声明在单一的属性（property）里。
declare namespace JSX {
interface ElementChildrenAttribute {
children: {}; // specify children name to use
}
}如果不特殊指定子孙类型，会使用 React typings 里的默认类型。
<div>
<h1>Hello</h1>
</div>;
<div>
<h1>Hello</h1>
World
</div>;
const CustomComp = (props) => <div>props.children</div>
<CustomComp>
<div>Hello World</div>
{"This is just a JS expression..." + 1000}
</CustomComp>interface PropsType {
children: JSX.Element
name: string
}
class Component extends React.Component<PropsType, {}> {
render() {
return (
<h2>
{this.props.children}
</h2>
)
}
}
// OK
<Component>
<h1>Hello World</h1>
</Component>
// Error: children is of type JSX.Element not array of JSX.Element
<Component>
<h1>Hello World</h1>
<h2>Hello World</h2>
</Component>
// Error: children is of type JSX.Element not array of JSX.Element or string.
<Component>
<h1>Hello</h1>
World
</Component>四、 JSX结果类型
默认地 JSX 表达式结果的类型是 any，可以自定义这个类型，通过指定 JSX.Element 接口，然而不能从接口里检索元素、属性或者是 JSX 的子元素的类型信息。它是一个黑盒。
五、嵌入的表达式
JSX 允许你使用 { } 标签来内嵌表达式。
var a = <div>
{['foo', 'bar'].map(i => <span>{i / 2}</span>)}
</div>上面代码会产生一个错误，不能用数字来除以一个字符串，如果使用 preserve 选项：
var a = <div>
{['foo', 'bar'].map(function (i) { return <span>{i / 2}</span>; })}
</div>六、React 整合
如果要一起使用 React 和 JSX ，应该使用 React 类型定义，这些类型声明定义了 JSX 合适命名空间来使用 React。
/// <reference path="react.d.ts" />
interface Props {
foo: string;
}
class MyComponent extends React.Component<Props, {}> {
render() {
return <span>{this.props.foo}</span>
}
}
<MyComponent foo="bar" />; // 正确
<MyComponent foo={0} />; // 错误七、工厂函数
jsx: react 编译选项用的工厂函数是可以配置的。可以使用 jsxFactory 命令行选项，或者内联的 @jsx 注释指令在每个文件上设置。
比如 给 createElement 设置 jsxFactory，<div /> 会使用 createElement("div") 来生成，而不是 React.createElement('div') 来生成。
注释指令在 TypeScript 2.8 里可以像下面这样子使用：
import preact = require("preact");
/* @jsx preact.h */
const x = <div />;生成：
const preact = require('preact');
const x = preact.h("div", null);文章版权：Postbird-There I am , in the world more exciting!
本文链接：http://www.ptbird.cn/typescript-jsx.html
转载请注明文章原始出处 !
来看看