仓库为什么要先进先出 TypeScript 成功了,更先进的 ActionScript 却失败了

为什么 TypeScript 成功了,更先进的 ActionScript 却失败了? - 知乎378被浏览46328分享邀请回答18815 条评论分享收藏感谢收起如何评价 TypeScript? - 知乎932被浏览161986分享邀请回答504 条评论分享收藏感谢收起7718 条评论分享收藏感谢收起查看更多回答2 个回答被折叠()从 ActionScript3 到 TypeScript - 推酷
从 ActionScript3 到 TypeScript
以下是我总结的笔记,只涉及语法部分,有错漏请指正。
基础类型只有这么几种,与AS3对比
TypeScript
ActionScript3
boolean(0.8以前为bool)
任意类型:
ActionScript3 :
var anyType : * = ...;
TypeScript:
var anyType : any = ...;
变量修饰符:
TS类似AS3 但不用写&var& , 没有protected (未来也许会添加),默认为public。
ActionScript3 :
private var str: String = &abc&;
var num: Number = 123;
var num2 :Number = 456;
static var bo: Boolean = true;
public var createTime: S
TypeScript:
private str: string = &abc&;
num: number = 123;
num2 :number = 456;
static bo: boolean = true;
public createTime: string;
变量类型转换:
ActionScript3 :
var str:String = &abc&;
var strNum:Number = Number(str);
var strNum:Number = str as N
TypeScript :
var str : string = &abc&;
var strNum: number = & //编译报错 Cannot convert 'string' to 'number'
发现使用any类型会编译通过:
var str2 :any = &abc&;
var strNum2 :number = & str2; //通过
strNum2 += 5; // abc5
用 instanceof 判断类型
function CalculateArea(shape : Shape) : number {
if (shape instanceof Square) {
return (&shape).x * (&shape).y;
if (shape instanceof Ellipse) {
return (&shape).r1 * (&shape).r2 * Math.PI;
if (shape instanceof Triangle) {
return 0.5 * (&shape).x * (&shape).y;
throw new TypeError(&Unsupported type!&);
Typescript数组的写法比AS3漂亮很多
ActionScript3 :
var arr:Array = [1,2,3,&a&,&b&,&c&];
var strArray:Vector.& = Vector.&([&a&, &b&, &c&]); //固定类型数组
TypeScript :
var arr: any[] = new Array();
var strArr: string[] = [&a&, &b&, &c& ];
var array2d: string[][] = [
[&a&, &b&, &c&],
[&x&, &y&, &z&]
var array2d: string[][] = new Array()
array2d.push([&a&, &b&, &c&])
array2d.push([&x&, &y&, &z&])
Object Types
当AS3调用这样一个函数时,会有下面一个问题。
ActionScript3 :
function CalculateArea ( rect : Object ):Number
return rect.width * rect.
此时编译器并不知道rect这个Object里到底有没有width和height,只能等到runtime时才会知道。
TypeScript 引入
Object Types
解决这一问题,可以指定Object参数的具体内容,相当于让Object参数实现了interface
function CalculateArea(rect: {width: height:}): number
return rect.width * rect.
此时如果调用
CalculateArea({w:123,h:456});
编译器不会通过。
Object Types
还支持”?&表示可选参数
function CalculateArea(rect: {width: height: depth?:}): number
if(rect.depth)
return rect.width * rect.height * rect.
return rect.width * rect.
CalculateArea({w:123,h:456});
CalculateArea({width:123,height:456});
CalculateArea({width:123,height:456,depth:789});
ActionScript3 :
var fun:Function;
var fun2:Function = someFunction;
TypeScript 可以指定Function需要的参数和返回值类型 ,所以变成了这样
var fun : (str: string) =& void;
var fun2 : (num: number) =& number = someF
eg.指定callback函数为string输入,any输出。
function vote(candidate: string, callback: (result: string) =& any) {
vote(&BigPig&,
function(result: string) {
if (result === &BigPig&) {
TypeScript 这样的语法虽然使Function更清晰了,但也带来麻烦,比如一个简单的输入输出都是string的函数就要写好长不易阅读
var sayHello: (input: string) =& string = function (s: string) {
return &Hello & +
var strArray: { (s: string): }[] = [sayHello, function aa(str: string) { return }];
var strArray: { (s: string) =& }[]
所以引入了 函数接口
interface IStringFunction {
(input: string) : string;
上边很长的都可以这么写了
var sayHello: IStringFunction = function (s: string)
var strArray: IStringFunction[];
strArray.push(sayHello);
可选参数加&?&
function func (a: number, b?: bool = false): number
if (b) { return a + b };
function func (a: number,b?: bool): number
if ( b !== null && b !== undefined )
if ( b) { return a + b };
rest参数 ...paramName[:paramType]
function CountDwarvesTallerThan(minHeight: number, ...dwarves: Dwarf[]) : number
var count: number = 0;
for (var i = 0; i & dwarves. i++) {
if (dwarves[i].height & minHeight) {
Arrow Function
关于this作用域的问题,AS1时代经常用到的一个技巧:
var _this = this
var messenger = {
message: &Hello World&,
start: function() {
var _this = this;
setTimeout(function() {
alert(_this.message);
messenger.start();
TypeScript把这个技巧封装到语言里了,叫
Arrow Function
语法格式为 ()=&{},例子:
TypeScript:
var messenger = {
message: &Hello World&,
start: function() {
setTimeout(() =& { alert(this.message)
messenger.start()
编译后的JavaScript跟上边的一样
var messenger = {
message: &Hello World&,
start: function () {
var _this = this;
setTimeout(function () {
alert(_this.message);
messenger.start();
网上找到的一个例子,
declare var menu: HTMLE
declare var sideBar: HTMLE
class UITester {
menuTouches:
sidebarTouches:
beginMenuTest(): void {
this.menuTouches = 0;
menu.onmouseenter = function (e) {
this.menuTouches++;
beginSidebarTest(): void {
this.sidebarTouches = 0;
sideBar.onmousemove = e =& {
this.sidebarTouches++;
语法中用了(e)=&{} ,将e传给后边的函数,并且省略了e的括号,会编译成这样:
var UITester = (function () {
function UITester() { }
UITester.prototype.beginMenuTest = function () {
this.menuTouches = 0;
menu.onmouseenter = function (e) {
this.menuTouches++;
UITester.prototype.beginSidebarTest = function () {
var _this =
this.sidebarTouches = 0;
sideBar.onmousemove = function (e) {
_this.sidebarTouches++;
return UIT
这里有篇教程详细解释了这个语法:
TypeScript中的module相当于ActionScript3中的Package
TypeScript中构造函数的函数名用
constructor
,而不用类名。
TypeScript:
module net.nshen {
export class Test1
private str: string = &abc&;
num: number = 123;
public createTime:
constructor()
this.createTime = new Date().toUTCString();
static traceDate(): void
var currentDate: Date = new Date();
console.log(currentDate.toUTCString());
调用Static方法
net.nshen.Test1.traceDate()
module原理
module始终是要编译成JS代码的,写一个简单的module看一下原理:
module M {
var s = &hello&;
export function f() {
编译后的JS代码
(function(M) {
var s = &hello&;
function f() {
})(M||(M={}));
据说这是js界很流行的写法,叫做
JavaScript module pattern
AS3和JS都是不支持函数重载的,TypeScript以一种鸡肋的方式支持着。
先写一些同名的函数声明,最后在一个同名函数里写出实现(要自己判断参数类型):
TypeScript:
function attr(name: string): string;
function attr(name: string, value: string): Accessor;
function attr(map: any): Accessor;
function attr(nameOrMap: any, value?: string): any {
if (nameOrMap && typeof nameOrMap === &object&) {
最终会编译成一个JS方法:
JavaScript:
function attr(nameOrMap, value) {
if (nameOrMap && typeof nameOrMap === &object&) {
TypeScript 允许多个类在同一个文件里,但如果类与类在不同的文件,需要这种写法,相当于AS3 的 import
class ComplexWebSocket extends SimpleWebSocket {
override方法子类不需要写关键字,直接同名方法即可 ,可调用super.xxx()
class Base {
public test():number
public test2():number
class Derived extends Base {
public test():number
public test2():number
return super.test();
var d:Derived = new Derived();
console.log(d.test());
console.log(d.test2());
TypeScript支持enum关键字
enum Color { Red, Green, Blue }
console.log(Color.Red);
var c:number = Color.G
console.log(Color[c])
生成对应的js
var Color;
(function (Color) {
Color[Color[&Red&] = 0] = &Red&;
Color[Color[&Green&] = 1] = &Green&;
Color[Color[&Blue&] = 2] = &Blue&;
})(Color || (Color = {}));
console.log(Color.Red);
var c = Color.G
console.log(Color[c]);//Green
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置: 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致基础类型只有这么几种,与AS3对比
TypeScript && &ActionScript3
number && &Number
string && &String
boolean(0.8以前为bool) && &Boolean
undefined && &undefined
null && &null
任意类型:
ActionScript3 :
var anyType : * = ...;
TypeScript:
var anyType : any = ...;
变量修饰符:
TS类似AS3 但不用写”var” , 没有protected (未来也许会添加),默认为public。
ActionScript3 :
private var str: String = &abc&;&& &
public& var num: Number = 123;&&& &
var num2 :Number = 456;&&&&&& &
static var bo: Boolean =&& &
public var createTime: S &
TypeScript:
&private str: string = &abc&;&&& // private property
&public& num: number = 123;&&&&& // public property
&num2 :number = 456;&&&&&&&&&&&& // 不写默认也为public
&static bo: boolean =&&&&&&&& // static
&public createTime:&&&&& //createTime 类型为string,值为 undefined
变量类型转换:
ActionScript3 :
var str:String = &abc&;
var strNum:Number = Number(str);
var strNum:Number = str as N
TypeScript :
&var str : string = &abc&;
&var strNum: number = &number& //编译报错 Cannot convert 'string' to 'number'
发现使用any类型会编译通过:
&var str2 :any = &abc&; //any类型
&var strNum2 :number = &number& str2; //通过
&strNum2 += 5; // abc5
用 instanceof 判断类型
&// instanceof
&function CalculateArea(shape : Shape) : number {
&&&& if (shape instanceof Square) {
&&&& return (&Square&shape).x * (&Square&shape).y;
&if (shape instanceof Ellipse) {
&&&& return (&Ellipse&shape).r1 * (&Ellipse&shape).r2 * Math.PI;
&if (shape instanceof Triangle) {
&&&& return 0.5 * (&Triangle&shape).x * (&Triangle&shape).y;
&throw new TypeError(&Unsupported type!&);
Typescript数组的写法比AS3漂亮很多
ActionScript3 :
var arr:Array = [1,2,3,&a&,&b&,&c&]; // 任意类型数组
var strArray:Vector.&String& = Vector.&String&([&a&, &b&, &c&]); //固定类型数组
TypeScript :
var arr: any[] = new Array(); // 任意类型数组
var strArr: string[] = [&a&, &b&, &c& ]; //固定类型数组
var array2d: string[][] = [
[&a&, &b&, &c&],
[&x&, &y&, &z&]
var array2d: string[][] = new Array();
array2d.push([&a&, &b&, &c&]);
array2d.push([&x&, &y&, &z&]);
Object Types
当AS3调用这样一个函数时,会有下面一个问题。
ActionScript3 :
function CalculateArea ( rect : Object ):Number
&&&&& return rect.width * rect.
此时编译器并不知道rect这个Object里到底有没有width和height,只能等到runtime时才会知道。
TypeScript 引入Object Types解决这一问题,可以指定Object参数的具体内容,相当于让Object参数实现了interface
function CalculateArea(rect: {width: height:}): number
&&& return rect.width * rect.
此时如果调用CalculateArea({w:123,h:456}); 编译器不会通过。
Object Types 还支持”?”表示可选参数
function CalculateArea(rect: {width: height: depth?:}): number
&&& if(rect.depth)
&&&&&&& return rect.width * rect.height * rect.
&&& return rect.width * rect.
CalculateArea({w:123,h:456}); //编译器报错
CalculateArea({width:123,height:456}); // 通过
CalculateArea({width:123,height:456,depth:789}); // 通过
可以这样声明一个Object
var example: {
collection: string[];
name: 'Example',
collection: ['a', 'b', 'c']
ActionScript3 :
var fun:F& &
var fun2:Function = someF
TypeScript 可以指定Function需要的参数和返回值类型,叫做函数签名,所以变成了这样
var fun : (str: string) =&&& // fun是输入为string,没有输出的函数
var fun2 : (num: number) =& number = someF& //someFnction函数必须输入输出都为number类型
eg.指定callback函数为string输入,any输出。
function vote(candidate: string, callback: (result: string) =& any) {
vote(&BigPig&,
&&& function(result: string) {
&&&&&&& if (result === &BigPig&) {
&&&&&&&&&&& // ...
TypeScript 这样的语法虽然使Function更清晰了,但也带来麻烦,比如一个简单的输入输出都是string的函数就要写好长不易阅读
var sayHello: (input: string) =& string = function (s: string) {
&&& return &Hello & +
//保存函数的数组也写很长
var strArray: { (s: string): }[] = [sayHello, function aa(str: string) { }];&&& //两个输入输出都为string的函数
var strArray: { (s: string) =& }[]&& //这样写会报错,不知道为什么要把 “=&”换成“ :” 不太清楚为什么 -_-b
所以引入了 函数接口
//定义输入输出都是字符串的函数的接口
interface IStringFunction {
&&& (input: string) :
上边很长的都可以这么写了
var sayHello: IStringFunction = function (s: string) {
&&& return &Hello & +
var strArray: IStringFunction[];
strArray.push(sayHello);
可选参数加”?”
//带默认值
function func (a: number, b?: bool = false): number
&&& if (b) { return a + b };
//不带默认值,要自己判断了
function func (a: number,b?: bool): number
& if ( b !== null && b !== undefined )
&&& if ( b) { return a + b };
rest参数 …paramName[:paramType]
function CountDwarvesTallerThan(minHeight: number, ...dwarves: Dwarf[]) : number
&&& var count: number = 0;
&&& for (var i = 0; i & dwarves. i++) {
&&&&&&& if (dwarves[i].height & minHeight) {
&&&&&&&&&&& count++;
Arrow Function
关于this作用域的问题,AS1时代经常用到的一个技巧:
&&& var _this = this
var messenger = {
&&& message: &Hello World&,
&&& start: function() {
&&& var _this =
&&& setTimeout(function() {
&&&&&&& alert(_this.message);
&&&&&&& }, 3000);
messenger.start();
TypeScript把这个技巧封装到语言里了,叫Arrow Function
语法格式为 ()=&{},例子:
TypeScript:
var messenger = {
&&& message: &Hello World&,
&&& start: function() {
&&&&&&& setTimeout(() =& { alert(this.message); }, 3000);
messenger.start();
编译后的JavaScript跟上边的一样
var messenger = {
&&& message: &Hello World&,
&&& start: function () {
&&&&&&& var _this =
&&&&&&& setTimeout(function () {
&&&&&&&&&&& alert(_this.message);
&&&&&&& }, 3000);
messenger.start();
网上找到的一个例子,
//declare var 为环境声明,用来告诉编译器已知的变量类型,例如浏览器定义的一些变量类型
declare var menu: HTMLE&&&&& &
declare var sideBar: HTMLE
class UITester {
&&& menuTouches:
&&& sidebarTouches:
&&& beginMenuTest(): void {
&&&&&&& this.menuTouches = 0;&& // Right!!
&&&&&&& menu.onmouseenter = function (e) {
&&&&&&&&&&& this.menuTouches++;& // Wrong!!
&&& beginSidebarTest(): void {
&&&&&&& this.sidebarTouches = 0;& // Right!!
&&&&&&& sideBar.onmousemove = e =& { &
&&&&&&&&&&& this.sidebarTouches++;& // Still right!!
语法中用了(e)=&{} ,将e传给后边的函数,并且省略了e的括号,会编译成这样:
var UITester = (function () {
&&& function UITester() { }
&&& UITester.prototype.beginMenuTest = function () {
&&&&&&& this.menuTouches = 0;
&&&&&&& menu.onmouseenter = function (e) {
&&&&&&&&&&& this.menuTouches++;
&&&&&&& };
&&& UITester.prototype.beginSidebarTest = function () {
&&&&&&& var _this =
&&&&&&& this.sidebarTouches = 0;
&&&&&&& sideBar.onmousemove = function (e) {
&&&&&&&&&&& _this.sidebarTouches++;
&&&&&&& };
&&& return UIT
这里有篇教程详细解释了这个语法:
&&& /typescript/arrow-function-typescript-tutorial/
TypeScript中的module相当于ActionScript3中的Package
TypeScript中构造函数的函数名用constructor ,而不用类名。
TypeScript:
module net.nshen {
&&& export class Test1
&&&&&&& private str: string = &abc&;&&& // private property
&&&&&&& public& num: number = 123;&&&&& //public property
&&&&&&& public createTime:&&&&& //createTime = undefined
&&&&&&& constructor() // constructor
&&&&&&&&&&& this.createTime = new Date().toUTCString();
&&&&&&& static traceDate(): void
&&&&&&&&&&& var currentDate: Date = new Date();
&&&&&&&&&&& console.log(currentDate.toUTCString());
调用Static方法
net.nshen.Test1.traceDate();
module原理
module始终是要编译成JS代码的,写一个简单的module看一下原理:
module M {
&&& var s = &hello&;
&&& export function f() {
M.s;& // Error, s is not exported
编译后的JS代码
(function(M) {
&&& var s = &hello&;
&&& function f() {
})(M||(M={}));
据说这是js界很流行的写法,叫做JavaScript module pattern
AS3和JS都是不支持函数重载的,TypeScript以一种鸡肋的方式支持着。
先写一些同名的函数声明,最后在一个同名函数里写出实现(要自己判断参数类型):
TypeScript:
function attr(name: string):
function attr(name: string, value: string): A
function attr(map: any): A
function attr(nameOrMap: any, value?: string): any {
&&& if (nameOrMap && typeof nameOrMap === &object&) {
&&&&&&& // handle map case
&&& else {
&&&&&&& // handle string case
最终会编译成一个JS方法:
JavaScript:
function attr(nameOrMap, value) {
&&& if (nameOrMap && typeof nameOrMap === &object&) {
&&& } else {
补充 : js判断类型也是个很大的坑,详见 //checking-types-in-javascript/
TypeScript 允许多个类在同一个文件里,但如果类与类在不同的文件,需要这种写法,相当于AS3 的 import
/// &reference path=&SimpleWebSocket.ts&/&
class ComplexWebSocket extends SimpleWebSocket {
override方法子类不需要写关键字,直接同名方法即可 ,可调用super.xxx()
class Base {
&&& public test():number
&&&&&&& return 1;
&&& public test2():number
&&&&&&& return 2;
class Derived extends Base {
&&& public test():number
&&&&&&& return 3;
&&& public test2():number
&&&&&&& return super.test();
var d:Derived = new Derived();
console.log(d.test()); // 3
console.log(d.test2());// 1
TypeScript支持enum关键字
enum Color { Red, Green, Blue }
console.log(Color.Red); // 0
var c:number = Color.G
console.log(Color[c])& //Green
生成对应的js
(function (Color) {
&&& Color[Color[&Red&] = 0] = &Red&;
&&& Color[Color[&Green&] = 1] = &Green&;
&&& Color[Color[&Blue&] = 2] = &Blue&;
})(Color || (Color = {}));
console.log(Color.Red);
var c = Color.G
console.log(Color[c]);//Green
本文已收录于以下专栏:
相关文章推荐
egret显示对象的种类,直接继承自DisplayObject 的类都是非容器类;继承自DisplayObjectContainer的类都是容器。
var arr1:Array = [1,2,3];
var arr2:Array = [];
var arr3:number[] = [3,4,5,6,7,8];
tuple (元组)我理解元组是一个strict array(严格的数组),因为他不只声明了一个数组,并且同时还规定数组中每个索引处的元素类型.回顾一下,如何声明一个数组var arr = [1,2,...
整理的文章《白鹭引擎入门》趁着今天周六,把苹果放下一边先。今天早上一醒来就装上了js编辑神器Webstorm ,最近也开始关注了一些移动方面的 js 前端框架。如 谷歌的Angularjs 和 fac...
前几天学了微软开发的Typescript,这种语言是用面向对象的思想来写,自动转换为js代码,既然学了就用一下,配合egret引擎(基于Html5的开发引擎)及egret wing3做一个十分基本的小...
为了让程序更易用,我们兼容几种最基本的数据类型:numbers(数字),strings(字符串),structures(结构),boolean(布尔值)等等。在 TypeScript 中,我们...
TypeScript基本类型
一共7种,boolean,number,string,Array,enum,any,void
ts文件:/*var isB//js定义变量*/
var isBo...
TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行。TypeScript与JavaScript相比...
最近Google 和 Microsoft 因Angular2 走的很近。
而其中的原因离不开Angular2的基础语言 : typescript。typescripttypescript(以下简称t...
他的最新文章
讲师:汪剑
讲师:刘道宽
您举报文章:
举报原因:
原文地址:
原因补充:
(最多只允许输入30个字)

我要回帖

更多关于 栈为什么是先进后出 的文章

 

随机推荐