(1)修改tsconfig.json
"jsx": "preserve", 有三种模式
preserve:生成代码中会保留JSX以供后续的转换操作使用(比如:Babel).另外,输出文件会带有.jsx扩展名。
react:会生成React.createElement,在使用前不需要再进行转换操作了,输出文件的扩展名为.js。
react-native:相当于preserve,它也保留了所有的JSX,但是输出文件的扩展名是.js
模式 输入 输出 输出文件扩展名
preserve <div /> <div /> .jsx
react <div /> React.createElement("div") .js
react-native <div /> <div /> .js
(2)创建.tsx后缀文件
因为jsx语法尖括号原因,<>方式的类型断言需要改写成as语法
(3)tsc语法
1、固有元素
(1)对于React,固有元素会生成字符串(React.createElement("div")),然而由你自定义的组件却不会生成(React.createElement(MyComponent))。
(2)传入JSX元素里的属性类型的查找方式不同。 固有元素属性本身就支持,然而自定义的组件会自己去指定它们具有哪个属性。
(3)固有元素总是以一个小写字母开头,基于值的元素总是以一个大写字母开头。
固有元素使用特殊的接口JSX.IntrinsicElements来查找,如果这个接口存在,固有元素的名字需要在JSX.IntrinsicElements接口的属性里查找。
declare namespace JSX {
interface IntrinsicElements {
foo: any
也可以使用索引前面捕获所有
[index: string]: any;
}
}
<foo />; // 正确
<bar />; // 错误
2、基于值的元素(无状态函数组件(SFC),类组件)
基于值的元素会简单的在它所在的作用域里按标识符查找。
import MyComponent from "./myComponent";
<MyComponent />; // 正确
<SomeOtherComponent />; // 错误
无状态组件:
interface FooProp {
className: string;
X: number;
Y: number;
}
function ComponentFoo(prop: FooProp) {
return <div className={prop.className} />;
}
let mytag = <ComponentFoo className={"title"} X={1} Y={2} />;
由于无状态函数组件是简单的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 {
...
}
类组件:
declare namespace JSX {
interface ElementClass {
render: any; 限制JSX的类型以符合相应的接口。
}
}
class MyComponent {
render() { }
}
工厂函数的实例类型为函数返回值类型,即函数若要充当类,必须使用工厂函数返回类型才相同
function MyFactoryFunction() {
return { render: () => { } }
}
<MyComponent />; // 正确
<MyFactoryFunction />; // 正确
class NotAValidComponent { } // 缺少 render
function NotAValidFactoryFunction() {
return {}; // 缺少 render
}
<NotAValidComponent />; // 错误
<NotAValidFactoryFunction />; // 错误
其中:类类型和工厂函数返回类型
class MyComponent {
render() {}
}
// 使用构造签名
var myComponent = new MyComponent();
// 元素类的类型:MyComponent
// 元素实例的类型: { render: () => void }
function MyFactoryFunction() {
return {
render: () => {
}
}
}
// 使用调用签名
var myComponent = MyFactoryFunction();
// 元素类的类型:FactoryFunction
// 元素实例的类型: { render: () => void }
3、类型检查
固有属性:
不合法标识符未被定义但出现时不会被当作一个错误
declare namespace JSX {
interface IntrinsicElements {
foo2: { requiredProp: string; optionalProp?: number }
}
}
<foo2 requiredProp="bar" />; // 正确
<foo2 requiredProp="bar" optionalProp={0} />; // 正确
<foo2 />; // 错误, 缺少 requiredProp
<foo2 requiredProp={0} />; // 错误, requiredProp 应该是字符串
<foo2 requiredProp="bar" unknownProp />; // 错误, unknownProp 不存在
<foo2 requiredProp="bar" some-unknown-prop />; // 正确, `some-unknown-prop`不是个合法的标识符
基于值的元素:
如果未指定JSX.ElementAttributesProperty,那么将使用类元素构造函数或(SFC调用的第一个参数)的类型。
declare namespace JSX {
interface ElementAttributesProperty {
props: any; 指定用来使用的属性名,只能有一个
}
}
class MyComponent {
在元素实例类型上指定属性
props!: { !加了赋值断言,避免在赋值前使用
foo?: string
num: number
}
}
// `MyComponent`的元素属性类型为`{foo?: string}`
<MyComponent foo="bar" num={2} />
(4)子孙类型检查
使用children关键字
如不特殊指定子孙的类型,我们将使用React typings里的默认类型。
declare namespace JSX {
interface ElementChildrenAttribute {
children: {}; // specify children name to use
}
}
在React中:
interface PropsType {
children: JSX.Element
name: string
}
class Component extends React.Component<PropsType, {}> {
render() {
return (
<h2>
{this.props.children}
</h2>
)
}
}
// OK
<Component>
<h1>Hello World</h1>
</Component>
// Error: children is of type JSX.Element not array of JSX.Element
<Component>
<h1>Hello World</h1>
<h2>Hello World</h2>
</Component>
// Error: children is of type JSX.Element not array of JSX.Element or string.
<Component>
<h1>Hello</h1>
World
</Component>
(5)JSX结果类型
默认地JSX表达式结果的类型为any,你可以自定义这个类型,通过指定JSX.Element接口,然而,不能够从接口里检索元素,属性或JSX的子元素的类型信息,它是一个黑盒。
typescript 使用jsx语法
最新推荐文章于 2024-08-30 08:30:33 发布