typescript 使用jsx语法

左手的ㄟ右手 2021-07-24 21:52 500阅读 0赞

(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的子元素的类型信息,它是一个黑盒。