目录

本文讲解的是JavaScript和TypeScript在使用中容易犯错的点，以及一些特别重要的其他要点。

概述

  1. Javascript是一种轻量级的，解释型编程语言。虽然是以为浏览器页面服务而开发的脚本语言。但也可以用于一些非浏览器的环境。
    • 标准名为ECMAScript，即ES，目前支持较广的高版本为ES6。
  2. Typescript是Javascript的超集。由于Js有一些设计上的问题（或者说特性），在面向大规模工程时，并不是特别好的选择。因此Ts应运而生。

闭包

  1. 闭包中的this:
    1. 使用function进行的闭包定义，其中的this，会在运行时动态解析，导致和编程的含义不同（除非你确实希望是动态时的this）。
    2. 使用箭头函数进行闭包定义，其中的this，会绑定为定义时所在位置的this。在执行时也不会变。推荐
    3. 使用bind等方式，可以在运行时手动绑定this。

自带属性

  1. name：类型名称 
    class A{}
console.log(A.name);

兼容性问题

  1. 概述：兼容性问题目前主要体现在es5和es6上，虽然es6的特性非常好，但是并不能保证所有的浏览器都支持了es6，事实上很多浏览器可能支持的标准更低、更不完善。
  2. babel

Interface

  1. interface是ts中非常灵活的一个种类，提供了非常强大的泛型能力，可以用来限定实现者必须具备的静态、普通成员变量、函数
  2. 限定必须具备的常规成员、静态成员（但是静态成员只属于类型，不属于实例，这一点注意和其他语言区分） 
    interface NormalMember {
    props3:string;
}

interface StaticMember {
    prop1:string;
    build():string;
    // 而这里又要求构造产生一个NormalMember类型
    // 相当于限制了常规的非静态成员
    new():NormalMember
}

class Type {
    static prop1:string="Type";
    static build(): string {
        return "";
    }
    prop3:string;
    constructor() {
        this.prop3="h";
    }
}

buildType(type:StaticMember){
    // 在这一行，会检查，type必须具备StaticMember里要求的成员 
    // 因为是属于类的成员，所以只能是静态成员（构造函数也是）
    return new type();
}

类类型

  1. C++中有模板元编程可以对类类型进行运算，Java则更是提供了完整的关于类类型的表示、处理、反射等内容，Typescript中也有类似功能，但是其实现相对更trick
  2. 基本原理：利用interface、extends、Function共同完成
// 同时限定，返回值类型是T，而且是一个具有new构造函数能力的东西，也就是一种类型
export interface Type<T = any> extends Function {
    new (...args: any[]): T;
}

// 搭配InstanceOf使用，用于获取构造函数类型所构造出的实例类型
function f(t:Type){
    const a: InstanceType<Type> = new t();
}

TypeScript中所谓的类，其实就是一种构造函数，因此所谓类类型，也可以叫做构造函数类型

坑

  1. NaN：数值是否有效，只能用isNaN函数进行判断
  2. null和undefined，==和===：
    • 空变量===undefined成立，而且空变量!==null成立，但空变量==null也成立
    • null==undefined成立，但null!==undefined成立
    • 总之：==和===的主要区别是==会尝试进行类型转换，转换后相等即可，===要求类型内容完全一致

推荐工具

一个有依赖库的在线运行环境：JavaScript PlayGround

参考

  1. TypeScript 中文手册接口(interface)
  2. 同事问我：TypeScript中的new () => Xxx 究竟是什么惊喜？