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 }

?

總結

以上是生活随笔為你收集整理的typescript 学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。