Question

是否有人在为ExtJS 5开发TypeScript定义？我一直在检查DefinitelyTyped，但没有活动：

https://github.com/borisyankov/DefinitelyTyped/tree/master/extjs

Answer 1

我开始认真研究这个问题，但发现搜索结果并不令人满意。

首先，here is a small discussion which provides some insight into Sencha's view on TypeScript。

虽然我找不到ExtJS 5的任何特定内容（我的道歉），但我确实找到this link，声称使用以ExtJS文档开头的流程生成TypeScript声明文件。这些示例的目标是ExtJS 4.1，但它可能适用于ExtJS 5.如果是这样，它可以解决您的问题。这当然不是一个答案，但也许它是一个领导者。

顺便说一下，上面提到的对话并不适合我。它首先是一个看似无辜的要求Sencha考虑TypeScript为静态工具提供的潜力。

打字稿

我刚刚发现了TypeScript（http://www.typescriptlang.org/）和它   看起来很有希有没有人有机会玩它呢？   我想了解是否可以生成TypeScript   声明文件，用于声明Ext JS和Sencha中的所有类型   触摸框架。我喜欢拥有更好的静态分析和工具   支持我的Sencha开发工作。

谢谢！

这是Sencha高级论坛经理的回复：

让事情变得丑陋的另一件事 [TypeScript]

[编辑]无论我多少次说这个评论显然是一个   个人评论，它仍然是个人的。如果你还没和我说过话   在推特或其他任何地方关注我，我肛门关于我的代码和   TypeScript（甚至是ES6）的语法很难看。

那非常苛刻！

我个人并不了解论坛经理，所以我不会谈论他对TypeScript的特殊偏见。但我认为我可以提供一些见解，为什么Sencha代表可能不会为它的成功而生根。也许这将有助于您理解为什么它可能不是许多人为ExtJS 5创建定义文件的高优先级。

请注意我可能是错的，并且有一个ExtJS 5定义文件，但尚未进入DefinitelyTyped。我的搜索远非详尽无遗。

<强>打字稿

Here is a simple example of the model of object-oriented programming that TypeScript uses.。请注意，构造函数是一个函数，它返回一个实例，该实例的状态可能已经修改过或者是原型的实例：

function Mammal() {
    //...  
}

构造函数的prototype属性恰好是构造函数返回的对象的原型，然后可以使用方法和属性进行扩展（在ES5 Object.defineProperty意义上）。不必为构造函数创建的每个实例重新创建原型上声明的成员：

Mammal.prototype = function giveBirth() {
    //...
}

从这个意义上说，构造函数扮演着一个类的角色，它的prototype属性的结构定义了构造函数创建的对象的类型。虽然这种模式在ES3和ES5中非常冗长，特别是在添加继承所需的附加机制时，它是ES6用来定义类概念的模式。因此，它是TypeScript编译器用于编译类的模式。

要在JavaScript中更完整地处理这种经典的面向对象编程形式，以及使经典继承更简洁的技术，请参阅this post by Douglas Crockford。

值得注意的是，类型的概念仅在设计时存在，并由TypeScript编译器强制执行以帮助您编写更坚固的代码。

<强> ExtJS的

在TypeScript存在之前，我已经熟悉了Sencha的ExtJS框架所采用的经典继承模型。该模型提供了一种使用多种模式定义类和从相应类型创建实例的方法，包括模块模式和原型模式和工厂模式。如果您是ExtJS程序员，您会发现这些模式非常熟悉，但供参考，请参阅Addy Osmani的Learning JavaScript Design Patterns相应部分。

作为纯JavaScript开发人员，这种经典的面向对象编程方法功能强大。它在很多方面类似于TypeScript编译器使用的经典面向对象编程模型，但有一个关键区别。在ExtJS中，类及其类型是框架已知的，因此在运行时存在。 ExtJS最棒的一点是它模拟了创建类的语法，就像在Java或C＃中那样。但与在TypeScript中指定类的方法相比，它很苍白。

