多行字串

Typescript 支援多行字串

let text = `start line
end line
`;

字串模板

Typescript 支援字串模板

let n = 1;
function getData(): string {
   return "hello";
}
let text = `${getData()} ${n}`;

text 內容將是 "hello 1"

Spread 運算子

Typescript 支援 Spread, 例如下面示範

function put(x: number, y: number, ...strings: string[]): void { 
   ...
}

上面程式碼相當於 C# 的 params

void Put(decimal x, decimal y, params string[] strings) {
   ...
}

但Spread 運算子還能呼叫連結參數, 例如

var pos=[10,20], texts=["one","two"];
put(...pos, "hello", ...texts, "world");

相當於

drawText(10,20,"hello","one","two","world");

for ... of 語法

在Typescript 程式碼中

for (var item of myArray) { 
   ...
}

以上程式碼類似C# 的

foreach(var item in myArray) {
   ...
}

相當於JavaScript 程式碼

for(var idx=0; idx<myArray.length; idx++) {
   var item = myArray[idx];
}

預設參數

如下示範

function sayHello(name:string, lastName:string = "test"): string {
   return name + lastName;
}

型別轉換

在Typescript 中,

var a = <MyClass>getObject();

變數a 被類型推斷為 MyClass 類型, 或者你也可以寫成如下範例, 也有同樣效果

var a = getObject() as MyClass;

看到這裡Typescript 幾個重要的用法和宣告之後, 你可以發現Typescript 不僅能夠有物件Class, 介面Interface, 屬性Property 等清楚的宣告, 很適合套用Design Pattern.

觀察者模式

觀察者模式有兩個角色

• 通知者 Subject -- 就像報社
• 觀察者 Observer -- 就像訂閱報紙的讀者

我們先建立d:\demo2 資料夾, 開啟VSCode, 按下 CTRL + SHIFT + ` 打開Terminal 視窗

yarn init
yarn add -D typescript

新增tsconfig.json 檔案, 這個檔案是用來設定Typescript Compiler 組態

{
  "compilerOptions": {
    "baseUrl": "./src",
    "outDir": "./dist",
    "lib": ["es2015", "dom", "esnext"]
  },
  "include": ["./src/*"],
  "exclude": ["node_modules"]
}

打開package.json 檔案, 新增下面內容

"scripts": {
   "build" : "node ./node_modules/typescript/bin/tsc"
},

在VSCode 新增src 目錄, 並且在裡面建立 Observer.ts 檔案.

首先我們定義觀察者(Observer)--讀者, 讀者負責閱讀

class NewspaperReader {
   read(msg: string): void{
      console.log("新聞", msg);
   }
}

然後我們定義通知者(Subject)報社, 報社負責發送報紙

class MySubject {
   subs: Set<MyObserver> = new Set();
   add(obs: MyObserver): void {
      this.subs.add(obs);
   }
   remove(obs: MyObserver): void{
      this.subs.delete(obs);
   }
   publish(msg: string): void {
      this.subs.forEach(obs => {
         obs.work(msg);
      });
   }
}

接下來我們設定建立一家報社, 有一個訂閱讀者

let newspaperOffice = new MySubject();
let reader = new MyObserver();
newspaperOffice.add(reader);

然後設定報社每秒發行一次新聞

let n = 0;
setInterval(()=>{
   newspaperOffice.publish(`新聞${n}`);
   n++;
}, 1000);

在Terminal 視窗中輸入

yarn build

手動把 dist/Observer.js 檔案內容複製貼到瀏覽器中的開發人員工具控制台中執行看看.