TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方 包括:加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销;增加一个完整的类结构,使之更新是传统的面向对象语言。
TypeScript 微软官方网站 http://www.typescriptlang.org/ TypeScript 源码 http://typescript.codeplex.com
Boolean
Number
String
Array
Enum
Any
Void
2.类
基本语法
class Animal {
animalName:string;
constructor(name:string) {
this.animalName = name;
}
sayHello() {
alert(this.animalName + ": Hello");
}
}
var tom = new Animal("Tom");
tom.sayHello();
继承
class Animal {
animalName:string;
constructor(name:string) {
this.animalName = name;
}
sayHello() {
alert(this.animalName + ": Hello");
}
}
class Cat extends Animal {
修饰符
当我们把animalName 改为private
class Animal {
private animalName:string;
get,set 访问器
class Animal {
private _animalName:string;
静态属性
3.接口
基本语法
interface ICar {
color:string;
}
class Bus implements ICar {
color:string;
constructor() {
this.color = "Blue";
}
}
var bus = new Bus();
alert(bus.color);
继承接口
可选属性
interface ICar {
color:string;
safetyDevice?:any;
4.模块(Modules)
作用:1.防止命名空间冲突;2.将一个功能模块很容易的划分到不同文件中,更容易维护;
基本语法
module MyDemo {
export interface IDemo {
}
export class Demo implements IDemo {
}
}
别名
module Shapes {
export module Polygons {
export class Triangle { }
export class Square { }
}
}
import polygons = Shapes.Polygons;
var sq = new polygons.Square();
5.函数(Function)
基本语法
function add(x:number, y:number):number {
return x + y;
}
// or
var myAdd = function (x:number, y:number):number {
return x + y;
};
完整的函数类型
var myAdd:(x:number, y:number)=>number =
function (x:number, y:number):number {
return x + y;
};
为了增强可读性,给参数x、y具有实际的意义,可以这样写
var myAdd:(baseValue:number, increment:number)=>number =
function (x:number, y:number):number {
return x + y;
};
第二部分number 是一个返回类型,如果无需返回类型,请使用 'void' 第三部分的function 参数类型,根据上下文类型进行推断,可以省略
var myAdd:(baseValue:number, increment:number)=>number =
function (x, y) {
return x + y;
};
可选参数
默认参数
可变参数
例如在C#中,方法参数定义使用param int[],调用方法时,就可以传递多个int类型的参数 在TypeScript中
function buildNameRest(firstName:string, ...restOfName:string[]) {
return firstName + " " + restOfName.join(" ");
}
var employeeName = buildNameRest("Joseph", "Samuel", "Lucas", "MacKinzie")
Lambads 和this关键字
var people={
name:["张三","李四","王五","赵六"],
getName:function(){
return function(){
var i=Math.floor(Math.random()*4);
return {
n:this.name[i]
}
}
}
}
var pname=people.getName();
alert("名字:"+pname().n);
调用发现getName中的this关键字指向的是getName,访问不到外部的name属性 所以我们修改为:
var people = {
name: ["张三", "李四", "王五", "赵六"],
getName: function () {
return ()=> {
var i = Math.floor(Math.random() * 4);
return {
n: this.name[i]
}
}
}
}
var pname = people.getName();
alert("名字:" + pname().n);
重载
6.泛型
基本语法
function identity<T>(arg: T): T {
return arg;
}
//数组泛型
function identity<T>(arg: T[]): T[] {
console.log(arg.length);
}
泛型类型(通用的函数类型)
function identity<T>(arg:T):T {
return arg;
}
var myIdentity:<T>(arg:T)=>T = identity;//T也可使用其他字母表示
//也可以这么写
//var myIdentity:{<T>(arg:T): T} = identity;
接口泛型
interface GenericIdentityFn {
<T>(arg:T): T;
}
function identity<T>(arg:T):T {
return arg;
}
var myIdentity:GenericIdentityFn = identity;
泛型类
class GenericNumber<T> {
zeroValue:T;
add:(x:T, y:T) => T;
}
var myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function (x, y) {
return x + y;
};
泛型约束
interface Lengthwise {
length: number;
}
function loggingIdentity<T extends Lengthwise>(arg:T):T {
console.log(arg.length);
return arg;
}
loggingIdentity(3);
泛型类约束
class Findable<T>
{
7.合并
合并接口
interface Box {
height: number;
width: number;
}
interface Box {
scale: number;
}
var box: Box = {height: 5, width: 6, scale: 10};
合并模块
module Animals {
exportclass Zebra { }
}
module Animals {
exportinterface Legged { numberOfLegs: number; }
exportclass Dog { }
}
合并模块和类
class Album {
label:Album.AlbumLabel;
}
module Album {
export class AlbumLabel {
}
}
合并模块和函数
function buildLabel(name:string):string {
return buildLabel.prefix + name + buildLabel.suffix;
}
module buildLabel {
export var suffix = "";
export var prefix = "Hello, ";
}
alert(buildLabel("Sam Smith"));
合并模块与枚举
enum Color {
red = 1,
green = 2,
blue = 4
}
module Color {
export function mixColor(colorName:string) {
if (colorName == "yellow") {
return Color.red + Color.green;
}
else if (colorName == "white") {
return Color.red + Color.green + Color.blue;
}
else if (colorName == "magenta") {
return Color.red + Color.blue;
}
else if (colorName == "cyan") {
return Color.green + Color.blue;
}
}
}
不能合并
- 类与类不能合并
- 接口与类不能合并
- 变量与类不能合并
|
请发表评论