- 微軟出品,最終編譯成JavaScript
- TypeScript in 5 minutes
- 安裝
- 單獨安裝:npm install -g typescript
- 在Angular的package.json中定義,如在devDependencies中(覺得運行時已經編譯成了JavaScript,再也不須要引用?)定義"typescript": "~2.5.3"
- 編譯
- 不必定用於Angular(新版vue也支持了),能夠單獨編寫ts文件,編譯成js文件,而後直接使用這個js文件
- 用tsc編譯命令:tsc xxx.ts
- 即便編譯有錯誤,也能生成js文件,只不過有warning說可能代碼行爲可能會和預期不符
- 語法
- 會作靜態語法檢查,能夠檢查出大部分錯誤,如參數數量、類型檢查
- 變量
- var
- 全局聲明
- var聲明在函數體外,所聲明的變量爲全局變量。
- var所聲明的全局變量會做爲window的一個屬性,可使用"."來引用
- 做用域
- var變量聲明的最大特色是它的做用域爲聲明語句所在的最近函數體內。
- var聲明變量的做用域爲函數體的所有,隱含着兩個主要問題:變量提高和循環內變量共享。所以不推薦再使用var來定義變量。
- 變量提高
- JavaScript會把函數內的變量聲明提高到函數的最頂部。
- 變量提高有它的優點,但也經常給咱們帶來一些難以發現的bug。
- 循環內變量共享
- 重複聲明
- let
- let是ES6新增的特性,也是爲了解決var變量聲明所存在的一些問題,能夠說let是更完美的var。
- 注意:若是let變量聲明在全局,它並不會像var聲明的變量同樣成爲window的一個屬性。
- 能夠和JavaScript同樣用let定義變量
- 定義數組:let user = [0, 1, 2];
- 做用域
- let變量聲明和var最大的不一樣點就是變量的做用域不同。var爲函數做用域,而let變量聲明的爲塊做用域(block-scoping)。
- 塊做用域會把聲明的變量限定在代碼塊(如使用{}括起來的代碼庫)或者for循環內,而不是整個函數體。
- let聲明的變量不容許在聲明前使用,這樣解決了var變量提高引發的問題。
- 對於循環內的變量,每次循環都會是捕獲值的副本做爲運算,而不是共享同一個值,解決了var循環內共享變量的問題。
- let是不容許在同一做用域內重複聲明,重複聲明會報error: can't re-declare 'x' in the same scope。
- const
- const變量聲明和let相似,但如它的名字所寓意,它定義的是常量,包含了兩層意思:
- 聲明的的變量不能被重複賦值
- const聲明變量是必須馬上賦值
- 對於const聲明的對象,對象自己是不能被賦值覆蓋,可是對象的可修改屬性是容許被修改值的
- 判斷變量的值
- ==
- 比較兩個運算元是否相等,若是相等則結果爲 true
- ===
- 比較兩個運算元的值和類型是否都相等,若是都相等則結果爲 true
- !=
- 比較兩個運算元是否不等,若是不等則結果爲 true
- !==
- 比較兩個運算元的值和類型是否都不等,若是都不等則結果爲 true
- if(value)
- undefined沒法經過檢查
- 0沒法經過檢查
- null能夠經過檢查
- if(typeof value !== 'undefined')
- undefined沒法經過檢查
- 0能夠經過檢查
- null能夠經過檢查
- if(value !== null)
- Typescipt中是有null值的
- undefined能夠經過檢查
- 0能夠經過檢查
- null沒法經過檢查
- 函數
- 參數中須要指定類型,如function greeter(person: string)
- 接口
- TypeScript中只要兩個類型只要內部結構兼容,那麼這兩個類型就是兼容的。所以咱們能夠不用顯式的implements語句就能夠實現一個接口。以下面例子中的user1直接就能夠當作一個Person類型。
- 類
- TypeScript支持JavaScript的新feature,如基於類的面向對象編程
- 類中並不必定要一個個單獨定義成員變量,只要在構造函數的參數列表中使用public關鍵字修飾參數,那麼這些參數就會自動被當作同名的成員變量。以下面例子中的constructor(public firstName: string, public middleInitial: string, public lastName: string)。
class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string, public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user1 = { firstName: "Jane", lastName: "User" };
let user2 = new Student("Jane", "M.", "User");
document.body.textContent = greeter(user1);
document.body.textContent = greeter(user2);
- 其餘
- Typescript中也能夠放JavaScript代碼
import { Component } from '@angular/core';
import * as html2canvas from 'html2canvas';
@Component({
selector: 'xxx-screenshot',
templateUrl: './screenshot.component.html',
styleUrls: ['./screenshot.component.scss']
})
export class ScreenshotComponent {
constructor() { }
/*********************************************************************************/
// Function that gets called to make a Screenshot, using html2canvas
// @param _target = the _target parameter might be NULL, but if not it contains
// the element id that will be used as highest DOM element to take
// the screenshot on.
makeScreenshot(_target) {
// check if target element id is defined otherwise, use default (should be sufficient)
if (_target == null || _target === 'undefined') {
_target = '_dom_id;
}
// html2canvas only copies visible elements to the screenshot canvas. Therefore we set
// everything below our target element visible at first...
document.getElementById(_target).style.overflow = 'visible';
if (document.getElementById('scroll-div-showall-screenshot')) {
document.getElementById('scroll-div-showall-screenshot').classList.remove('scroll-div');
}
// ... take the screenshot...
html2canvas(document.getElementById(_target)).then(canvas => {
// ... make it write out to our
window.open().document.write(`<img src=${canvas.toDataURL()} />`);
// change the overflow style back to default (= auto) so it doesn't mess up the template
document.getElementById(_target).style.overflow = 'auto';
if (document.getElementById('scroll-div-showall-screenshot')) {
document.getElementById('scroll-div-showall-screenshot').classList.add('scroll-div');
}
// unselect screenshot button
if (document.getElementById('screenshot-button')) {
document.getElementById('screenshot-button').blur();
}
});
}
}