EcmaScript 6，TypeScript 和 JSX

EcmaScript 6

Tabris.js 2支持所有ES5和大多数ES6 / ES7（又名ES2015 / ES2016）特性，并且无需像Babel这样的编译器。包括：

Arrow functions
Classes
const
Default parameters (除了iOS 9)
Destructuring assignment
Exponentiation operator)(除了iOS 9)
for…of
Generators (除了9)
Iterators
let
Map
Methods
Object property shorthands
Promise
Reflect (除了iOS 9)
Rest parameters (除了iOS 9)
Proxy (除了iOS 9)
set and get literals
Set
Spread operator
Symbol
Template literals
Typed Arrays and ArrayBuffer
WeakMap
WeakSet
不支持的是（不使用编译器时）：
async/await: 使用 then 替代。
import/export: 使用 require 方法和 exports 对象替代。
TypeScript

Tabris.js 2针对TypeScript 2进行了优化。TypeScript是一个类型安全的JavaScript/EcmaScript超集，并且还支持ES6模块语法 (import 和 export 语句) 和 async/await。可以在typescriptlang.org上找到有关TypeScript的完整指南。对于IDE，我们推荐支持tslint扩展名的Visual Studio Code，但也有很多其它合适的TypeScript IDE。

在执行之前，必须将“TypeScript”文件“编译”为JavaScript。当使用tabris init命令生成新的Tabris.js应用程序时，已经包含了编译器，因此不需要额外的安装步骤。在给定的选项中，只需选择TypeScript App即可。应用生成后，执行npm start，以JavaScript的形式向你的Tabris开发者app提供TypeScript代码。在Visual Studio Code中，你也可以使用预先配置的启动任务。

只要任务仍在运行，你的TypeScript代码（src中的任何.ts文件）的更改将自动由TypeScript编译器检测。不需要重新启动。

注意类型安全

在TypeScript中，并不是所有的API，甚至不是所有的Tabris.js API都是完全类型安全的。因此建议遵循以下一般准则：

转换：避免显式转换，因为它可以静默失败。使用type guards替代。

隐式的“any”类型：在TypeScript中any类型的值本质上和JavaScript值相同。编译器将接受对该值的任何操作，包括将其分配给确定类型的变量。如果你不给变量、字段或参数指定类型，并且不能通过赋值来推断，则可能会出现隐式的any类型。 始终给出函数参数的类型。字段和变量只有在声明时赋了值才是安全的。

控件属性访问：不要使用widget.set(key, value) 或 widget.get(key)。而是直接像这样访问属性：widget.key = value。你还可以安全地使用属性对象：比如widget.set({key: value}) 和 new Widget({key: value})。

控件事件处理：不要使用widget.on(event, handler)。而是使用widget.on({event: handler})。

控件apply方法：仅使用widget.apply设置基础Widget类的属性，比如layoutData。

选择器API 和 WidgetCollection：默认情况下，控件的find、children、sibling方法返回一个“混合的”WidgetCollection。这意味着你必须执行类型检查和转换以安全地从集合中获取控件，你也可以使用控件类（构造函数）作为选择器，这会使TypeScript“得到”的集合只包含该类型的实例。在这种情况下，不需要转换。例如： widget.children(Button).first('.myButton')返回一个button控件（或者 null），而不会是其他内容。应该注意的是，这种WidgetCollection的set方法仍然不是类型感知的。你可以使用forEach方法来安全地为集合中的所有控件设置属性。

NPM模块：tabris模块是自动类型安全的，但不是所有可以通过npm安装的模块都是如此。你可能需要为每个安装的npm模块手动安装声明文件。

接口

在TypeScript中使用tabris模块导出tabris API使用的接口。它们是：

属性/参数类型：Image、Color、Font、LayoutData、Bounds、Transformation、margin、dimension、offset、BoxDimensions、 ImageData、Selector 和 AnimationOptions
通用事件对象：EventObject，其中T是目标事件属性的类型。用于没有特定类型属性的事件。也是所有其他事件接口的基础。
change事件对象：PropertyChangedEvent，事件属性和U是value属性的类型。用于所有与命名方案{propertyName}Changed匹配的事件，比如BackgroundChanged。
特殊事件对象：所有其他事件使用遵循命名方案{TargetType}{EventName}Event的特定接口，比如PickerSelectEvent。你可能想要使用这些来定义不使用参数解构的监听器。
属性映射：这些是set方法和控件构造函数使用的接口。你可能希望在扩展控件类时使用它们来定义自己的属性映射。它们遵循命名方案{TargetType}Properties，比如CompositeProperties。
监听器映射：这些是on 和 off方法使用的接口。你可能希望在扩展控件类时使用它们来定义自己的监听器映射。它们遵循命名方案{TargetType}Events比如CompositeEvents。
JSX