首次介绍时，我非常迷恋ExtJS使用的类定义方法，我创建了一个名为classical的库。我的灵感足以创建自己的库，以便在JavaScript中探索和扩展类定义，并为我自己的启发实现它。如果单击上面的链接，您会注意到项目已从类似ExtJS的类系统演变为TypeScript的基类库。

为什么要改变？

对于初学者来说，TypeScript提供了面向对象编程的模型，它不仅允许我使用熟悉的OOP设计模式，而且还为我提供了静态类型系统以及随之而来的所有设计时工具。当我第一次发现TypeScript（版本0.8）时，我最初的反应是创建一个经典的类型定义文件，这将是一个类似的（但更简单）努力为ExtJS创建一个。完成此任务后，生成的库的语法是一个彻头彻尾的灾难！我想探究哪里出了问题，我将用ExtJS中的一个简单例子来解决。

此代码取自上述讨论，看起来像标准的ExtJS类定义：

Ext.define('WebApp.model.RenderableRecord', {
    extend: 'Ext.data.Model',
    idPropert: 'id',

    isRenderableRecord : true,

    fields: [
        { name: 'id', type: 'string' },
        { name: 'name', type: 'string' },
        {
            name: 'renderable',
            convert: function (val, model) {return val;}
        },
    ],

    renderItems: function (renderer: Function) {
        var me = this;
        return function (config: Object) {
            renderer(me.get('renderable'), config);
        }
    },

});

考虑上面原型定义的接口。如果需要在TypeScript中进行静态类型，可以创建一个如下所示的接口：

module WebApp {
  module model {
    export interface RenderableRecord extends Ext.data.Model {
      idPropert: string;
      isRenderableRecord: boolean;
      fields: Array<Field>;
      renderedItems(renderer: Function);
    }

    //Assume Ext.data.Model and Field are defined already
    //and that the Field interface looks something like this:
    export interface Field {
      name: string;
      type: string;
      convert: Function;
    }
  }
}

不仅必须在ExtJS定义旁边定义该接口，而且实例必须将其类型指定两次，一次作为WebApp.model.RenderableRecord（或者在调用Ext.create时作为同名的字符串）然后再将其转换为适当的TypeScript类型。获得静态类型的工作很多，因为投射，仍然容易出错！

那么问题是什么？

问题在于有两种类型系统在起作用。一种是TypeScript编译器强制执行的设计时类型系统。另一种是ExtJS定义的运行时类型系统。这两种类型系统在实现方式上非常相似，但它们各自具有不同的语法，因此必须单独指定。如果必须维护每个接口的两个副本，则静态类型系统的大部分价值都会丢失。

Here is a more complete treatment of the hurdles that one must overcome when integrating TypeScript and ExtJS。它还引用了上面的GitHub项目。作者得出结论

不幸的是，TypeScript和ExtJ似乎效果不佳在一起。

最重要的是，ExtJS和TypeScript都定义了他们自己的类型系统，这些系统并没有完全遵循相同的规则。因此ExtJS和TypeScript从根本上是不相容的......

...好吧从根本上说太强了，但要有效地使用这两个工具需要做很多工作。因此，如果我是Sencha的高级论坛经理，我可能也不会支持TypeScript。

就个人而言，我更喜欢ES4预览，静态类型系统和TypeScript提供的设计时工具。我甚至可以选择这是一种耻辱，因为两者不是同一个类型 - 一个是框架，另一个是语言。有些人肯定会做go to great lengths to make them compatible。

ExtJS是一个功能强大的JavaScript框架，我确信它只会在时间上变得更加丰富。但事实上，当用作JavaScript框架时，ExtJS处于最佳状态。或引用同一个论坛经理：

...您可以在不需要的情况下编写正确且高效的JavaScript 任何编译器，如coffeescript或typescript。

ExtJS提供了一种在JavaScript中作为框架的经典面向对象继承的方法。 TypeScript提供了第二种方法作为语言。如果您对TypeScript感兴趣，请查看classical。它远不是像ExtJS这样的专业框架，但它提供了一个关于为TypeScript开发人员构建时可能是什么样的工具的意见。

