TypeScript 学习笔记

/**
* Created by Administrator on 2016/8/12.
*/

//TypeScript介绍
//1.TypeScript简介:
//    TypeScript是微软开发的JavaScript的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行.
//2.TypeScript与JavaScript比较:
//    TypeScript与JavaScript相比进步的地方包括:加入注释,让编译器理解所支持的对象和函数,编译器会溢出注释,不会增加开销;增加一个完整的类结构,使之更新是传统的面向对象语言.
//3.语法特性:
//    类    Classes
//接口  Interfaces
//模块  Modules

如果你想安装或更新最新版，执行npm install typescript -g//数据类型//申明方式var name: string = "bob";console.log(name);//数据类型//1.Boolean 布尔值var isDone: boolean = false;//Number 数字var decLiteral: number = 6;//Array 数组//你在数组元素类型后面添加‘[]’来表示这是一个该类型的数组var list: number[] = [1, 2, 3];//用的数组类型表示，Array<数组元素类型>var list: Array<number> = [1, 2, 3];//Enum 枚举enum Color1 {Red, Green, Blue};var color: Color1 = Color1.Green;console.log(color);//1//设置成从1开始计数enum Color2 {Red = 1, Green, Blue};var c: Color2 = Color2.Green;console.log(c);//2//直接查找这个数值对应的名称：enum Color3 {Red = 1, Green, Blue};var colorName: string = Color3[2];console.log(colorName);//Green//不明确的变量var notSure: any = 4;//void就像any的相反面：void就是没有，any就是所有。// 没有返回值的函数就可以认为是'void'类型：function warnUser(): void {console.log("This is my warning message");}//接口

//简单示例来观察接口是如何工作的function printLabel(labelledObj: { label: string }) {alert(labelledObj.label);}var myObj = {  label: "Size 10 Object" };printLabel(myObj);//使用接口来描述interface LabelledValue {label: string;}function printLabel1(labelledObj: LabelledValue) {console.log(labelledObj.label);}var myObj1 = {size: 10, label: "Size 10 Object"};printLabel(myObj1);//可选的属性interface SquareConfig {color?: string;width?: number;}function createSquare(config: SquareConfig): {color: string; area: number} {var newSquare = {color: "white", area: 100};console.log( newSquare.color+ "newSquare.color---");if (config.color) {console.log( config.color+ "newSquare.color000");// Error: Property 'collor' does not exist on type 'SquareConfig'newSquare.color = config.color;  // Type-checker can catch the mistyped name hereconsole.log( newSquare.color+ "newSquare.color1111");}if (config.width) {newSquare.area = config.width * config.width;console.log( newSquare.area+" newSquare.area");}return newSquare;}//调用函数var mySquare = createSquare({color: "black"});

//函数类型//它就像是一个只有参数列表和返回值类型的函数定义//函数的参数名不需要与接口里定义的名字相匹配interface SearchFunc {(source: string, subString: string): boolean;}var mySearch: SearchFunc;mySearch = function(source: string, subString: string) {var result = source.search(subString);if (result == -1) {return false;}else {return true;}}

//class类型//TypeScript也能够用它来明确的强制一个类去符合某种契约。//oc 遵守协议interface ClockInterface {currentTime: Date;setTime(d: Date);}class Clock implements ClockInterface {currentTime: Date;setTime(d: Date) {this.currentTime = d;}constructor(h: number, m: number) { }}

//接口继承 可以继承多个interface Shape {color: string;}interface PenStroke {penWidth: number;}interface Square extends Shape, PenStroke {sideLength: number;}var square = <Square>{};square.color = "blue";square.sideLength = 10;square.penWidth = 5.0;

//类

//我们声明一个Greeter类。这个类有3个成员：一个叫做greeting的属性，一个构造函数和一个greet方法。class Greeter {greeting: string;constructor(message: string) {this.greeting = message;} //构造函数greet() {return "Hello, " + this.greeting;}}var greeter = new Greeter("world");console.log(greeter.greeting+"1xxx");//new构造了Greeter类的一个实例。 它会调用之前定义的构造函数，构造函数的参数必须传入// 创建一个Greeter类型的新对象，并执行构造函数初始化它