JSX是JavaScript / TypeScript语法的扩展，可以将代码与类似XML的声明进行混合。Tabris 2支持使用类型安全的JSX，在任何基于TypeScript的项目中开箱即用。你需要做的只是命名你的文件为.tsx而不是.ts。然后，你就可以使用JSX表达式创建控件了。例如

ui.contentView.append(
  <composite left={0} top={0} right={0} bottom={0}>
    <button centerX={0} top={100} text='Show Message' onSelect={handleButtonSelect}/>
    <textView centerX={0} top='prev() 50' font='24px'/>
  </composite>
);

与如下代码效果相同

ui.contentView.append(
  new Composite({left: 0, top: 0, right: 0, bottom: 0}).append(
    new Button({centerX: 0, top: 100, text: 'Show Message'}).on({select: handleButtonSelect}),
    new TextView({centerX: 0, top: 'prev() 50', font: '24px'})
  )
);

Tabris.js TypeScript app中的JSX遵循如下具体规则：

每个JSX元素都是构造函数调用。如果直接嵌入代码中，则需要彼此分隔（见下文）。
名称以小写字母开始的元素是内置元素。包括内置在Tabris.js中的所有可实例化控件，以及WidgetCollection。这些元素的类型不需要显式导入。
名称以大写字母开始的元素是用户自定义元素，即扩展Tabris.js控件的任何类。这些元素需要导入。
属性可以是字符串（使用单引号或双引号）或JavaScript / TypeScript表达式（使用花括号）。
与控件属性名称相同的标签属性，用来通过构造函数设置该控件的属性。
遵循on{EventType}命名方案的的属性用于向该事件注册监听器。
每个元素可以有任何数量的子元素（如果该类型支持子元素），所有子元素都以给定的顺序添加到其父元素。
要支持对用户定义的元素进行属性检查，需要在自定义控件上添加名为jsxProperties的字段。该类型必须与第一个构造函数参数的类型相匹配。你不必为该字段赋任何值。
虽然JSX表达式本身是类型安全的，但是它们的返回类型不是（是any类型），因此请按照上面的转换说明进行操作。一般认为在widget.append()中使用未经检查的JSX表达式是安全的，因为所有JSX元素都是可append类型。
注意，这是不合法的：

ui.contentView.append(
  <button centerX={0} top={100} text='Show Message'/>
  <textView centerX={0} top='prev() 50' font='24px'/>
);

直接嵌套在代码中的JSX元素必须像表达式一样分隔，比如下面这种情况用逗号分隔：

ui.contentView.append(
  <button centerX={0} top={100} text='Show Message'/>,
  <textView centerX={0} top='prev() 50' font='24px'/>
);

为了避免这种情况，你可以将控件包裹在WidgetCollection中。这个例子与上面的例子效果相同：

ui.contentView.append(
  <widgetCollection>
    <button centerX={0} top={100} text='Show Message'/>
    <textView centerX={0} top='prev() 50' font='24px'/>
  </widgetCollection>
);

在TypeScript之外使用JSX

如果要在不编写TypeScript的情况下使用JSX，仍然可以使用TypeScript编译器将.jsx文件转换为.js。简单创建一个TypeScript app，并在tsconfig.json的compilerOptions对象中添加一个条目"allowJs": true。然后将include对象中的文件名从.ts 和 .tsx 修改为 .js 何 .jsx。如果你使用any类型，你可能还需要调整你的校验设置。

原文:

https://youjingyu.github.io/Tabris-Documention/?folderName=guide&pageName=lang.html

ES6，TypeScript 和 JSX

EcmaScript 6，TypeScript 和 JSX

EcmaScript 6

TypeScript

注意类型安全

接口

JSX

在TypeScript之外使用JSX