TypeScript or Pure JavaScript?

I was really excited when I got to know that Microsoft had released a new language called TypeScript.

Type, which means better intellisense and type safety that serve the purpose of its existence — scalable.

Why is this important?

  1. Type safety.
    Hate bugs? There’s a joke we talk a lot, which is also a truth: “The weirder the bug is, the stupider mistake we might have made.” And the compiler would now worry about some of these things for us, like typo or forgetting to change a property after copying some code.
  2. Tooling.
    When a project grows, the API might become too complex for the developer himself to remember. Visual Studio provides great experience on JavaScript intellisense by actually running the code in background. But on the one hand, it would usually requires a special rewritten-version of intellisense file. On the other hand, it would become very slow when code lines add up. (I wrote a framework called VEJIS which picks up the powerful intellisense feature of Visual Studio, provides support for classes, interfaces, delegates, etc. But it’s a runtime framework and there’s no type safety. Checkout http://vilic.github.io/vejis/)
    TypeScript makes code navigation much easier and most of the time, we won’t even need to navigate because the information we need is there with intellisense.

Searching articles related to TypeScript would result in many that are comparing it to CoffeeScript and Dart. It’s really weird because some (maybe most) of these articles treats TypeScript the same sort of thing as CoffeeScript simply because both of them compile to JavaScript. And I have even seen an opinion saying: “If you want to build a big application I’d recommend going with CoffeeScript as you end up writing less code.”

WHAT? Maybe that buddy haven’t really met something big enough.

CoffeeScript won’t do things better for people like me, who have been writing JavaScript since day one. People like to talk about the “good part” when it comes to CoffeeScript, but… does it really take more effort for one person who starts with JavaScript to remember how to avoid the bad part than learning a syntactically brand new language?

And actually I have never given the “good or bad part” thing much credit.

So back to the topic, TypeScript or pure JavaScript? Ignoring things other than the languages themselves, I go with TypeScript without hesitate. Because it’s a superset of JavaScript, and it provides much more useful features for larger-scale applications. And, the key point, I write relatively large-scale web applications. However, to use TypeScript in productive environment, there would be more to think about.

  1. Poor IDE and editor plugin support.
    There have been several IDEs with TypeScript support integrated. Visual Studio, of course, would be one of them. But the experience coding using Visual Studio can’t even beat the experience on TypeScript Playground. This really bothers me a lot. No automatic-quote/bracket completion, no snippets, strange indent behavior, etc.
    I haven’t tried TypeScript in WebStorm, maybe it would have done better job. Also ReSharper for Visual Studio may improve the experience according to some comments I’ve seen.
    There are also some plugins for Sublime Text, but… you know.
  2. Poor NPM package and cross-project referencing support.
    Actually TypeScript is capable generating definition files so that it should have been friendly to these things. But the reality is not that awesome…
    I have proposed a convention on distributing TypeScript-written NPM package, and hoping it would make things better.

If finally you choose TypeScript, here’s some information and techniques that might help.

  1. Definitions of popular JavaScript libraries.
    I don’t have any crush on open source, but here open source does it right. So far most of the declarations I need for specific JavaScript libraries can be found in DefinitelyTyped, and it’s becoming of better quality and of larger covering.
    You may install the declarations though NuGet on Visual Studio, to make things work after installation, try to refresh the solution tree.
  2. Temporary “best” practice for cross-project referencing in Visual Studio.
    In project properties page TypeScript Build tab, check “Combine JavaScript output into file” (and specify a file name) and “Generate declaration files”.
    Create a “.d.ts” file in parent project and add the declaration file generated by sub project to it as a reference.
    Visual Studio would compile all “.ts” files included in the project into the JavaScript file specified, so make sure other test files are excluded from the project or you may want to create another project for samples and tests.
    When it comes to NPM packages, I haven’t figure out an acceptable way. But following that convention I mentioned earlier in this post, I may try to write an extension for Visual Studio which would pick up declaration files automatically, wrap it up with ambient module name and add the modified declaration file into the project that’s using that module. It would also be useful even if we are using these packages ourselves without publishing it to npmjs.org only. (BTW, symlink would save you hours if you didn’t know.)

I have now a symptom trying to make everything typed, it slows me down starting up coding a project, but speeds my lines up once the skeleton completes. Hope you enjoy writing in TypeScript if you need it.

(BTW it would be great if TypeScript add support for await/async based on Promise.)

上手 Visual Studio 2013 Preview

当然, 我最关心的还是对 JavaScript 的改进. 当然简单的看了下没法知道所有细节, 就说说我有看到的地方.

1. 在新建项目中发现了 Python 说是支持 IronPython 和 CPython, 不过想来单纯写脚本也应该没有任何问题? 不过不用 Python 表示不是很了解… 有点期待之后是否会有 NodeJS?
2. 在新建文件中看到了 LESS 和 coffeescript, 虽然也都不用,,, 囧…

JavaScript 相关:
1. 光标在变量名上时会高亮相关变量, 并且区分各种 scope, 但是怎么找也找不到重命名的选项, 不知道之后会不会提供.
2. 输入引号括号时会自动补全另一半.
3. 支持了 __defineGetter__ 等相关函数的实时运行.
4. intellisense 对象扩充了几个方法, 不过介于没有文档暂时懒得去捣鼓有什么用. 这里可以简单介绍下这个 intellisense 对象. 不出意外应该是在 VS 2012 的时候引入的, 可以让代码自己调整 IDE 的提示信息. VEJIS 0.5 使用专门开发的 intellisense 文件后能给出媲美 C# 的代码提示也是依赖于这个对象. 不过可惜知道这东西的人貌似并不多…
5. 有个 bug 貌似修复了… 之前如果打完第一个字母的时候, 提示还没有显示, 就打第二个字母, 那么就看不到提示了… 刚刚试了下这个问题不存在了.
6. 工具栏上多了个刷新按钮, 叫 Browser Link, 目测可以自动刷新网页, 但不幸的是,,, 可能是浏览器支持还没完成, 我试了下没有效果.

总的来说, VS 还是我心中前端开发的最佳选择, 虽然 2010 之后它变得有点那么丑了… 希望正式版崩给我们惊喜~

让 Github 成为免费的软件发布/下载/更新的服务器

这年头, 自己动手丰衣足食, 不过真的做出来个什么好家伙, 要想分享给别人, 也得在网上找个地儿. 之前一直是拿博客的空间来放东西, 不过老实说 FTP 还真不够方便, 而且可能很多人还没有这么个空间, 囧.

后来知道有 Github 这个东西, 再后来发现 Github 有 raw (原始文件) 这个东西, 再后来发现 Github 还有 Github Pages 这个东西. 但 Github Pages 则是后话了.

raw 的路径是固定的, 并且非常规范, 同时有 SSL 加密. 比如 X-Wall 的安装文件我提供的下载地址就是 https://raw.github.com/vilic/x-wall/master/release/x-wall-setup.exe, 从前至后依次是 https://raw.github.com/用户/仓库/分支/目录. 人可以通过浏览器下载, 软件当然也可以通过 GET 拿到, 于是这里的下载和更新就解决啦.

顺便就提提 Visual Studio 提供的 ClickOnce 解决方案. ClickOnce 是个非常方便的东西, 特别是对于小工具来讲. 但也有很多局限性, 其中一些可以通过不那么优雅的方式解决 (比如自动启动, 因为如果直接把 exe 添加到启动目录, 是没法读到正确的设置文件的, 还有 Command Line 传递参数等问题), 另一些则比较… 比如每次升级之后, exe 文件的目录也变了 (其实相当于是新下载到了另一个文件夹), 防火墙/托盘图标之类的设置也就没了. 最近做的 X-Wall 也是因为这点最后放弃了 ClickOnce.

对于 ClickOnce 来说, 设置自动更新都是傻瓜化的, 这个蛮好, 所以图方便的话, 还是不错的选择. 而这里要说的是, 我们也可以将 ClickOnce 的应用部署到 Github 上. 不过多年前当作者第一次尝试这么做的时候, 结局是悲惨的. 因为 ClickOnce 有签名, 所以要保证提交的文件和签名是一致的. Git 默认安装提交的时候貌似会把 Windows 风格的换行变成 Linux 风格, 这个就是问题的原因了. 重新运行安装程序 (也许可以直接通过命令改, 但作者是懒人), 选择 “Commit as-is” 的选项.

之后, 把 ClickOnce 的应用发布到本地文件系统上, 也就是你的 Git 仓库所在的文件夹. 其实我们可以新建一个分支来专门放这些东西, 这个还是用 Github Pages 的时候学到的. 这个时候, ClickOnce 的自动更新设置中, 把地址设置成本地发布的这个文件夹提交到 Github 之后 raw 对应的目录即可. 最后提交代码, 大功告成.

最后再提一下 Github Pages. 当然你可以用来做个人/组织/项目的页面, 或许也可以用来做软件的下载/升级服务器. 之前说的 raw 上用户可以下载 exe 等等 binary 的文件, 软件也可以检查并下载更新, 唯有个缺点就是 MIME 类型有时候不那么尽如人意. 比如 js 也好, xml 也好, 都是 plain/text. 但用 Github Pages 理论上来讲就可以避免这个情况了. 总体来说, 如果你不嫌麻烦那么一点点, 并且不需要 SSL 加密连接的话, 用 Github Pages 做这个事情或许会更好.

另外 X-Wall 的主页也是架设在 Github 上的, 欢迎访问! http://x-wall.org/

VEJIS 0.5 JavaScript 强类型编程新体验!

之前分别提到过Visual Studio 2012强大的JavaScript intellisense, 还有微软的新语言TypeScript. 测试完VS 2012 for Web增加的关于JS提示的新特性之后, 也说过要为此开发一个全新版本的VEJIS及其配套的提示文件, 现在终于算是基本搞定了. 而智能提示能够达到的程度我觉得完全可以媲美一些强类型的语言.

新版本的VEJIS相对0.4又有了不少提升, 重写了整个函数重载的代码, 使得扩展更加容易. 并且在0.4的option_(0.5改为opt_), params_的基础上进行完善. 有点小遗憾是重写的时候又把类模板忘记了, 所以后来发现要支持那东西也不简单, 可能会在下一次重写的时候实现. 不过类的话, 自从0.3开始变动就不怎么大了. 这次在0.5中则是添加了对接口(interface_)的支持, 并提供了两个新的创建特殊类型的函数nul_和delegate_.

模块(module_)部分的话, 主要是增加了对拆分一个模块到几个文件的支持, 并且丢掉了之前use_和module_连缀的写法, 以简化程序结构.

从自己写一些项目使用VEJIS 0.4的经验来看, 还是很惬意的. 以后我也会有一个更好的选择, 当然就是0.5了. 感兴趣的同学可以去VEJIS的网站看看. 现在只写了英文版, 空了之后会出中文.


Visual Studio 2012 for Web JavaScript自动完成体验

从Visual Studio 2005用到2010, 现在又用上了2012. 实际上之前就有体验过, 但并没有测试什么细节, 今天偶然想到, 对自己感兴趣的几个细节进行了测试, 感受是: It’s just AWESOME!

之前喜欢VS的JavaScript自动提示的原因, 是因为它会在某个环境执行你的代码, 并且用真实的结果给以智能提示, 如:


但VS 2010的时候, 类似的功能并不能体现到函数的实参上:

我一直很期待这个功能, 因为如果有它, 在更新自己VEJIS库的intellisense文件之后, 可以实现相当全面的自动提示. 结果, 它真的支持了!

但不仅仅是如此! 另外一个相当棒的功能就是支持异步, 比如异步加载脚本, 还有setTimeout. 先说可能大家不如我关心的setTimeout. 之后在介绍VEJIS的时候会提到前者.

除此之外, 智能提示还对数组的提示进行了优化, 会根据数组中之前出现的数据类型猜测之后出现的类型.

除了这些关于代码执行的提示, VS 2012对于代码注释的提示也有改进, 不过不是说让你写注释更方便, 而是让你写的注释被看得更方便. 并且支持多行, //和/**/都可以. 虽然之前也有<summary>等一些列的注释可以实现这样的功能, 但还是有点繁琐.

那接下来, 我就针对VEJIS谈谈对于VS 2012智能提示特性的进一步应用(这个时候在文件开头添加脚本引用了). 首先是动态加载.  在VEJIS里, require_函数用于动态加载一个脚本文件, 并且该文件会以<script>标签的形式添加到文档中. 例中动态加载的是我面向数据的一个基础库.

接下来是关于函数实参的, 像上面看到的那样, VS 2012可以根据函数被首次调用时传入的参数, 给实参加上提示, 但我们平时书写的时候, 多数时候是先写完函数再去调用. 当然, 在VEJIS下这种境况稍有不同, 因为VEJIS的函数支持重载, 也是需要指定类型的. 这样一来, 稍作修改, 就可以实现如下的功能.

同时, 因为之前说到的对于数组的提示支持, 让我还可以对VEJIS中的params类型进行处理.

又因为对于setTimeout的支持, VEJIS中类的提示也得到了加强, 虽然这个可能解释起来不是那么直观, 毕竟牵涉到其实现了.

强悍吧~ 话说如果是VEJIS老些的版本, 还支持with_, return_这些东西, 分别用于确定this和返回值的类型, 那配合上VS 2012, 就可以实现媲美强类型语言的自动提示了, 所以… 其实我已经动心开发下一个版本, 添加上这些支持. 囧. VS 2012除了这些运行时间的提示优化之外, 还增加了对很多常见对象的支持, 比如XMLHttpRequest.

顺便不得不提的是, Visual Studio 2012 for Web也有Express版, 也就意味着这么强大的工具是免费的! 各位前端同学们也加入VS阵营吧!