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 }

?