//类的继承，可以子类可以重写父类的方法class Animal {name:string;constructor(theName: string) { this.name = theName; }move(distanceInMeters: number = 0) {console.log(`${this.name} moved ${distanceInMeters}m.`);}}class Snake extends Animal {constructor(name: string) { super(name); }move(distanceInMeters = 5) {console.log("Slithering...");super.move(distanceInMeters);}}class Horse extends Animal {constructor(name: string) { super(name); }move(distanceInMeters = 45) {console.log("Galloping...");super.move(distanceInMeters);}}var sam = new Snake("Sammy the Python");var tom: Animal = new Horse("Tommy the Palomino");sam.move();tom.move(34);

//1.子类可以访问父类的属性和方法，//2.也可以重新父类的方法，//3.包含constructor函数的派生类必须调用super()，它会执行基类的构造方法//1.公共，私有与受保护的修饰符//2.在TypeScript里，每个成员默认为public的//3.当成员被标记成private时，它就不能在声明它的类的外部访问//1.protected修饰符与private修饰符的行为很相似，//2.但有一点不同，protected成员在派生类中仍然可以访问//通过Employee类的实例方法访问//TypeScript支持getters/setters来截取对对象成员的访问//相当于OC的get和set方法var passcode = "secret passcode";class Employee {private _fullName: string;get fullName(): string {return this._fullName;}//爆红是因为编译器版本的问题set fullName(newName: string) {if (passcode && passcode == "secret passcode") {this._fullName = newName;}else {console.log("Error: Unauthorized update of employee!");}}}var employee = new Employee();employee.fullName = "Bob Smith";//此处使用了set的方法if (employee.fullName) {alert(employee.fullName);}

命名空间

//命名空间是位于全局命名空间下的一个普通的带有名字的JavaScript对象。//“内部模块”现在叫做“命名空间”。//另外，任何使用module关键字来声明一个内部模块的地方都应该使用namespace关键字来替换。//以便于在记录它们类型的同时还不用担心与其它对象产生命名冲突。/*下面的例子里，把所有与验证器相关的类型都放到一个叫做Validation的命名空间里。1.因为我们想让这些接口和类在命名空间之外也是可访问的，所以需要使用export。 相反的，2.变量lettersRegexp和numberRegexp是实现的细节，不需要导出，因此它们在命名空间外是不能访问的。3. 在文件末尾的测试代码里，由于是在命名空间之外访问，因此需要限定类型的名称，比如Validation.LettersOnlyValidator。下面的例子里，把所有与验证器相关的类型都放到一个叫做Validation的命名空间里。4.因为我们想让这些接口和类在命名空间之外也是可访问的，所以需要使用export。5.相反的，变量lettersRegexp和numberRegexp是实现的细节，不需要导出，因此它们在命名空间外是不能访问的。6.在文件末尾的测试代码里，由于是在命名空间之外访问，因此需要限定类型的名称，比如Validation.LettersOnlyValidator。*/

namespace Validation {export interface StringValidator {isAcceptable(s: string): boolean;}const lettersRegexp = /^[A-Za-z]+$/;const numberRegexp = /^[0-9]+$/;export class LettersOnlyValidator implements StringValidator {isAcceptable(s: string) {return lettersRegexp.test(s);}}export class ZipCodeValidator implements StringValidator {isAcceptable(s: string) {return s.length === 5 && numberRegexp.test(s);}}}

// Some samples to tryvar strings = ["Hello", "98052", "101"];// Validators to usevar validators: { [s: string]: Validation.StringValidator; } = {};validators["ZIP code"] = new Validation.ZipCodeValidator();validators["Letters only"] = new Validation.LettersOnlyValidator();// Show whether each string passed each validatorstrings.forEach(s => {for (var name in validators) {console.log(`"${ s }" - ${ validators[name].isAcceptable(s) ? "matches" : "does not match" } ${ name }`);}});

