TypeScript基础入门之JSX(一)

转发 TypeScript基础入门之JSX(一)

介绍

JSX是一种可嵌入的相似XML的语法。 它旨在转换为有效的JavaScript，尽管该转换的语义是特定于实现的。 JSX在React框架中愈来愈受欢迎，但此后也看到了其余实现。 TypeScript支持嵌入，类型检查和直接编译JSX到JavaScript。

基本用法

要使用JSX，您必须作两件事。 1. 使用.tsx扩展名命名您的文件 2. 启用jsx选项

TypeScript附带三种JSX模式：preserve, react 和 react-native。 这些模式仅影响编译阶段 - 类型检查不受影响。 preserve模式将保持JSX做为输出的一部分，以便由另外一个变换步骤（例如Babel）进一步编译。 此外，输出将具备.jsx文件扩展名。 react模式将编译React.createElement，在使用以前不须要通过JSX转换，输出将具备.js文件扩展名。 react-native模式至关于保留，由于它保留了全部JSX，但输出将具备.js文件扩展名。

Mode	Input	Output	Output File Extension
preserve			.jsx
react		React.createElement(“div”)	.js
react-native			.js

您可使用–jsx命令行标志或tsconfig.json文件中的相应选项指定此模式。

注意：标识符React是硬编码的，所以必须使用大写的R使React可用

as 操做符

回想一下如何写一个类型断言：

var foo = <foo>bar;

声明变量bar的类型为foo。 因为TypeScript还对类型断言使用尖括号，所以将其与JSX的语法结合会引入某些解析困难。 所以，TypeScript不容许.tsx文件中的尖括号类型断言。

因为上述语法不能在.tsx文件中使用，所以应使用备用类型断言运算符：as。 可使用as运算符轻松重写该示例。

var foo = bar as foo;

as运算符在.ts和.tsx文件中都可用，而且行为与尖括号类型断言样式相同。

 

类型检查

为了理解使用JSX进行类型检查，您必须首先了解内部元素和基于值的元素之间的区别。 给定JSX表达式，expr能够引用环境固有的东西（例如DOM环境中的div或span）或者您建立的自定义组件。 这有两个重要缘由：

1. 对于React，内部元素以字符串形式发出(React.createElement(“div”))，而您建立的组件则不是(React.createElement(MyComponent))。
2. 应该以不一样的方式查找在JSX元素中传递的属性的类型。内在元素属性本质上应该是已知的，而组件可能想要指定它们本身的属性集。

TypeScript使用与React相同的约定来区分它们。内部元素始终以小写字母开头，而基于值的元素始终以大写字母开头。

内在元素 在特殊接口JSX.IntrinsicElements上查找内部元素。 默认状况下，若是未指定此接口，则会执行任何操做，而且不会对内部元素进行类型检查。 可是，若是存在此接口，则将内部元素的名称做为JSX.IntrinsicElements接口上的属性进行查找。 例如：

declare namespace JSX {
    interface IntrinsicElements {
        foo: any
    }
}

<foo />; // ok
<bar />; // error

 

在上面的示例中，将正常工做，但将致使错误，由于它还没有在JSX.IntrinsicElements上指定。

注意：您还能够在JSX.IntrinsicElements上指定catch-all字符串索引器，以下所示：

declare namespace JSX {
   interface IntrinsicElements {
       [elemName: string]: any;
   }
}

基于值的要素

基于值的元素只需经过范围内的标识符进行查找。

import MyComponent from "./myComponent";

<MyComponent />; // ok
<SomeOtherComponent />; // error

有两种方法能够定义基于值的元素：

1. 无状态功能组件（SFC）
2. 类组件

由于这两种类型的基于值的元素在JSX表达式中没法区分，因此首先TS尝试使用重载解析将表达式解析为无状态功能组件。 若是该过程成功，则TS完成将表达式解析为其声明。 若是该值没法解析为SFC，则TS将尝试将其解析为类组件。 若是失败，TS将报告错误。

无状态功能组件

顾名思义，该组件被定义为JavaScript函数，其第一个参数是props对象。 TS强制其返回类型必须可分配给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>

由于SFC只是一个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的类型。 所以，在上面的示例中，若是MyComponent是ES6类，则类类型将是该类的构造函数和静态。 若是MyComponent是工厂函数，则类类型将是该函数。

一旦创建了类类型，实例类型就由类类型构造的返回类型或调用签名（不管哪一个存在）的并集决定。 一样，在ES6类的状况下，实例类型将是该类的实例的类型，而且在工厂函数的状况下，它将是从函数返回的值的类型。

class MyComponent {
  render() {}
}

// use a construct signature
var myComponent = new MyComponent();

// element class type => MyComponent
// element instance type => { render: () => void }

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

// use a call signature
var myComponent = MyFactoryFunction();

// element class type => FactoryFunction
// element instance type => { render: () => void }

元素实例类型颇有趣，由于它必须能够赋值给JSX.ElementClass，不然会致使错误。 默认状况下，JSX.ElementClass是{}，但能够对其进行扩充，以将JSX的使用仅限于那些符合正确接口的类型。

declare namespace JSX {
  interface ElementClass {
    render: any;
  }
}

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

<MyComponent />; // ok
<MyFactoryFunction />; // ok

class NotAValidComponent {}
function NotAValidFactoryFunction() {
  return {};
}

<NotAValidComponent />; // error
<NotAValidFactoryFunction />; // error