Answer 2

我最近一直在研究ExtJS的一些Typescript定义，并且还为另一个提供与ExtJS更兼容的分叉Typescript编译器的项目做贡献。

请参阅https://github.com/fabioparra/TypeScript

Answer 3

请找到Sencha Ext JS的ExtTS - Premium TypeScript类型定义

https://github.com/thanhptr/extts

几乎支持最新版本的ExtJS 4.x，5.x，6.x，目前最新版本为6.0.2.437。

您可以从ExtJS API文档中找到的所有内容都在具有强类型支持的类型定义中（例如：Ext.dom.Element，ButtonConfig，..）

Answer 4

也许我在事情不再是最新的但我创建了一段时间之后回答了
TypeScript definitions for Ext.JS 5, 6 and 7 ，因为原因很多
不要走上面的方式：

已修补的TypeScript编译器不再处于活动状态。今天的TypeScript版本离它很远。
打补丁的TS编译器很酷，但是TS编译器项目太复杂，无法维护
（用于生成Ext.JS类）。
https://github.com/thanhptr/extts上的“ Premium TypeScript定义”具有
很多错误，我的意思很多。例如您需要的第一个电话
Ext.application({});无处不在。
github.com/thanhptr/extts中的JS文档包含HTML语法，对于日常工作来说不太可读。
github.com/zz9pa/extjsTypescript上的Ext.JS TypeScript生成器太简单了，不可能实现
用于更高版本的Ext.JS（5、6和7），但这是创建的主要动力
新的 Ext.JS TypeScript definitions generator 。

我的解决方案基于与本博文“ Using ExtJs with TypeScript”相同的原理。
但是有一些区别。我想从示例中可以清楚看出所有差异：

主要区别在于：

所有类均按原样生成。
还将生成“替代”文件中的所有成员。
像Ext，Ext.Array等这样的单类也可以正确生成。
将类配置放在*.Cfg接口中，例如：
Ext.panel.Panel在Ext.panel.Panel.Cfg中具有配置界面。
要扩展类，您不仅需要类配置（还需要对象成员，如
extend，requires，config，statics，也可能是模板方法），
这就是为什么还生成了具有扩展类定义的接口的原因：
从Ext.panel.Panel扩展的类具有在Ext.panel.Panel.Def中定义的接口。
还可以通过更好的方式生成self属性。
为侦听器/事件生成了接口，例如： Ext.panel.Panel具有Ext.panel.Panel.Events中事件的界面。
还为结构化方法参数生成了很多接口。

当然可以使用现代工具包创建应用程序，但Id没有提供任何示例：-）。

解决方案支持无处不在的自动完成和Visual Studio代码通过CTRL + R重构，这非常实用：-）

Answer 5

ExtJS TS定义肯定有空间虽然TypeScript和ExtJS确实使用不兼容的类系统，但某些策略可能会被用作解决方法：

使用修补的TS编译器

由fabioparra开发并由Gareth链接的ExtJS发射器是一种可能的解决方法。恕我直言，主要缺点是它与支持TS语言的IDE的集成变得复杂。例如，没有关于此解决方案与现有Eclipse TS插件的兼容性的文档。此外，不确定是否会为未来版本的TypeScript维护补丁的开发。

使用TS静态方法作为ExtJS对象的工厂

这里的想法是提供一组替换ExtJS类的构造函数的静态方法。因此，可以在使用传统TS编译器时实例化ExtJS对象。我最近在github（https://github.com/david-bouyssie/TypExt）上提供了名为TypExt的替代解决方案。请注意，它必须与适当的ExtJS TS定义（https://github.com/david-bouyssie/TypExt/tree/master/typescripts）一起使用。目前只支持ExtJS 5.1.1，但我计划将TypExt的使用扩展到其他ExtJS版本。

ExtJS 5的TypeScript定义

5 个答案: