TypeScript JSX_jsx支持-优快云博客

本文链接：https://blog.youkuaiyun.com/fishmemory7sec/article/details/141034897

介绍

在线的免费的代码转换器工具：可以把HTML 代码移植到 JSX 语法。还支持很多其他的转换。

JSX 是 ECMAScript 的一种类似 XML 的语法扩展，没有任何定义的语义。它不打算由引擎或浏览器实现。它并不是将 JSX 纳入 ECMAScript 规范本身的提议。它旨在供各种预处理器（转译器）使用这些标记转换为标准 ECMAScript。

JSX 是一种在 JavaScript 中编写类似 XML 结构来描述用户界面的语法。

TypeScript支持内嵌，类型检查以及将JSX直接编译为JavaScript。

基本用法

想要使用JSX必须做两件事：

给文件一个.tsx扩展名：
- 向开发工具和编译器表明该文件中可能包含 JSX 语法。
启用jsx选项
- 启用 jsx 选项通常是在 tsconfig.json 文件中进行配置。

TypeScript具有三种JSX模式：

preserve：保留 JSX 为原始的样子，不进行转换。
- 保留 JSX 为原始的样子，不进行转换。
- 输出文件会带有.jsx扩展名。
react：这是在使用 React 框架时常用的选项，会对 JSX 进行相应的转换。
- 生成React.createElement ，在使用前不需要再进行转换操作。
- 输出文件的扩展名为.js。
react-native：用于 React Native 开发。
- 保留 JSX 为原始的样子，不进行转换。
- 输出文件的扩展名为.js。

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

这些模式只在代码生成阶段起作用，类型检查并不受影响。

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

以下是一个简单的 tsconfig.json 配置示例，启用了 jsx 选项为 react：

{
   
  "compilerOptions": {
   
    "jsx": "react"
  }
}

在具有 .tsx 扩展名的文件中，就可以自由地使用 JSX 语法进行开发了。

JSX 中的属性设置与 HTML 类似，但需要使用驼峰命名法。比如在 HTML 中是 class 属性，在 JSX 中则是 className 。

const element = <div className="my-class">Content</div>;

可以通过使用引号""，来将属性值指定为字符串字面量：

const element = <div className="my-class" title="This is a title">Content</div>;

className 的值 my-class 和 title 的值 This is a title 都是字符串字面量。
这种方式适用于属性值明确为固定字符串的情况。

如果属性值是动态计算的结果或者是变量，使用{}直接将变量或表达式嵌入到 JSX 中：

const titleText = 'Dynamic Title';
const element = <div className="my-class" title={
   titleText}>Content</div>;

JSX 允许在模板中插入数组，数组会自动展开所有成员：

let arr = [
  <p>111</p>,
  <p>222</p>,
];
const content = (
  <div>{
   arr}</div>
);

JSX 支持条件渲染和循环渲染。
条件渲染：

const isLoggedIn = true;
const element = (
  <div>
    {
   isLoggedIn? <p>Welcome back!</p> : <p>Please log in.</p>}
  </div>
);

循环渲染：

const items = ['Apple', 'Banana', 'Orange'];
const element = (
  <ul>
    {
   items.map(item => <li>{
   item}</li>)}
  </ul>
);

JSX 的注释代码需要写在花括号 {} 中：

const content = (
  {
   /*注释...*/}
  <h1>hello world</h1>
);

`as`操作符

在 TypeScript 的 JSX 中，as 操作符通常用于类型断言。

TypeScript也使用尖括号<>来表示类型断言：

let foo = <foo>bar;

这句代码断言bar变量是foo类型的。

TypeScript在.tsx文件里禁用了使用尖括号<>的类型断言。
因为在 TypeScript 的 JSX 环境中（例如 .tsx 文件），尖括号<>有特殊用途。

使用 as 操作符：

let foo = bar as foo;

JSX 环境中使用 as 操作符：

interface CustomButtonProps {
   
  label: string;
  onClick: () => void;
}
const button = (
  <button
    as={
   CustomButton}
    label="Click Me"
    onClick={
   () => console.log('Clicked!')}
  />
);