文档章节

TypeScript基础入门之JSX(一)

durban
 durban
发布于 2018/10/19 21:20
字数 1554
阅读 39
收藏 0

转发 TypeScript基础入门之JSX(一)

介绍

JSX是一种可嵌入的类似XML的语法。 它旨在转换为有效的JavaScript,尽管该转换的语义是特定于实现的。 JSX在React框架中越来越受欢迎,但此后也看到了其他实现。 TypeScript支持嵌入,类型检查和直接编译JSX到JavaScript。

基本用法

要使用JSX,您必须做两件事。 1. 使用.tsx扩展名命名您的文件 2. 启用jsx选项

TypeScript附带三种JSX模式:preserve, react 和 react-native。 这些模式仅影响编译阶段 - 类型检查不受影响。 preserve模式将保持JSX作为输出的一部分,以便由另一个变换步骤(例如Babel)进一步编译。 此外,输出将具有.jsx文件扩展名。 react模式将编译React.createElement,在使用之前不需要经过JSX转换,输出将具有.js文件扩展名。 react-native模式相当于保留,因为它保留了所有JSX,但输出将具有.js文件扩展名。

Mode Input Output Output File Extension
preserve     .jsx
react   React.createElement(“div”) .js
react-native     .js

您可以使用–jsx命令行标志或tsconfig.json文件中的相应选项指定此模式。

注意:标识符React是硬编码的,因此必须使用大写的R使React可用

as 操作符

回想一下如何写一个类型断言:

var foo = <foo>bar;

声明变量bar的类型为foo。 由于TypeScript还对类型断言使用尖括号,因此将其与JSX的语法结合会引入某些解析困难。 因此,TypeScript不允许.tsx文件中的尖括号类型断言。

由于上述语法不能在.tsx文件中使用,因此应使用备用类型断言运算符:as。 可以使用as运算符轻松重写该示例。

var foo = bar as foo;

as运算符在.ts和.tsx文件中均可用,并且行为与尖括号类型断言样式相同。

 

类型检查

为了理解使用JSX进行类型检查,您必须首先了解内部元素和基于值的元素之间的区别。 给定JSX表达式,expr可以引用环境固有的东西(例如DOM环境中的div或span)或者您创建的自定义组件。 这有两个重要原因:

  1. 对于React,内部元素以字符串形式发出(React.createElement(“div”)),而您创建的组件则不是(React.createElement(MyComponent))。
  2. 应该以不同的方式查找在JSX元素中传递的属性的类型。内在元素属性本质上应该是已知的,而组件可能想要指定它们自己的属性集。

TypeScript使用与React相同的约定来区分它们。内部元素始终以小写字母开头,而基于值的元素始终以大写字母开头。

内在元素 在特殊接口JSX.IntrinsicElements上查找内部元素。 默认情况下,如果未指定此接口,则会执行任何操作,并且不会对内部元素进行类型检查。 但是,如果存在此接口,则将内部元素的名称作为JSX.IntrinsicElements接口上的属性进行查找。 例如:

declare namespace JSX {
    interface IntrinsicElements {
        foo: any
    }
}

<foo />; // ok
<bar />; // error

 

在上面的示例中,将正常工作,但将导致错误,因为它尚未在JSX.IntrinsicElements上指定。

注意:您还可以在JSX.IntrinsicElements上指定catch-all字符串索引器,如下所示:

declare namespace JSX {
   interface IntrinsicElements {
       [elemName: string]: any;
   }
}

基于值的要素

基于值的元素只需通过范围内的标识符进行查找。

import MyComponent from "./myComponent";

<MyComponent />; // ok
<SomeOtherComponent />; // error

有两种方法可以定义基于值的元素:

  1. 无状态功能组件(SFC)
  2. 类组件

因为这两种类型的基于值的元素在JSX表达式中无法区分,所以首先TS尝试使用重载解析将表达式解析为无状态功能组件。 如果该过程成功,则TS完成将表达式解析为其声明。 如果该值无法解析为SFC,则TS将尝试将其解析为类组件。 如果失败,TS将报告错误。

无状态功能组件

顾名思义,该组件被定义为JavaScript函数,其第一个参数是props对象。 TS强制其返回类型必须可分配给JSX.Element。

interface FooProp {
  name: string;
  X: number;
  Y: number;
}

declare function AnotherComponent(prop: {name: string});
function ComponentFoo(prop: FooProp) {
  return <AnotherComponent name={prop.name} />;
}

const Button = (prop: {value: string}, context: { color: string }) => <button>

因为SFC只是一个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 {
  ...
}

类组件

可以定义类组件的类型。 但是,要这样做,最好理解两个新术语:元素类类型和元素实例类型。

