此份簡報是 Will 保哥在【Modern Web 2015】的演講內容。
Web技術的變化之快速,不再有任何一家公司或團體可以主導其走向,即便軟體界的巨人微軟也不例外,ASP.NET經過了十多年的發展與演進,終於來到了一個架構翻新的時刻,即將推出的ASP.NET 5到底從架構面、工具面做出了哪些創新與變革,將在這場演說中一一展現。
Azure Web App on Linux @ Global Azure Bootcamp 2017 TaiwanWill Huang
這是 Will 保哥 於 2017/4/22 在 Global Azure Bootcamp 2017 Taiwan 的演講簡報,分享 Azure Web App on Linux 的服務架構、運作方式與注意事項。
Azure Web App on Linux 透過 Docker 容器技術,讓應用程式可以執行在原生 Linux 作業系統之上,這讓 Azure App Service 正式邁向跨平台的 PaaS 雲端服務。
此簡報為 Will 保哥 於 2015/6/25 (四) 接受 SQL PASS Taiwan 邀請演講的內容。
現場錄影: http://www.microsoftvirtualacademy.com/training-courses/sql-server-realase-management?mtag=MVP4015686
[ Will 保哥的部落格 - The Will Will Web ]
http://blog.miniasp.com
[ Will 保哥的技術交流中心 ] (Facebook 粉絲專頁)
https://www.facebook.com/will.fans
[ Will 保哥的噗浪 ]
http://www.plurk.com/willh/invite
[ Will 保哥的推特 ]
https://twitter.com/Will_Huang
[ Will 保哥的 G+ 頁面 ]
http://gplus.to/willh
「我是一個前端工程師,每次要進行頁面套版時,都要等後端工程師寫好 API 才能測試,我覺得很痛苦,但公司的後端我又叫不動,有沒有甚麼方法可以簡單的設計出 RESTful API,讓我可以立即套版使用?我不想每次都苦苦哀求後端工程師快點生出 API 給我!」這是之前某位學生告訴我的一段話,也想必是許多前端工程師的痛,現在,你可以不一樣!
我將在這場分享中講解如何利用 JSON Server 快速建立 RESTful API 服務,讓前端工程師可以在完全沒有後端開發能力的情況下,自行設計出任意格式的 API 讓自己使用。本次直播完全免費,當天還會簡單示範如何在 Angular 使用 Http 服務元件呼叫自製的 API!
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)Will Huang
Windows Server 2019 隨之而來的容器功能,帶領 Windows 容器化邁向另一個里程碑。本次演講將介紹全新容器功能,以及跟 Kubernetes 整合的歷程,並透過線上展示 Windows Server 2019 加入到 Kubernetes 叢集的完整步驟!
👉 Windows Server 高峰會
https://www.microsoft.com/taiwan/events/windows-server-2019/
3. An gu la r
User Group Taiwan
找出 TypeScript 編譯器的路徑與版本
若 PATH 環境變數有問題,使用 Rapid Environment Editor 可快速修復!
npm list -g --depth=0
where tsc
tsc -v
4. An gu la r
User Group Taiwan
tsc --init
初始化 tsconfig.json 設定檔
5. An gu la r
User Group Taiwan
編譯所有檔案 (讀取 tsconfig.json 設定檔) (預設編譯含子目錄下的所有檔案)
• tsc
編譯單一檔案 (需指定 TypeScript 編譯器選項)
• tsc [options] [file ...]
顯示完整的 TypeScript 編譯器選項
• tsc --all
顯示 tsc 編譯器摘要說明
• tsc -h
編譯 TypeScript 程式
6. An gu la r
User Group Taiwan
問題說明
• ng new --minimal demo1
• code demo1
• 透過 VSCode 檔案總管將 src/environments 目錄移到 src/app/ 目錄下
• npm start
Angular 下的 TypeScript 偵錯技巧
Allow to disable drag and drop in the files explorer #4842
( "explorer.enableDragAndDrop": false )
7. An gu la r
User Group Taiwan
Glob support in tsconfig.json
• * 代表 0 個到多個字元比對 (不含目錄分隔字元)
• ? 代表 1 個字元比對 (不含目錄分隔字元)
• **/ 代表比對任意子目錄
設定 Base URL 預設 import 的基底路徑
設定 Path mapping
• 必須搭配 "baseUrl" 設定一起使用
• Angular CLI 專案只能設定在根目錄的 tsconfig.json 設定檔中
tsconfig.json 設定技巧
8. An gu la r
User Group Taiwan
預設載入內建的模組定義檔 ( --lib )
es2015.core
es2015.collection
es2015.iterable
es2015.promise
es2015.proxy
es2015.reflect
es2015.generator
es2015.symbol
es2015.symbol.wellknown
dom (Angular 5)
webworker
es5
es6 / es2015
es2016
es2016.array.include
es2017 (Angular 5)
es2017.object
es2017.sharedmemory
scripthost
10. An gu la r
User Group Taiwan
let decimal = 100;
let isDone = false;
let fullName: string = `Will`;
let obj = {};
obj.name = 'Will';
let arr = [];
arr.push({});
自動型別推導 (Type Inference)
11. An gu la r
User Group Taiwan
列舉範例
• http://www.typescriptlang.org/play/index.html
列舉型別 (Enum)
var Day;
(function (Day) {
Day[ Day["Sunday"] = 0 ] = "Sunday";
Day[ Day["Monday"] = 1 ] = "Monday";
Day[ Day["Tuesday"] = 2 ] = "Tuesday";
Day[ Day["Wednesday"] = 3 ] = "Wednesday";
Day[ Day["Thursday"] = 4 ] = "Thursday";
Day[ Day["Friday"] = 5 ] = "Friday";
Day[ Day["Saturday"] = 6 ] = "Saturday";
})(Day || (Day = {}));
var d = Day.Friday;
enum Day {
Sunday,
Monday,
Tuesday,
Wednesday,
Thursday,
Friday,
Saturday
}
var d = Day.Friday;
12. An gu la r
User Group Taiwan
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
let a = document.getElementById('myLink'); // HTMLElement 型別
a.href = "http://blog.miniasp.com/"; // 找不到 href 屬性
let a = <HTMLAnchorElement>document.getElementById('myLink');
a.href = "http://blog.miniasp.com/"; // OK
型別轉換 (Type assertions)
13. An gu la r
User Group Taiwan
排除過度屬性檢查的型別宣告技巧
允許任意屬性的物件宣告
interface ILabel {
label: string; // 必要屬性,必須傳入!
[propName: string]: any; // 允許任意屬性傳入
}
function printLabel(labelledObj: ILabel) {
console.log(labelledObj.label);
}
printLabel({ label: "Size 10 Object", size: 10 });
14. An gu la r
User Group Taiwan
預設型別檢查模式 ( regular type checking mode )
• let a: T; // 可以指派給 undefined 或 null
// 因為 undefined 與 null 是所有型別的子型別
嚴格空值檢查模式 ( strict null checking mode ) ( --strictNullChecks )
• let a: T; // 不允許為 undefined 或 null (嚴格檢查)
• let a: T | null; // 不允許為 undefined 也代表要有初始值才能用
• let a: T | undefined;
• let a: T | undefined | null;
• 可選參數預設就擁有 undefined 型別,啟用嚴格空值檢查模式也一樣
type T1 = (x?: number) => string;
TypeScript 2.0 的嚴格空值檢查模式 (1)
15. An gu la r
User Group Taiwan
預設型別檢查模式 ( regular type checking mode )
• let a = null; // a 變數型別為 any
• let b = undefined; // b 變數型別為 any
嚴格空值檢查模式 ( strict null checking mode ) ( --strictNullChecks )
• let a = null; // a 變數型別為 null
• let b = undefined; // b 變數型別為 undefined
TypeScript 2.0 的嚴格空值檢查模式 (2)
16. An gu la r
User Group Taiwan
非空值斷言運算子 ( ! ) ( Non-null assertion operator )
TypeScript 2.0 的嚴格空值檢查模式 (3)
17. An gu la r
User Group Taiwan
傳統的聯合類型
• let a = number | string | undefined;
字串實字聯合類型 (String Literal Types)
• let b = "Will" | "John" | "Mary";
數值實字聯合類型 (Numeric Literal Types)
• function rollDie(): 1 | 2 | 3 | 4 | 5 | 6 { }
列舉成員聯合類型 (Enum Member Types)
• let kind: ShapeKind.Square | ShapeKind.Circle;
標記的聯合類型 ( 深度分析程式碼對型別的用法進而做出型別判斷 )
• https://github.com/Microsoft/TypeScript/wiki/What's-new-in-
TypeScript#tagged-union-types
標記的聯合類型 (Tagged union types)
18. An gu la r
User Group Taiwan
原始型別 never 用來宣告某個函式或變數永遠不可能有值
• let a: never = function test() { while (true) { } };
關於 void 型別的特性
• 宣告 void 型別的變數只能是 undefined 與 null ( 代表沒有值 )
• undefined 與 null 是所有型別的子型別 (subtype)
關於 never 型別的特性
• never 是所有型別的子型別 (subtype),所以不用特別宣告!
• 沒有任何型別是 never 的子型別 ( 除了 never 以外 )
• 若函式表達式或箭頭函式要能自動推導出 never 型別,有以下條件:
• 函式中沒有任何 return 敘述或回傳的只會有 never 型別
• 函式一定不能跑到函式最後一行 (end point of the function is not reachable)
TypeScript 2.0 推出的 never 原始型別
19. An gu la r
User Group Taiwan
TypeScript 1.x 以下的編譯器
• 預設函式內使用 this 預設型別為 any
TypeScript 2.0 編譯器新增 --noImplicitThis 旗標
• 在函式中預設無法使用型別為 any 的 this 變數!
• 如果要使用 this 必須在函式的第一個參數加入 this 的型別宣告
( 編譯之後的 JavaScript 會自動移除 this 參數 )
在函式中使用 this 的嚴格用法
20. An gu la r
User Group Taiwan
TypeScript 2.1 編譯器新增 --noImplicitAny 旗標
Untyped imports
• import { x } from "asdf";
• 匯入的模組如果沒有 declaration file,預設匯入的變數將會是 any 型別
• 如果啟用 --noImplicitAny 就會出現錯誤訊息
Improved any Inference
• let x; // implicitly 'any'
• let y = []; // implicitly 'any[]'
• let z: any; // explicitly 'any'
• 以前宣告完變數如果沒給型別宣告,預設就是隱含的 any 型別
• 如果啟用 --noImplicitAny 就會:
• 從第一次 assign 值的時候決定型別
• 如果執行的過程中修改了變數的值,型別也會動態轉換 (依然有編譯時期檢查)
Implicit any errors
• 有任何宣告出 any 型別的機會,就會立刻出現錯誤!
禁用隱含 any 型別功能
21. An gu la r
User Group Taiwan
TypeScript 2.1 編譯器新增 --alwaysStrict 旗標
啟用這個旗標會導致
• 所有的 TypeScript 程式碼都會以 strict mode 進行解析
• 所有輸出的 JavaScript 程式碼都會加上 "use strict"; 在每個 Scope
注意事項
• 所有相關模組都會自動進入嚴格編譯模式
• 建議用在 non-module 的程式碼
永遠採用嚴格編譯模式
23. An gu la r
User Group Taiwan
ES2017 Spread and Rest
• let copy = { ...original }; // shallow copy
• let merged = { ...foo, ...bar, ...baz }; // shallow copy
• let obj = { x: 1, y: "string" };
var newObj = {...obj, z: 3, y: 4};
// { x: number, y: number, z: number }
• let obj = { x: 1, y: 1, z: 1 };
let { z, ...obj1 } = obj;
obj1; // {x: number, y: number};
TypeScript 2.1 帶來 ES2017 的 … 功能
24. An gu la r
User Group Taiwan
TypeScript 2.1 讓 Async 函式支援到 ES3
25. An gu la r
User Group Taiwan
TypeScript - JavaScript that scales
What's new in TypeScript · Microsoft/TypeScript Wiki
TypeScript Handbook (中文版)
New in JavaScript - JavaScript | MDN
相關連結
27. An gu la r
User Group Taiwan
The Will Will Web
記載著 Will 在網路世界的學習心得與技術分享
• http://blog.miniasp.com/
Will 保哥的技術交流中心 (臉書粉絲專頁)
• http://www.facebook.com/will.fans
Will 保哥的噗浪
• http://www.plurk.com/willh/invite
Will 保哥的推特
• https://twitter.com/Will_Huang
聯絡資訊
// Compiled with --strictNullChecks
interface Entity {
name: string;
}
function validateEntity(e?: Entity) {
// Throw exception if e is null or invalid entity
}
function processEntity(e?: Entity) {
validateEntity(e);
let s = e!.name; // Assert that e is non-null and access name
}
function delay(milliseconds: number) {
return new Promise<void>(resolve => {
setTimeout(resolve, milliseconds);
});
}
async function dramaticWelcome() {
console.log("Hello");
for (let i = 0; i < 3; i++) {
await delay(500);
console.log(".");
}
console.log("World!");
}
dramaticWelcome();