TS-JSX

基本用法

• 1.文件命名使用.tsx后缀
• 2.启用jSX选项(preserve，react和react-native):
  • 可通过在命令行里使用–jsx标记
  • 或tsconfig.json里的选项来指定模式

模式	输入	输出	输出文件扩展名
preserve	<div />	<div />	.jsx
react	<div />	React.createElement(“div”)	.js
react-native	<div />	<div />	.js

• 注意：React标识符是写死的硬编码，所以必须保证React是可用的。

as操作符:在.ts和.tsx里都可用

• 并且与尖括号类型断言行为是等价的

类型检查

理解固有元素与基于值的元素之间的区别:

• 对于React，固有元素会生成字符串（React.createElement(“div”)），然而自定义的组件却不会
• 传入JSX元素里的属性类型的查找方式不同。固有元素属性本身就支持，然而自定义的组件会自己去指定它们具有哪个属性。

固有元素:

• 使用JSX.IntrinsicElements来查找

  interface IntrinsicElements { 
  	foo: any 
  } 
  // 只有<foo /> 才符合要求

基于值的元素: 在所在作用域里按标识符查找

import MyComponent from "./myComponent"
<MyComponent />

• 无状态函数组件(SFC):

  • 第一个参数是prop对象,ts会强制它的返回值给JSX.Element

    interface ClickableProps { children: JSX.Element[] | JSX.Element }
    interface SideProps extends ClickableProps { side: JSX.Element | string; }
    function MainButton(prop: SideProps): JSX.Element {}

• 类组件:

  • 元素类的类型:
    • 如 元素类的类型为Expr的类型，如果Expr是个工厂函数，类类型就是这个函数
  • 元素的实例类型
    • 在es6类的情况下,实例类型为这个类的实例的类型，如果是工厂函数，实例类型就是这个函数返回值类型
    • 类类型：实例类型就是类类型调用签名的返回值与构造签名的联合类型
    • 必须赋值给JSX.ElementClass或抛出一个错误。默认的JSX.ElementClass为{}

属性类型检查

• 对于固有元素，是JSX.IntrinsicElements属性的类型
• 对于基于值得元素，取决于JSX.ElementAttributesProperty
• 元素属性类型用于的JSX里进行属性的类型检查。支持可选属性和必须属性。

  declare namespace JSX {
  	interface IntrinsicElements {
  		foo: { requiredProp: string; optionalProp?: number }
  	}
  }
  <foo requiredProp="bar" />

子孙类型检查：

• children是元素属性(attribute)类型的一个属性(property)
• 利用JSX.ElementChildrenAttribute来决定children名
• 指定方式：

  interface PropType {
  	children: JSX.Element
  	name: string
  }
  const Component = memo<PropType>((props) => {
  	return <div>{children}</div>
  })

JSX结果类型：默认地JSX表达式结果的类型为any

嵌入的表达式：JSX允许使用{}标签来内嵌表达式

React整合：使用React类型定义

工厂函数

• jsx: react编译选项使用的工厂函数是可配置的，使用jsxFactory命令行选项或内联的@jsx注释指令在每个文件上设置。
• 如果工厂函数使用React.createElement定义（默认），编译器会先检查React.JSX，之后才检查全局的JSX。