给定,元素类类型是Expr的类型。 因此,在上面的示例中,如果MyComponent是ES6类,则类类型将是该类的构造函数和静态。 如果MyComponent是工厂函数,则类类型将是该函数。

一旦建立了类类型,实例类型就由类类型构造的返回类型或调用签名(无论哪个存在)的并集决定。 同样,在ES6类的情况下,实例类型将是该类的实例的类型,并且在工厂函数的情况下,它将是从函数返回的值的类型。

class MyComponent {
  render() {}
}

// use a construct signature
var myComponent = new MyComponent();

// element class type => MyComponent
// element instance type => { render: () => void }

function MyFactoryFunction() {
  return {
    render: () => {
    }
  }
}

// use a call signature
var myComponent = MyFactoryFunction();

// element class type => FactoryFunction
// element instance type => { render: () => void }

元素实例类型很有趣,因为它必须可以赋值给JSX.ElementClass,否则会导致错误。 默认情况下,JSX.ElementClass是{},但可以对其进行扩充,以将JSX的使用仅限于那些符合正确接口的类型。

declare namespace JSX {
  interface ElementClass {
    render: any;
  }
}

class MyComponent {
  render() {}
}
function MyFactoryFunction() {
  return { render: () => {} }
}

<MyComponent />; // ok
<MyFactoryFunction />; // ok

class NotAValidComponent {}
function NotAValidFactoryFunction() {
  return {};
}

<NotAValidComponent />; // error
<NotAValidFactoryFunction />; // error

© 著作权归作者所有

共有 人打赏支持
durban
粉丝 99
博文 568
码字总数 184197
作品 0
崇明
后端工程师
私信 提问
TypeScript 3.0 正式发布:引入“项目引用”新概念

北京时间7月31日,微软宣布推出 TypeScript 3.0 正式版。 TypeScript 3.0 是一个新的里程碑。官方表示,尽管版本号是一个大变化,但 3.0 版本几乎没有破坏性的变更(这意味着我们可以很轻松地...

局长
2018/07/31
6.2K
32
TypeScript系列1-简介及版本新特性

简介 随着PC端快速向移动端迁移,移动(体验)优先的概念也越来越响。由于ReactJS目前移动端仅仅支持iOS,因此移动端Web开发框架只能选择: AngularJS/Angula2 + Ionic框架 + Cordova。想要学...

一配
2015/08/15
0
0
TypeScript基础入门 - 函数 - this(二)

转载 TypeScript基础入门 - 函数 - this(二) 项目实践仓库 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能直接运行看到输出的结果。 后面自己在练习的时候可以这样使用 ...

durban
2018/08/19
0
0
TypeScript基础入门之JSX(二)

转发 TypeScript基础入门之JSX(二) 属性类型检查 键入检查属性的第一步是确定元素属性类型。 内在元素和基于价值的元素之间略有不同。 对于内部元素,它是JSX.IntrinsicElements上的属性类型...

durban
2018/10/20
0
0
Vue with TypeScript

最近尝试了一下 TypeScript,试着把一个 Vue 项目改成了 TypeScript 的,感觉还不错。 目前 Vue 和 TypeScript 的配合还不算很完美,Vuex 和 TypeScript 的配合挺糟糕的,尝试需要谨慎,如果...

凤晴铃玉
2018/10/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

c++ 定义新的异常

#include <iostream> #include <exception> using namespace std; struct MyException : public exception { const char * what () const throw () { return "C++ Exception"; } }; int main......

天王盖地虎626
28分钟前
0
0
PDMan-2.1.1 发布:用心开源,免费的国产数据库建模工具(春节前最后一个版本)

一、软件介绍 PDMan 是一款开源免费的数据库模型建模工具,是PowerDesigner之外另一种更好的选择。支持Windows,Mac,Linux等操作系统,具有上手容易,使用简单的特点。 2018年获得码云GVP (Gi...

O龙猫O
53分钟前
10
0
OSChina 周二乱弹 —— 以后我偷小鱼干养你

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @庞巴哥 :只有这节奏瞬间变得轻松。。。。。。。。。分享Talking Eyes的单曲《In the sun (Extended Version)》: 《In the sun (Extended Ve...

小小编辑
今天
82
5
多表查询

第1章 多表关系实战 1.1 实战1:省和市  方案1:多张表,一对多  方案2:一张表,自关联一对多 1.2 实战2:用户和角色 (比如演员和扮演人物)  多对多关系 1.3 实战3:角色和权限 (比如...

stars永恒
今天
9
0
求推广,德邦快递坑人!!!!

完全没想好怎么来吐槽自己这次苦逼的德邦物流过程了,只好来记一个流水账。 从寄快递开始: 2019年1月15日从 德邦物流 微信小app上下单,截图如下: 可笑的是什么,我预约的是17号上门收件,...

o0无忧亦无怖
昨天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部