typescript 学习

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.ts
import app from './app'
console.log(app)# app.ts
export 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<number> = [1, 2, 3];# 元组
let x: [string, number];
x = ['hello', 10]; // OK
x = [10, 'hello']; // Error
console.log(x[0].substr(1)); // OK
console.log(x[1].substr(1)); // Error, 'number' does not have 'substr'
x[3] = 'world'; // OK
onsole.log(x[1].toString()); // OK， 'string' 和 'number' 都有 toString
x[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 boolean

let list: any[] = [1, true, "free"];
list[1] = 100;# void
function 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 }