typescript介绍

基础类型

布尔值
let isDone:boolean = false;

数字
let hexLiteral:number = 0xf00d;

字符串
let name:string='bob';
还可以使用模板字符串。这种字符串是被反引号包围( ` ),并且以${expr}这种形式嵌入表达式。

let name:string = `Gene`;      
let age:number = 37;    
let sentence:string = `Hello,my name is ${name}.
I'll be ${ age + 1 } years old next month.`  

数组
let list:number[] = [1,2,3];
let list:Array<number> = [1,2,3];//数组泛型

元组Tuple
元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。
let x:[string,number];
x=['hello',10]

枚举
enum类型是对typescript标准数据类型的一个补充。使用枚举类型可以为一组数值赋予友好的名字。
由枚举的值得到它的名字 enum Color {Red = 1,Green,Blue}
let colorName:string = Color[2];// 'Green'

any
let notSure: any = 4;
let list: any[] = [1, true, "free"];

void 表示没有任何类型
当一个函数没有返回值通常：

function warnUser:void{  
   alert("This is my warning message");  
} 

never 永不存在的值的类型

类型断言

• 尖括号语法

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;

接口

• 作用是为类型命名和为代码定义契约

interface LabelValue{
    label:string;
}
function printLabel(labelObj:LabelValue){
console.log(labelObj.label)
}  
let myObj = {size:10,label:"size 10 object"};
printLabel(myObj)

• 类型检查器不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以。

可选属性

interface SquareConfig{
    color?:string;
    width?:number;
}  

只读属性

interface Point{
    readonly x:number;
    readonly y:number;
}
let p1:Point = {x:10,y:20};
p1.x = 5; //error  只能在对象刚刚创建的时候修改其值,赋值后， x和y再也不能被改变了。

• ReadonlyArray<T>类型,确保数组创建后不能再被修改

let a:number[]=[1,2,3,4]
let ro:ReadonlyArray<number> = a;
ro[0] = 12; //error
a= ro; //error
//但是可以用类型断言重写
a= ro as number[];

可索引的类型

interface StringArray{
    [index:number]: string;
}
let myArray:StringArray;
myArray = ["Bob","Fred"];
 
let myStr:string = myArray[0];
 
//索引签名可设为只读
readonly [index:number]: string;

• 上面例子里，我们定义了StringArray接口，它具有索引签名。这个索引签名表示了当用number去索引StringArray时会得到string类型的返回值。
• 共有支持两种索引签名：字符串和数字。

继承接口

interface Shape{
    color:string;
}
interface Square extends Shape{
    slideLength:number;
}
let square = <Square>{};
square.color = 'blue';
square.slideLength = 10;

类

继承

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)
    }
}
let sam = new Snake("Sammy the Python");
let tom:Animal = new Horse("Tommy the Palomino");
 
sam.move();
tom.move(34);

• 派生类包含了一个构造函数，它必须调用super(),它会执行基类的构造函数。
• 在构造函数里访问this的属性之前，我们一定要调用super()。

公共、私有与受保护的修饰符

• 在Typescript里，成员都默认为public。
• 当成员被标记成为private时，它就不能在声明它的类的外部访问。
• 当两个类型中存在的private成员是来自同一处声明时，我们才认为这两个类型是兼容的。对于protected成员也使用这个规则。
• protected成员在派生类中仍然可以访问。
• readonly修饰符 只读属性必须在声明时或构造函数里初始化。

class Octopus{
    readonly name:string;
}

参数属性 把声明和赋值合并至一处

存取器 get/set

静态属性
静态属性存在于类本身上而不是类的实例上。每个实例想要访问这个属性的时候，都要在origin前面加上类名，如同在实例属性上使用this.前缀来访问属性一样。

class Grid{
    static origin = {x:0,y:0};
    calculate(point:{x:number;y:number}){
        let xDist = (point.x - Grid.origin.x)
    }
}

抽象类

• 抽象类做为其他派生类的基类使用，他们一般不会直接被实例化。
• 抽象类中的抽象方法必须在派生类中实现。

abstract class Department{
    constructor(public name:string){
    }
    printName():void{
        console.log('')
    }
    abstract printMeeting():void;//必须在派生类中实现
}
 
class AccountDep extends Department{
    constructor(){
        super('Accounting and Auditing')//在派生类的构造函数中必须调用super()
    }
    printMeeting(): void {
        console.log('The Accounting Department meets each Monday at 10am.');
    }
 
    generateReports(): void {
        console.log('Generating accounting reports...');
    }
 
    let department: Department; // 允许创建一个对抽象类型的引用
    department = new Department(); // 错误: 不能创建一个抽象类的实例
    department = new AccountingDepartment(); // 允许对一个抽象子类进行实例化和赋值
    department.printName();
    department.printMeeting();
    department.generateReports(); // 错误: 方法在声明的抽象类中不存在
}

模块

export {ZipCodeValidator };
export {ZipCodeValidator as mainValidator}
export * from "./StringValidator" 
 
import {ZipCodeValidator} from'./ZipCodeValidator'
import { ZipCodeValidator as ZCV } from "./ZipCodeValidator";
import * as validator from "./ZipCodeValidator";

默认导出

//JQuery.d.ts
declare let $:JQuery;
export default $;
//App.ts
import $ from "JQuery";

• 也可以导出默认值

//OneTwoThree.ts
export default "123";
//Log.ts
import num from "./OneTwoThree.ts";

export = 和import = require()

• Typescript模块支持 export =语法以支持传统的CommonJs和AMD的工作流模型
  export = 与import module = require("module")搭配使用

//ZipCodeValidator.ts
let numberRegexp = /^[0-9]+$/;
class ZipCodeValidator{
    isAcceptable(s:string){
        return s.length === 5 && numberRegexp.test(s) ;
    }
}
export = ZipCodeValidator;
//Test.ts
import zip = require("./ZipCodeValidator")

编译运行

npm install -g typescript

使用Typescript编译器，名称叫tsc，将编译结果生成js文件
用 tsc filename.ts 命令

tsconfig.json文件来存储项目配置，如果运行tsc时不指定输入文件，编译器则会查找项目目录中的这个文件，如果找不到则会依次向父级目录查找。

{
    "compilerOptions":{
        "outFile":"dist/app.js",
        "sourceMap":true
    },
    "files":[
        "src/app.ts"
    ]
    //直接运行，会自动把src/app.ts编译到dist/app.js
}

如果想在typescript中直接使用npm上的js库，需要先安装Typings工具

• npm i -g typings
• typings install --save lodash //以安装lodash为例

使用webpack构建

• 安装ts-loader
  npm i ts-loader --save-dev

module.exports = {
    entry:'./src/app.ts',
    output:{
        filename:'app.js',
        path:'./dist'
    },
    resolve:{
        extensions:['','webpack.js','.web.js','.ts','.js']
    },
    module:{
        loaders:[
            {test:/\.ts$/,loader:'ts-loader'}
        ]
    }
}