typescript将在不久的将来从前端大一统的趋势中脱颖而出成为主流编译器。学习ts对前端开发人员来说是不可或缺的。同时，也要抓紧学习es2015/6/7。ts和es6并不是对立的。而是相辅相成的。ts的竞争和打击对象实质上是babel……

官方资料

 # 官方地址：

 https://www.tslang.cn

 # github:

 https://github.com/Microsoft/TypeScript

 # 官方文档

 http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-2.html

安装与编译：

# 安装 npm install -g typescript

# 编译 tsc helloworld.ts

 

demo1：支持Commonjs规范

# helloworld.tsimport app from './app'console.log(app)# app.tsexport default {    sayHello () {        console.log("Hello World!!")    }}

执行tsc helloworld.ts

控制台执行：node helloworld

控制台输出：Hello World!!

 

 

demo2: 快速扫基础篇

# 基础类型let isDone: boolean = false;let decLiteral: number = 6;let name: string = "bob";# 模板字符串 和 内嵌表达式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
     
       = [1, 2, 3];# 元组let x: [string, number];x = ['hello', 10]; // OKx = [10, 'hello']; // Errorconsole.log(x[0].substr(1)); // OKconsole.log(x[1].substr(1)); // Error, 'number' does not have 'substr'x[3] = 'world'; // OKonsole.log(x[1].toString()); // OK， 'string' 和 'number' 都有 toStringx[6] = true; // Error, 布尔不是(string | number)类型
     

 

demo3: 快速扫基础篇2

# 枚举// 默认情况下，从 0 开始为元素编号enum Color {Red, Green, Blue};let c: Color = Color.Green; // 1enum Color {Red = 1, Green, Blue};let c: Color = Color.Green; // 2enum Color {Red = 1, Green = 2, Blue = 4};let c: Color = Color.Green; // 2//查找相应的名字enum Color {Red = 1, Green, Blue};let colorName: string = Color[2];console.log(colorName) // Green# 任意值let notSure: any = 4;notSure = "maybe a string instead";notSure = false; // okay, definitely a booleanlet list: any[] = [1, true, "free"];list[1] = 100;# voidfunction warnUser(): void {    alert("This is my warning message");}

 

demo4 : ts的核心之一 接口

# 接口初探function printLabel(labelledObj: { label: string }) {    console.log(labelledObj.label);}let myObj = { size: 10, label: "Size 10 Object" };printLabel(myObj);  // Size 10 Object类型检查器会查看 printLabel 的调用。 printLabel 有一个参数，并要求这个对象参数有一个名为 label 类型为 string 的属性。 需要注意的是，我们传入的对象参数实际上会包含很多属性，但是编译器只会检查那些必需的属性是否存在，并且其类型是否匹配。// 将接口单独抽离出来interface LabelledValue {    label: string;}function printLabel(labelledObj: LabelledValue) {    console.log(labelledObj.label);}let myObj = {size: 10, label: "Size 10 Object"};printLabel(myObj);类型检查器不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以。# 接口可选属性interface SquareConfig {    color?: string;    width?: number;}function createSquare(config: SquareConfig): {color: string; area: number} {    let newSquare = {color: "white", area: 100};    if (config.color) {    newSquare.color = config.color;    }    if (config.width) {    newSquare.area = config.width * config.width;    }    return newSquare;}let mySquare = createSquare({color: "black"}); // { color: 'black', area: 100 }