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();
      }
    });
  }
}