Typescript

  • 微軟出品,最終編譯成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();
      }
    });
  }
}
相關文章
相關標籤/搜索