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; // 1

enum Color {Red = 1, Green, Blue};
let c: Color = Color.Green; // 2

enum 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 }