本文參考鏈接:TypeScript 基本語法
1. 類
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)
- 修飾符
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)
2.模塊（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(); // 類似于 'new Shapes.Polygons.Square()'
3.函數（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("年齡")
4.泛型
- 基本語法
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>) {
// ...
}
