分享一个TypeScript的小例子

[threenewbee]

关于TypeScript是什么，Scott Hanselman给出了一个精妙的比方：如同CoffeeScript之于Ruby一样，TypeScript是C#风格的Javascript。（出处：http://www.hanselman.com/blog/WhyDoesTypeScriptHaveToBeTheAnswerToAnything.aspx）TypeScript如同它的名字那样，强调“type”，也就是给JS加上类型，为什么"type"那么重要。因为每个.NET开发者编写JS最不爽的事情就是，宇宙最强IDE的Visual Studio，却对弱类型的JS的语法提示和自动完成支持得很不好。虽然微软不断改进，但是都是治标不治本的办法，究其原因，就是因为JS原型式的OO语法过于动态，很难推断类型和成员，而过于随意的语法又很难查错。

TS拥有媲美C#的强大语法特性，比如类、接口、继承、泛型、属性、类似Lambda表达式的函数定义写法等等。

有兴趣的可以通过http://www.typescriptlang.org/Playground这个网站在线体验下TS。

贴上一小段程序，大家体会下：

class A
{
	private callback(i : number) : void
	{		
		document.getElementById("result").innerHTML 
			+= i.toString() + "<br />\n";
	}
	
	foo() : void
	{
		var p = document.createElement("p");
		p.id = "result";
		document.body.appendChild(p);
		var array = [ 0, 1, 2, 3, 4, 5, 6, 7 ];
		array.filter((v, i, a) => v % 2 == 0).forEach((v, i, a) => this.callback(v));
	}
}

var button = document.createElement("button");
button.textContent = "call";

button.onclick = () => {
    var a = new A();
	a.foo();
};

document.body.appendChild(button);

需要着重体会的是，将光标放在
var p = document.createElement("p");
上，删除("p);，重新打入前括号：

你会发现每个不同的参数（"p" "input" "div"...）都会被当作不同的类型，而实现重载。
换言之，当你输入的是input，那么下一行你才能在 p. 之后看到 <input> 特有的属性。

TS的精妙之处不一而足。而且它是JS的超集，换言之，你只需要把现有的js后缀改成ts，就可以转换为TS了，而通过TS编译器，你也可以随时将TS转换回JS。所以迁移非常方便。

如果你对TS感兴趣，只需要安装好Visual Studio 2013 Update 2，其余不用操心，就可以得到TS的支持了。当然，还是强烈建议你安装Web Essentials 2013 for Update 2
http://visualstudiogallery.msdn.microsoft.com/56633663-6799-41d7-9df7-0f2a504ca361

[qy20027]

有空可以研究下

[csdnTXG]

有空可以研究下

[跳动de指尖]

TypeScript 我可不可以这么理解， 用C#的语法，讲TypeScript编译成javascript？ 那么怎么保证浏览器之间的差异，还有TypeScript有没有类似jquery那么强大的选择器呢？

[jingzhangongsi]

进来看看，应该感谢。。。

[TTforlove]

谢谢楼主啦！！

[laoer_2002]

谢谢楼主分享

[David.li]

这个不错哦

[卖水果的net]

感谢LZ的分享。

[joyhen]

不错，好东西，可以捣腾下

[yangjie1220]

感谢楼主分享！！！

[nclineage]

谢谢楼主，值得借鉴

[lewit]

谢谢楼主，学习了

[threenewbee]

引用 22 楼 pengqian098 的回复:

TypeScript 我可不可以这么理解， 用C#的语法，讲TypeScript编译成javascript？ 那么怎么保证浏览器之间的差异，还有TypeScript有没有类似jquery那么强大的选择器呢？

TypeScript是Javascript的一个超集，理解这一点很重要。 因此，任何合法的Javascript程序也是合法的TypeScript程序。或者说，JS程序不加修改就可以被TS编译器处理。jQuery是JS上的一个框架。微软给出了TS优化过的jquery版本，你可以使用原生的jQuery，包括一切功能。也可以使用这个TS改写的jQuery，在得到jQ全部功能的同时，因为它是TS改写的，你还能得到更多的类型约束、类型检查等等优势。

[r19880526]

[Ahoo]

[austin9972]

[魔者侠心之明星级程序员]

Great.

[Ki1381]

学习下，谢版主分享

[a446162187]

恩 感谢楼主分享！

[yemao221]

不能运行,这样document.body为null，应该这样： class A {     private callback(i : number) : void     {                document.getElementById("result").innerHTML              += i.toString() + "<br />\n";     }           foo() : void     {         var p = document.createElement("p");         p.id = "result";         document.body.appendChild(p);         var array = [ 0, 1, 2, 3, 4, 5, 6, 7 ];         array.filter((v, i, a) => v % 2 == 0).forEach((v, i, a) => this.callback(v));     } } window.onload = () => { var  button  =  document.createElement("button"); button.textContent  =  "call"; button.onclick  =  ()  =>  {     var  a  =  new  A();     a.foo(); }; document.body.appendChild(button); }