如何建设免费网站,flash中文网站模板,教育机构跑路,怎样做手机网站建设介绍 在线的免费的代码转换器工具#xff1a;可以把HTML 代码移植到 JSX 语法。还支持很多其他的转换。 JSX 是 ECMAScript 的一种类似 XML 的语法扩展#xff0c;没有任何定义的语义。它不打算由引擎或浏览器实现。它并不是将 JSX 纳入 ECMAScript 规范本身的提议。它旨在供…介绍 在线的免费的代码转换器工具可以把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。
模式输入输出输出文件扩展名preservediv /div /.jsxreactdiv /React.createElement(div).jxreact-nativediv /div /.jx
这些模式只在代码生成阶段起作用类型检查并不受影响。
注意React标识符是写死的硬编码所以你必须保证React大写的R是可用的。
以下是一个简单的 tsconfig.json 配置示例启用了 jsx 选项为 react
{compilerOptions: {jsx: react}
}在具有 .tsx 扩展名的文件中就可以自由地使用 JSX 语法进行开发了。
JSX 中的属性设置与 HTML 类似但需要使用驼峰命名法。比如在 HTML 中是 class 属性在 JSX 中则是 className 。
const element div classNamemy-classContent/div;可以通过使用引号来将属性值指定为字符串字面量
const element div classNamemy-class titleThis is a titleContent/div;className 的值 my-class 和 title 的值 This is a title 都是字符串字面量。 这种方式适用于属性值明确为固定字符串的情况。
如果属性值是动态计算的结果或者是变量使用{}直接将变量或表达式嵌入到 JSX 中
const titleText Dynamic Title;
const element div classNamemy-class title{titleText}Content/div;JSX 允许在模板中插入数组数组会自动展开所有成员
let arr [p111/p,p222/p,
];
const content (div{arr}/div
);JSX 支持条件渲染和循环渲染。 条件渲染
const isLoggedIn true;
const element (div{isLoggedIn? pWelcome back!/p : pPlease log in./p}/div
);循环渲染
const items [Apple, Banana, Orange];
const element (ul{items.map(item li{item}/li)}/ul
);JSX 的注释代码需要写在花括号 {} 中
const content ({/*注释...*/}h1hello world/h1
);as操作符
在 TypeScript 的 JSX 中as 操作符通常用于类型断言。
TypeScript也使用尖括号来表示类型断言
let foo foobar;这句代码断言bar变量是foo类型的。
TypeScript在.tsx文件里禁用了使用尖括号的类型断言。 因为在 TypeScript 的 JSX 环境中例如 .tsx 文件尖括号有特殊用途。
使用 as 操作符
let foo bar as foo;JSX 环境中使用 as 操作符
interface CustomButtonProps {label: string;onClick: () void;
}
const button (buttonas{CustomButton}labelClick MeonClick{() console.log(Clicked!)}/
);as操作符在.ts和.tsx里都可用并且与尖括号类型断言行为是等价的。
类型检查
TypeScript 对 JSX 的类型检查涵盖了元素类型、属性类型、子元素类型以及基于值的元素类型等多个方面通过严格的类型检查可以在开发过程中及早发现类型不匹配的问题提高代码的质量和可维护性。
元素类型检查
元素类型检查分为固有元素、和自定义组件。
固有元素内置的 HTML 元素
在 TypeScript 中对 JSX 固有元素即内置的 HTML 元素的检查主要包括以下几个方面
TypeScript 会检查使用的固有元素名称是否正确。 必须使用正确的 HTML 元素名称如 div、p、span 等。使用错误或不存在的元素名称会导致编译错误。
// 以下使用是合法的
input typetext placeholderEnter text /// 以下使用会引发错误
myInvalidElement / // 不存在这样的固有元素对于固有元素的属性TypeScript 会根据 HTML 规范进行类型检查。 每个固有元素都有一组合法的属性并且这些属性的值必须符合相应的类型。
示例img srcimage.jpg altAn image / 中src 属性必须是一个有效的图像路径或 URLalt 属性必须是一个字符串。
const element2 img srcvalid-image.jpg altValid image /; // 合法
const element4 img src{123} altInvalid /; // 不合法 src 应该是字符串而不是数字自定义组件
对于自定义组件必须确保组件已经正确定义并且在使用的作用域内可访问。TypeScript 会检查传递给自定义组件的属性是否符合组件定义的属性类型。
例如定义一个名为 MyComponent 的自定义组件接收一个 name 属性类型为字符串
interface MyComponentProps {name: string;
}function MyComponent({ name }: MyComponentProps) {return divHello, {name}!/div;
}使用时
// 正确的使用
const element5 MyComponent nameJohn /;// 错误的使用会产生编译错误
const element6 MyComponent name{123} /; // name 应该是字符串而不是数字基于值的元素类型检查
在 JSX 中基于值的元素可能是无状态函数组件或类组件。TypeScript 会首先尝试将表达式作为无状态函数组件进行解析如果解析成功就完成表达式到其声明的解析操作。如果按照无状态函数组件解析失败会继续尝试以类组件的形式进行解析。如果依旧失败就会输出一个错误。
无状态函数组件SFC
组件被定义成JavaScript函数它的第一个参数是props对象。 TypeScript会强制它的返回值可以赋值给JSX.Element。
function MyComponent({ name }: { name: string }) {return divHello, {name}!/div;
}在使用时可以直接在 JSX 表达式中通过标识符引用这个组件
MyComponent nameJohn /由于无状态函数组件是简单的JavaScript函数所以可以利用函数重载
// ClickableProps 接口定义了一个名为 children 的属性可以是单个 JSX.Element 或者是 JSX.Element 的数组。
interface ClickableProps {children: JSX.Element[] | JSX.Element
}// HomeProps 接口继承自 ClickableProps并添加了一个名为 home 的属性类型为 JSX.Element。
interface HomeProps extends ClickableProps {home: JSX.Element;
}// SideProps 接口也继承自 ClickableProps添加了一个名为 side 的属性类型是 JSX.Element 或者 字符串。
interface SideProps extends ClickableProps {side: JSX.Element | string;
}函数实现示例
function MainButton(prop: HomeProps): JSX.Element;
function MainButton(prop: SideProps): JSX.Element {if (home in prop) {// 处理 HomeProps 类型的参数return button{prop.home}/button;} else if (side in prop) {// 处理 SideProps 类型的参数return (button{typeof prop.side string ? prop.side : prop.side}/button);}return null;
}MainButton 函数被重载为接受两种不同类型的参数分别是 HomeProps 类型和 SideProps 类型并且返回值都是 JSX.Element。
类组件
当定义类组件时可以分别考虑元素类的类型和元素实例的类型。
元素类的类型和实例类型的概念
对于 JSX 表达式 Expr /元素类的类型就是 Expr 的类型。如果 Expr 是一个 ES6 类那么类类型包括类的构造函数和静态部分。如果 Expr 是一个工厂函数类类型就是这个函数本身。一旦确定了类类型实例类型由类构造器或调用签名如果存在的话的返回值的联合构成。对于 ES6 类实例类型是这个类的实例的类型对于工厂函数实例类型是这个函数的返回值类型。
示例
class MyComponent {render() {}
}// 使用构造签名
var myComponent new MyComponent();// 元素类的类型 MyComponent
// 元素实例的类型 { render: () void }function MyFactoryFunction() {return {render: () {}}
}// 使用调用签名
var myComponent MyFactoryFunction();// 元素类的类型 FactoryFunction
// 元素实例的类型 { render: () void }示例中的类型分析
在给出的示例中对于 MyComponent 类 元素类的类型是 MyComponent也就是这个类本身。元素实例的类型是 { render: () void }因为这个类有一个 render 方法。 对于 MyFactoryFunction 元素类的类型是这个工厂函数本身。元素实例的类型也是 { render: () void }因为这个函数返回一个对象该对象有一个 render 方法。
元素的实例类型必须赋值给JSX.ElementClass或抛出一个错误。
JSX.ElementClass 的作用
默认情况下JSX.ElementClass 为 {}这意味着在没有自定义时JSX 元素的实例类型可以是任何对象。可以通过扩展 JSX.ElementClass 来限制 JSX 的类型以符合相应的接口。当定义了特定的 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 /; // 错误在代码中通过 declare namespace JSX 并定义 interface ElementClass 为 { render: any; }这就要求 JSX 元素的实例必须有一个 render 方法。
MyComponent 和 MyFactoryFunction 是有效的因为它们创建的对象都有 render 方法符合 JSX.ElementClass 的要求。
NotAValidComponent 和 NotAValidFactoryFunction 是无效的因为它们创建的对象没有 render 方法不满足 JSX.ElementClass 的要求所以在 JSX 中使用时会产生错误。
通过理解元素类的类型、实例类型以及 JSX.ElementClass 的作用可以更好地控制和规范在 TypeScript 中使用 JSX 时的组件类型提高代码的类型安全性和可维护性。
属性类型检查
属性类型检查的第一步是确定元素属性类型。 这在固有元素和基于值的元素之间稍有不同。
固有元素的属性类型检查
对于固有元素其属性类型由 JSX.IntrinsicElements 接口定义。
declare namespace JSX {interface IntrinsicElements {foo: { bar?: boolean };}
}// foo的元素属性类型为{bar?: boolean}
foo bar /;foo 元素的属性类型被明确为可以有一个可选的 bar 属性类型为布尔值。
固有元素的属性类型检查
确定属性类型的方式
对于基于值的元素如类组件或无状态函数组件属性类型的确定稍微复杂一些。它取决于先前确定的在元素实例类型上的某个属性的类型而具体使用哪个属性来确定类型取决于 JSX.ElementAttributesProperty 的定义。如果未指定 JSX.ElementAttributesProperty在 TypeScript 2.8 及以后版本中将使用类元素构造函数或无状态函数组件调用的第一个参数的类型。
declare namespace JSX {interface ElementAttributesProperty {props; // 指定用来使用的属性名}
}class MyComponent {props: {foo?: string;};
}// MyComponent的元素属性类型为{foo?: string}
MyComponent foobar /;支持可选属性和必须属性 元素属性类型可以定义可选属性和必须属性。 示例
declare namespace JSX {interface IntrinsicElements {foo: { requiredProp: string; optionalProp?: number };}
}foo requiredPropbar /; // 正确
foo requiredPropbar optionalProp{0} /; // 正确
foo /; // 错误, 缺少 requiredProp
foo requiredProp{0} /; // 错误, requiredProp 应该是字符串
foo requiredPropbar unknownProp /; // 错误, unknownProp 不存在
foo requiredPropbar some-unknown-prop /; // 正确, some-unknown-prop不是个合法的标识符在这个例子中foo 元素有一个必须的 requiredProp 属性类型为字符串还有一个可选的 optionalProp 属性类型为数字。
额外属性和泛型类型
JSX.IntrinsicAttributes 接口 JSX.IntrinsicAttributes 接口可以用来指定额外的属性这些属性通常不会被组件的 props 或 arguments 使用。例如在 React 中key 属性就是通过这种方式指定的。
declare namespace JSX {interface IntrinsicAttributes {// 添加 data-testid 属性作为额外属性data-testid?: string;}
}function MyComponent() {return div data-testidmy-component-test-idHello World/div;
}const AnotherComponent () {return p data-testidanother-component-test-idAnother Component/p;
};在示例中通过JSX.IntrinsicAttributes接口定义了一个可选的data-testid属性这个属性可以在任何 JSX 元素上使用而不需要在每个组件的 props 中明确声明。
JSX.IntrinsicClassAttributesT 泛型类型。
假设我们有一个类组件需要支持 React 的ref属性来获取对 DOM 元素的引用。我们可以使用JSX.IntrinsicClassAttributesT泛型类型来实现。
import React, { Component } from react;interface MyComponentProps {title: string;
}class MyClassComponent extends ComponentMyComponentProps {render() {return div{this.props.title}/div;}
}declare namespace JSX {interface IntrinsicClassAttributesMyClassComponent {// 允许 ref 属性ref?: React.RefMyClassComponent;}
}现在可以在使用MyClassComponent时传递ref属性
const ref React.createRefMyClassComponent();
MyClassComponent titleMy Title ref{ref} /;在这个例子中使用JSX.IntrinsicClassAttributesT泛型类型为MyClassComponent类添加了一个可选的ref属性这样在使用这个类组件时就可以方便地获取对组件实例的引用。
延展操作符的使用
延展操作符可以方便地将一个对象的属性展开到 JSX 元素中。 示例
let props { requiredProp: bar };
foo {...props} /; // 正确let badProps {};
foo {...badProps} /; // 错误JSX.IntrinsicElements 接口的作用
JSX.IntrinsicElements 接口用于定义和查找固有元素内置 HTML 元素的类型信息从而进行类型检查。
JSX.IntrinsicElements 接口定义了各种固有元素及其可接受的属性和属性类型。
当在 TypeScript 中处理 JSX 时如果没有明确指定 JSX.IntrinsicElements 接口不对固有元素进行类型检查。这时使用了不正确或不被支持的属性也可能不会在编译时产生类型错误。
如果定义了 JSX.IntrinsicElements 接口对于每个固有元素的名称及其可接受的属性都需要在这个接口中进行查找和匹配。
例如如果定义了如下的 JSX.IntrinsicElements 接口
interface CustomIntrinsicElements {button: {disabled: boolean;onClick: (event: MouseEvent) void;};
}declare global {namespace JSX {interface IntrinsicElements extends CustomIntrinsicElements {}}
}在上述示例中为 button 元素自定义了其 disabled 属性必须是布尔类型onClick 属性必须是特定类型的函数。 customStr是自定义的属性必须是字符串类型。 这样当在代码中使用 button 元素时如果属性的类型不符合定义TypeScript 就会在编译时给出错误提示。
通过扩展 JSX.IntrinsicElements 可以添加自定义的固有元素或者修改已有固有元素的默认行为
interface CustomIntrinsicElements {// 添加自定义固有元素myCustomElement: {customProp1: string;customProp2: number;};// 修改已有固有元素的默认行为button: {// 在这里添加、修改或覆盖按钮元素的属性类型disabled: boolean;customButtonProp: string; };
}declare global {namespace JSX {interface IntrinsicElements extends CustomIntrinsicElements {}}
}在组件中使用自定义或修改后的固有元素
function MyComponent() {return (divmyCustomElement customProp1Value1 customProp2{123} /button disabled{true} customButtonPropCustom Button Prop Value Click Me/button/div);
}也可以在JSX.IntrinsicElements上指定一个用来捕获所有字符串索引
declare namespace JSX {interface IntrinsicElements {[elemName: string]: any;}
}这段 TypeScript 代码通过 declare namespace JSX 声明了一个与 JSX 相关的命名空间。在这个命名空间中定义了 IntrinsicElements 接口。 IntrinsicElements 接口中[elemName: string]: any; 这部分表示对于任意字符串形式的元素名称elemName其对应的属性类型可以是任意类型any。
使用
function MyComponent() {return customElement someRandomPropvalue /;
}不会导致类型错误因为对于任何未明确定义的固有元素其属性类型被允许为任意类型。
JSX.IntrinsicAttributes
JSX.IntrinsicAttributes用于表示 JSX 元素的内置属性类型。 当使用 JSX 语法时TypeScript 需要确定每个元素的属性类型。
对于固有元素内置的 HTML 元素TypeScript 内置了对这些元素常见属性的类型定义。对于自定义组件JSX.IntrinsicAttributes 可以用来描述可能传递给组件的通用属性这些属性不是由组件明确定义的属性而是类似 style、className、key 等在 JSX 中经常使用的属性。
示例
interface MyComponentProps {customProp: string;
}function MyComponent({customProp
}: MyComponentProps JSX.IntrinsicAttributes) {return (div className{/*...*/} style{/*...*/}{customProp}/div);
}在示例中MyComponent 组件除了接收自定义的 customProp 属性外还可以接收 JSX.IntrinsicAttributes 中定义的那些通用属性如 className 和 style。 如果不使用 JSX.IntrinsicAttributes当尝试在使用 MyComponent 时传递 className 或 style 等属性时TypeScript 会报错因为这些属性没有在 MyComponentProps 接口中定义。
JSX.IntrinsicAttributes 提供了一种方便的方式来处理在 JSX 中传递给组件的通用属性确保类型安全。
子孙类型检查
从TypeScript 2.3开始引入了children类型检查。
在 JSX 中children 是元素属性类型中的一个特殊属性。当在 JSX 结构中为一个组件或元素指定子元素时这些子元素会被插入到 children 属性中进行处理。
JSX.ElementAttributesProperty用于决定组件接收的属性名称。例如可以通过自定义这个属性来指定不同的属性名来接收传入的属性值。 JSX.ElementChildrenAttribute用于决定 children 属性的名称。默认情况下children 是一个特殊的属性用于接收子元素。通过这个属性可以自定义 children 的名称。
JSX.ElementChildrenAttribute应该被声明在单一的属性(property)里。
declare namespace JSX {interface ElementChildrenAttribute {customChildrenName: JSX.Element[];}
}function MyComponent({ customChildrenName }: { customChildrenName: JSX.Element[] }) {return div{customChildrenName}/div;
}const childElement pChild Element/p;const jsxExpression MyComponent customChildrenName{[childElement]} /;在这个示例中我们自定义了 children 的名称为 customChildrenName并在 MyComponent 组件中接收这个属性。在使用 MyComponent 时我们将一个子元素通过 customChildrenName 属性传递给组件。
通过这种方式可以更加灵活地控制组件接收子元素的方式并且通过类型检查确保子元素的类型正确。
子元素类型检查
单个子元素
如果一个组件只接收一个子元素可以明确指定子元素的类型。 示例
interface SingleChildComponentProps {// child类型为 JSX.Elementchild: JSX.Element;
}
//
function SingleChildComponent({ child }: SingleChildComponentProps) {return div{child}/div;
}使用时
const childElement pChild Element/p;// 正确的使用
const element14 SingleChildComponent child{childElement} /;// 错误的使用会产生编译错误
const element15 SingleChildComponent child{123} /; // child 应该是 JSX.Element 类型多个子元素
如果一个组件接收多个子元素可以使用数组类型。 示例
interface MultipleChildrenComponentProps {// children 类型为 JSX.Element[]children: JSX.Element[];
}function MultipleChildrenComponent({ children }: MultipleChildrenComponentProps) {return div{children}/div;
}使用时
const childElements [pChild 1/p, pChild 2/p];// 正确的使用
const element16 MultipleChildrenComponent children{childElements} /;// 错误的使用会产生编译错误
const element17 MultipleChildrenComponent children{123} /; // children 应该是 JSX.Element 类型的数组JSX结果类型
JSX表达式结果的类型 默认为any。 可以通过指定JSX.Element接口自定义JSX表达式结果的类型。 不能够从接口里检索元素属性或JSX的子元素的类型信息。 它是一个黑盒。