模块

//像命名空间一样，模块可以包含代码和声明。 不同的是模块可以声明它的依赖。//模块会把依赖添加到模块加载器上（例如CommonJs / Require.js）/*模块在其自身的作用域里执行，而不是在全局作用域里；这意味着定义在一个模块里的变量，函数，类等等在模块外部是不可见的，除非你明确地使用export形式之一导出它们。相反，如果想使用其它模块导出的变量，函数，类，接口等的时候，你必须要导入它们，可以使用import形式之一。模块是自声明的；两个模块之间的关系是通过在文件级别上使用imports和exports建立的。模块使用模块加载器去导入其它的模块。 在运行时，模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。 大家最熟知的JavaScript模块加载器是服务于Node.js的CommonJS和服务于Web应用的Require.js。*///任何声明（比如变量，函数，类，类型别名或接口）都能够通过添加export关键字来导出。export interface StringValidator1 {isAcceptable(s: string): boolean;}

//导出语句很便利，因为我们可能需要对导出的部分重命名，所以上面的例子可以这样改写class ZipCodeValidator implements StringValidator1 {isAcceptable(s: string) {return s.length === 5 && numberRegexp.test(s);}}export { ZipCodeValidator };export { ZipCodeValidator as mainValidator };//导入一个模块中的某个导出内容import { ZipCodeValidator } from "./ZipCodeValidator";var myValidator = new ZipCodeValidator();//可以对导入内容重命名import { ZipCodeValidator as ZCV } from "./ZipCodeValidator";var myValidator = new ZCV();//将整个模块导入到一个变量，并通过它来访问模块的导出部分import * as validator from "./ZipCodeValidator";var myValidator = new validator.ZipCodeValidator();

//export = 和 import = require()//export =语法定义一个模块的导出对象。 它可以是类，接口，命名空间，函数或枚举。////若要导入一个使用了export =的模块时，必须使用TypeScript提供的特定语法// import var = require("module")。ZipCodeValidator.tsvar numberRegexp = /^[0-9]+$/;class ZipCodeValidator {isAcceptable(s: string) {return s.length === 5 && numberRegexp.test(s);}}export = ZipCodeValidator;Test.tsimport zip = require("./ZipCodeValidator");

函数

//函数是JavaScript应用程序的基础。// 它帮助你实现抽象层，模拟类，信息隐藏和模块。//书写完整函数类型/*1.函数类型包含两部分：参数类型和返回值类型。 当写出完整函数类型的时候，这两部分都是需要的。 我们以参数列表的形式写出参数类型，为每个参数指定一个名字和类型。 这个名字只是为了增加可读性。 我们也可以这么写：我们在函数和返回值类型之前使用(=>)符号函数没有返回任何值，你也必须指定返回值类型为void而不能留空。* */var myAdd: (baseValue:number, increment:number) => number =function(x: number, y: number): number { return x + y; };//推断类型 “按上下文归类”，是类型推论的一种var myAdd: (baseValue:number, increment:number) => number =function(x, y) { return x + y; };//可选参数和默认参数//TypeScript里的每个函数参数都是必须的。//JavaScript里，每个参数都是可选的，可传可不传。//没传参的时候，它的值就是undefined。//可选参数必须在必须跟在必须参数后面。function buildName(firstName: string, lastName?: string) {if (lastName)return firstName + " " + lastName;else        return firstName;}//我们也可以为参数提供一个默认值当用户没有传递这个参数或传递的值是undefined时//必须参数后面的带默认初始化的参数都是可选的//带默认值的参数不需要放在必须参数的后面function buildName(firstName: string, lastName = "Smith") {return firstName + " " + lastName;}//剩余参数//在TypeScript里，你可以把所有参数收集到一个变量里：//剩余参数会被当做个数不限的可选参数。// 可以一个都没有，同样也可以有任意个。function buildName(firstName: string, ...restOfName: string[]) {return firstName + " " + restOfName.join(" ");}