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

未完待續...