TypeScript基础入门之Javascript文件类型检查(一)

转载 TypeScript基础入门之Javascript文件类型检查(一)

TypeScript 2.3及更高版本支持使用--checkJs在.js文件中进行类型检查和报告错误。

您能够经过添加//@ts-nocheck注释来跳过检查某些文件; 相反，您能够经过在不设置--checkJs的状况下向其添加//@ts-check注释来选择仅检查几个.js文件。 您还能够经过在前一行添加//@ts-ignore来忽略特定行上的错误。 请注意，若是你有一个tsconfig.json，JS检查将遵循严格的标志，如noImplicitAny，strictNullChecks等。可是，因为JS检查相对松散，将严格的标志与它结合可能会使人惊讶。

如下是.js文件中检查与.ts文件相好比何工做的一些显着差别：

JSDoc类型用于类型信息

在.js文件中，一般能够像.ts文件同样推断类型。 一样，当没法推断类型时，可使用JSDoc指定它们，就像在.ts文件中使用类型注释同样。 就像Typescript同样， --noImplicitAny会给你编译器没法推断类型的地方的错误。 （开放式对象文字除外;有关详细信息，请参见下文。） 装饰声明的JSDoc注释将用于设置该声明的类型。 例如：

/** @type {number} */
var x;

x = 0;      // OK
x = false;  // Error: boolean is not assignable to number

您能够在JavaScript文档中的JSDoc支持中找到受支持的JSDoc模式的完整列表。

属性是从类体中的赋值推断出来的

ES2015没有在类上声明属性的方法。 属性是动态分配的，就像对象文字同样。

在.js文件中，编译器从类主体内的属性赋值中推断属性。 属性的类型是构造函数中给出的类型，除非它没有在那里定义，或者构造函数中的类型是undefined或null。 在这种状况下，类型是这些赋值中全部右侧值的类型的并集。 始终假定构造函数中定义的属性存在，而仅在方法，getter或setter中定义的属性被视为可选。

class C {
    constructor() {
        this.constructorOnly = 0
        this.constructorUnknown = undefined
    }
    method() {
        this.constructorOnly = false // error, constructorOnly is a number
        this.constructorUnknown = "plunkbat" // ok, constructorUnknown is string | undefined
        this.methodOnly = 'ok'  // ok, but y could also be undefined
    }
    method2() {
        this.methodOnly = true  // also, ok, y's type is string | boolean | undefined
    }
}

若是从未在类体中设置属性，则将它们视为未知。 若是您的类具备仅从中读取的属性，请使用JSDoc在构造函数中添加而后注释声明以指定类型。 若是稍后将初始化，您甚至没必要提供值：

class C {
    constructor() {
        /** @type {number | undefined} */
        this.prop = undefined;
        /** @type {number | undefined} */
        this.count;
    }
}


let c = new C();
c.prop = 0;          // OK
c.count = "string";  // Error: string is not assignable to number|undefined

构造函数等同于类

在ES2015以前，Javascript使用构造函数而不是类。 编译器支持此模式，并将构造函数理解为与ES2015类等效。 上述属性推理规则的工做方式彻底相同。

function C() {
    this.constructorOnly = 0
    this.constructorUnknown = undefined
}
C.prototype.method = function() {
    this.constructorOnly = false // error
    this.constructorUnknown = "plunkbat" // OK, the type is string | undefined
}

支持CommonJS模块

在.js文件中，Typescript了解CommonJS模块格式。 对exports和module.exports的赋值被识别为导出声明。 一样，require函数调用被识别为模块导入。 例如：

// same as `import module "fs"`
const fs = require("fs");

// same as `export function readFile`
module.exports.readFile = function(f) {
    return fs.readFileSync(f);
}

Javascript中的模块支持比Typescript的模块支持更具语法上的宽容。 支持大多数分配和声明组合。

类，函数和对象文字是名称空间 类是.js文件中的命名空间。 这能够用于嵌套类，例如：

class C {
}
C.D = class {
}

而且，对于ES2015以前的代码，它能够用于模拟静态方法：

function Outer() {
  this.y = 2
}
Outer.Inner = function() {
  this.yy = 2
}

它还能够用于建立简单的命名空间：

var ns = {}
ns.C = class {
}
ns.func = function() {
}

// IIFE
var ns = (function (n) {
  return n || {};
})();
ns.CONST = 1

// defaulting to global
var assign = assign || function() {
  // code goes here
}
assign.extra = 1

未完待续...