文档章节

TypeScript基础入门之JSX(一)

durban
 durban
发布于 10/19 21:20
字数 1554
阅读 28
收藏 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 版本几乎没有破坏性的变更(这意味着我们可以很轻松地...

局长
07/31
0
29
TypeScript基础入门之JSX(二)

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

durban
10/20
0
0
TypeScript系列1-简介及版本新特性

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

一配
2015/08/15
0
0
TypeScript 2.8引入条件类型

最新发布的TypeScript 2.8包含了若干主要特性和一些问题修复,其中最为重要的是新增了条件类型,开发人员可以根据其他类型的特征为变量选择适当的类型。 条件类型最适合与泛型组合在一起使用...

dotNET跨平台
04/15
0
0
Vue with TypeScript

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

凤晴铃玉
10/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

2135亿背后的双11项目协作怎么玩?

2018天猫双11已经收官,2135亿元的成交额再度刷新纪录,这是一场阿里巴巴经济体的深度协作。 在这个大协作项目中,项目协作难题难以想象:如何保证众多部门、百个核心产品、千个垂直项目、几...

阿里云云栖社区
9分钟前
0
0
Golang MD5 加密使用方法

用法一: str:="123456"data:=[]byte(str)h := md5.New()h.Write(data)output := h.Sum(nil)fmt.Println(fmt.Sprintf("%x",output)) 结果: e10adc3949ba59abbe56e057f20f883e 用......

lwkai
15分钟前
0
0
揭秘 | 双11逆天记录背后的数据库技术革新

每一个数字背后 都需要强大的技术支撑 Higher, Faster, Smarter 是我们不变的追求 技术无边界 创新无止境 原文链接

阿里云官方博客
19分钟前
0
0
深入解析React-redux插件入门

react-redux是使用redux开发react时使用的一个插件,另外插一句,redux不是react的产品,vue和angular中也可以使用redux;下面简单讲解,如何使用react-redux来开发react。 描述 这个插件可以...

前端攻城老湿
23分钟前
0
0
创建定长code

前言 有的时候我们需要基于现有的code进行改造,但是改造的一个前提可能是对于code长度有一定的要求,比如我们做分库分表,准备在code上做文章。 由于历史原因不同的渠道产生的code有几种不同...

春哥大魔王的博客
25分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部