TypeScript基础知识

1. 基础类型定义

//布尔值
let isDone: boolean = false;

//数字
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

//字符串
let name: string = “Gene”;
let sentence: string = `Hello, my name is ${ name }.`;

//数组
let list: number[] = [1, 2, 3];  //由number类型元素组成的数组
let list: Array<number> = [1, 2, 3];  //数组泛型方式：Array<元素类型>

//元组Tuple《表示一个已知元素数量和类型(不同)的数组》
let x: [string, number];   // Declare a tuple type
x = ['hello', 10]; // Initialize it, OK
x = [10, 'hello']; // Initialize it incorrectly, Error
/* 当访问一个越界的元素，会使用联合类型替代：*/
x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型
console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString
x[6] = true; // Error, 布尔不是(string | number)类型

//联合类型(通过管道(|)将变量设置多种类型)
var val:string|number 
val = 12 
console.log("数字为 "+ val) 
val = "Runoob" 
console.log("字符串为 " + val)

//枚举
enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;
let colorName: string = Color[2];
console.log(colorName);  // 可由枚举的值2得到它的名字'Green'

//Any(为不清楚类型的变量所指定的类型)
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean
let list: any[] = [1, true, "free"];
list[1] = 100;

//Void(没有任何类型)
let unusable: void = undefined;

//Null 和 Undefined
let u: undefined = undefined;
let n: null = null;

//Never(表示永不存在的值类型)
/* 返回never的函数必须存在无法达到的终点 */
function error(message: string): never {
    throw new Error(message);
}
function infiniteLoop(): never {
    while (true) {
    }
}

//Object(非原始类型)
declare function create(o: object | null): void;
create({ prop: 0 }); // OK
create(null); // OK
create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

//类型断言
/* 尖括号语法形式: */
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
/* as语法形式: */
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

2. 函数

• 可选参数使用问号?标识

function buildName(firstName: string, lastName?: string) {
    ...
}

• 默认参数使用=赋默认值

function calculate_discount(price:number,rate:number = 0.50) { 
    ...
} 

• 剩余参数是用…为前缀的数组

function buildName(firstName: string, ...restOfName: string[]) {
    ...
}

3. 接口

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现。

• 接口定义

interface LabelledValue {
  label: string;
  color?: string;  //可选属性
  readonly x: number;  //只读属性
  [propName: string]: any;  //索引签名
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

• 函数类型：定义一个只有参数类型和返回值类型的函数

interface SearchFunc {
  (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  let result = source.search(subString);
  return result > -1;
}

• 接口继承

接口继承是指接口可以通过其他接口来扩展自己。

单接口继承语法格式：

Child_interface_name extends super_interface_name

多接口继承语法格式：

Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name

继承实例

//单接口继承
interface Person { 
   age:number 
} 
 
interface Musician extends Person { 
   instrument:string 
} 
 
var drummer = <Musician>{}; 
drummer.age = 27 
drummer.instrument = "Drums" 
console.log("年龄:  "+drummer.age)
console.log("喜欢的乐器:  "+drummer.instrument)

//多接口继承
interface IParent1 { 
    v1:number 
} 
 
interface IParent2 { 
    v2:number 
} 
 
interface Child extends IParent1, IParent2 { } 
var Iobj:Child = { v1:12, v2:23} 
console.log("value 1: "+Iobj.v1+" value 2: "+Iobj.v2)

4. 类

类的数据成员包括：字段、构造函数、方法。

class Car { 
   // 字段
   engine:string; 
   
   // 构造函数
   constructor(engine:string) { 
      this.engine = engine 
   }  
   
   // 方法
   disp():void { 
      console.log("函数中显示发动机型号  :   "+this.engine) 
   } 
} 
 
// 创建一个对象
var obj = new Car("XXSY1")
 
// 访问字段
console.log("读取发动机型号 :  "+obj.engine)  
 
// 访问方法
obj.disp()

• 类的继承

class Shape { 
   Area:number 
   
   constructor(a:number) { 
      this.Area = a 
   } 
} 
 
class Circle extends Shape { 
   disp():void { 
      console.log("圆的面积:  "+this.Area) 
   } 
}
  
var obj = new Circle(223); 
obj.disp()

• 访问控制符

1. public（默认） : 公有，可以在任何地方被访问。
2. protected : 受保护，可以被其自身以及其子类和父类访问。
3. private : 私有，只能被其定义所在的类访问。

• 类和接口
  类可以实现接口，使用关键字implements,并将接口字段作为类的属性使用。

interface ILoan { 
   interest:number 
} 
 
class AgriLoan implements ILoan { 
   interest:number 
   rebate:number 
   
   constructor(interest:number,rebate:number) { 
      this.interest = interest 
      this.rebate = rebate 
   } 
} 
 
var obj = new AgriLoan(10,1) 
console.log("利润为 : "+obj.interest+"，抽成为 : "+obj.rebate )

5. 命名空间

命名空间使用namespace来定义。

namespace SomeNameSpaceName { 
   export interface ISomeInterfaceName {      }  
   export class SomeClassName {      }  
}

//在另一个命名空间的调用语法格式
SomeNameSpaceName.SomeClassName;

//命名空间在单独的typescript文件中使用三斜杠///引用
/// 

• 嵌套命名空间

命名空间支持嵌套，即可以将命名空间定义在另外一个命名空间里头。
成员的访问使用.号来实现。

//Invoice.ts 文件代码：
namespace Runoob { 
   export namespace invoiceApp { 
      export class Invoice { 
         public calculateDiscount(price: number) { 
            return price * .40; 
         } 
      } 
   } 
}
//InvoiceTest.ts 文件代码：
/// 
var invoice = new Runoob.invoiceApp.Invoice(); 
console.log(invoice.calculateDiscount(500));

6. 模块

模块导出使用关键字export，语法格式为：

// 文件名 : SomeInterface.ts 
export interface SomeInterface { 
   // 代码部分
}

在另一个文件使用该模块需要使用import关键字来导入：

import someInterfaceRef = require("./SomeInterface");

7. 声明文件

声明文件为一个描述js库和模块信息的文件，以.d.ts为后缀，通过引用声明文件，可以借用ts的各种特性来使用库文件。

• 声明文件或模块的语法格式

declare module Module_Name {
}
//引入声明文件
/// 

• 声明文件实例

//CalcThirdPartyJsLib.js 文件代码：
var Runoob;  
(function(Runoob) {
    var Calc = (function () { 
        function Calc() { 
        } 
    })
    Calc.prototype.doSum = function (limit) {
        var sum = 0; 
 
        for (var i = 0; i <= limit; i++) { 
            sum = sum + i; 
        }
        return sum; 
    }
    Runoob.Calc = Calc; 
    return Calc; 
})(Runoob || (Runoob = {})); 
var test = new Runoob.Calc();

//对应声明文件 Calc.d.ts代码：
declare module Runoob { 
   export class Calc { 
      doSum(limit:number) : number; 
   }
}
//ps: 声明文件不包含实现，它只是类型声明

//CalcTest.ts 文件代码：
///  
var obj = new Runoob.Calc(); 
// obj.doSum("Hello"); // 编译错误
console.log(obj.doSum(10));