TypeScript 基本语法

1.基本数据类型

Boolean

//Boolean var isDone:boolean = false;

Number

//Number var width:number = 100;

String

//String var name:string = "hello";

Array

//Array var list:number[] = [1, 2, 3]; var list:Array<number>=[1, 2, 3];

Enum

//Enum enum Color {Red, Green, Blue} var c: Color = Color.Red; alert(c);//默认下标从0开始，alert(0); //可以手动指定下标 enum Color1 {Red = 1, Green, Blue} var c1: Color1 = Color1.Green; alert(c1);//alert(2) //根据下标查找名称 enum Color2 {Red = 1, Green=2, Blue=4} var c2: string = Color2[4]; alert(c2);//alert(Blue)

Any

//不确定类型，退出编译检查 var notSure: any = 4; notSure = "maybe a string instead"; notSure = false; // okay, definitely a boolean  //不确定数组元素类型 var anylist:any[] = [1, true, "free"]; anylist[1] = 100;

Void

//空白 function warnUser(): void {     alert(123); }

2.类

基本语法

class Animal {  animalName:string;  constructor(name:string) {   this.animalName = name;  }  sayHello() {   alert(this.animalName + ": Hello");  } } var tom = new Animal("Tom"); tom.sayHello();//alert(Tom:Hello) 

继承

class Animal {  animalName:string;  constructor(name:string) {   this.animalName = name;  }  sayHello() {   alert(this.animalName + ": Hello");  } } class Cat extends Animal {  //重写sayHello方法  sayHello() {   alert(this.animalName + "(Cat)：" + "Hello");  } } class Mouse extends Animal {  sayHello() {   alert(this.animalName + "(Mouse)：" + "Hello");  } } var tom:Animal = new Cat("Tom"); tom.sayHello();//alert(Tom(Cat):Hello) var jerry:Animal = new Mouse("Jerry"); jerry.sayHello();//alert(Jerry(Mouse):Hello) 

修饰符

当我们把animalName 改为private

class Animal {  private animalName:string;//默认是public  constructor(name:string) {   this.animalName = name;  }  //... } class Cat extends Animal {  //重写sayHello方法  sayHello() {   alert(this.animalName + "(Cat)：" + "Hello");//Error 编译不通过  } } 

get，set 访问器

class Animal {  private _animalName:string;//默认是public  get animalName():string {   return this._animalName;  }  set animalName(name:string):string {   this._animalName = name;  }  //... } 

静态属性

//静态属性 class Table {  static width = 100;  static height = 200; } var width = Table.width; alert(width);//alert(100) 

3.接口

基本语法

interface ICar {  color:string; } class Bus implements ICar {  color:string;  constructor() {   this.color = "Blue";  } } var bus = new Bus(); alert(bus.color); 

继承接口

//继承接口 interface Shape {  color: string; } interface PenStroke {  penWidth: number; } interface Square extends Shape, PenStroke {  sideLength: number; } 

可选属性

interface ICar {  color:string;  safetyDevice?:any;//实现类无需实现 } function MoveCar(car:ICar){  if(car.safetyDevice)  {   alert("The car is safe");  }  else  {   alert("The car is not safe");  } } 

4.模块（Modules）

基本语法

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(); // 类似于 'new Shapes.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;     };

可选参数

//可选参数 function buildName(firstName:string, lastName?:string) {     if (lastName)         return firstName + " " + lastName;     else return firstName; } var result1 = buildName("Bob");

默认参数

//默认参数 function buildNameDefaultValue(firstName: string, lastName = "Smith") {         return firstName + " " + lastName; } var result1 = buildNameDefaultValue("Bob");

可变参数

例如在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); 

重载

//重载 function student(name:string):string; function student(age:number):number; function student(numberorage:any):any {  if (numberorage && typeof (numberorage) == "string")   alert("姓名");  else   alert("年龄"); } student("Tom");//alert("姓名") student(15);//alert("年龄") 

5.泛型

基本语法

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);//error loggingIdentity({length: 10, value: 3});  //只要类型包含length属性即可 

泛型类约束

class Findable<T> {     //... } function find<T>(n: T, s: Findable<T>) {     // ... } 

6.合并

合并接口

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 { } } //相当于 module Animals {  exportinterface Legged { numberOfLegs: number; }  exportclass Zebra { }  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;   }  } } 

不能合并

• 类与类不能合并
• 接口与类不能合并
• 变量与类不能合并