TypeScript实例讲解（二十九）JSX 是一个类 XML 的 JavaScript 语法扩展。在 TypeScri

这是我参与11月更文挑战的第29天，活动详情查看：2021最后一次更文挑战

本篇内容：JSX。

JSX 是一个类 XML 的 JavaScript 语法扩展。在 TypeScript 中使用 JSX，需要同时满足以下两个条件：
1、使用 .tsx 扩展名命名文件。
2、通过命令行或直接在配置文件中启用 jsx 选项。

JSX 模式

TypeScript 中可以使用三种 JSX 模式，分别是：preserve，react 和 react-native。不同的模式会输出不同的结果，具体如下：

preserve 模式
输入：<div />
输出：<div />
输出文件扩展名：.jsx

react 模式
输入：<div />
输出：React.createElement("div")
输出文件扩展名：.js

react-native 模式
输入：<div />
输出：<div />
输出文件扩展名：.js

关于 JSX 模式的更多详细内容可查阅官方文档。

注意：因为 jsx 语法包括尖括号<>，TypeScript 在 .tsx 文件里禁用了使用尖括号的类型断言，类型断言使用 as 语法。如：

// 例 1
(window as any).name = 'xxx';

JSX 结果类型

JSX 表达式结果的默认类型为 any。当然我们可以自定义结果类型，通过指定JSX.Element 接口。但是不能从接口里检索元素，属性或 JSX 的子元素的类型信息。

定义基于值的元素

无状态函数组件

// 例 2
const Page: React.SFC = () => {
    return (
        <div>
            this is first page.
        </div>
    );
};

export default Page;

类组件

在理解元素类类型和元素实例类型的情况下，可以定义类组件的类型。
一旦建立了类类型，实例类型就由类类型构造的返回类型或调用签名的并集决定。在 ES6 类的情况下，实例类型将是该类的实例的类型，并且在工厂函数的情况下，它将是从函数返回的值的类型。

// 例 3
class MyComponent {
    render() {}
}

// 使用构造签名
var myComponent = new MyComponent();

function MyFactoryFunction() {
    return {
        render: () => {
        }
    }
}

// 使用调用签名
var myComponent = MyFactoryFunction();

本篇完！如果文章对你有一点点帮助，请记得点个赞哦。