typescript-工程(五)

22

node默認找.js，解析ts須要安裝

• npm i ts-node -g

• target: es5
  用tsc默認選擇es3

• 若是在命令行中指定了配置文件，tsconfig會被忽略

• module: commonjs tsc ./src/es6/a.ts -t es3 -t target 簡寫

• target爲es3 es5，module默認指定爲es6

• tsc ./src/es6/a.ts -m amd

• -m module 簡寫

• tsc util.ts -d 可生成對應的聲明文件 exports.c = 3 次級導出 module.exports = {} 頂級導出

esModuleInterop: true import c4 = require("./es6/d") 既能夠用import = 方式導入 又能夠用import from 方式導入

23

namespace 用export 導出到全局

命名空間和模塊不要混用，不要在一個模塊中使用命名空間， 命名空間最好在一個全局的環境中使用

1. 編譯成js用index.html script標籤引入進去
2. /// <reference path="a.ts" /> 引用
3. tsc 編譯

命名空間成員的別名問題： import circle = Shape.circle console.log(circal(2))

24 聲明合併

1. 接口之間的聲明合併

interface A {
    x: number;
    foo (bar: number): number;  // 3 _5
    foo (bar: 'a'): number // _2
}
interface A {
      y: number;
      foo (bar: string): string   // 1 _3
      foo (bar: number[]): number[] // 2 _4
      foo (bar: 'b'): number //    _1
}

let a: A = {
    x: 1,
    y: 2，
    foo(bar: any){
        return bar
    }
}

• 這兩個聲明不在一個文件中，也能夠發生聲明合併
• 接口中非函數的成員，要求保證其惟一性，若是不惟一，類型必須相同
• 接口之間的導出的成員是能夠重複定義的
• 對於函數成員，每一個函數都會被聲明爲函數重載，
• 在實現是，就須要指定一個更爲寬泛的類型
• 函數重載須要注意函數聲明的順序；由於編譯器會按順序進行匹配
• 順序肯定的原則：
  • 在接口內部，就是按書寫的順序進行肯定；
  • 在接口之間，後面定義的會排在前面
  • 有個例外，就是函數的參數是個字符串字面量，那麼這個聲明就會被提高到函數聲明的最頂端；
  • 擁有字符串字面量參數的函數會排在最前面

2. 命名空間之間的聲明合併

• 須要注意
  1. 命名空間中導出的成員是不能重複定義的；接口之間的導出的成員是能夠重複定義的

3. 命名空間和函數的聲明合併

function Lib() {}
namespace Lib {
    export let version = "1.0"
}

console.log(Lib.version) // 1.0
- 至關於聲明瞭一個Lib函數，在函數裏面導出了一個屬性

4. 命名空間和類的聲明合併

class   C {}
namespace C {
    export let state = 1
}
console.log(C.state)

至關於給類添加了一個靜態屬性state

5. 命名空間和枚舉的聲明合併

enum Color {
    Red,
    Yellow,
    Blue
}

namespace Color {
    export function min(){
}
// 就至關於給這個枚舉類型增長了一個方法
//

• 命名空間和函數進行聲明合併或者與類進行聲明合併，必定要放在函數定義或類定義的後面
• 枚舉和命名空間的位置是沒有關係的；

如何編寫聲明文件

• 類庫分爲：全局類庫，umd類庫，模塊類庫
• jquery是umd類庫：
  • 既能夠經過全局的方式引用（藉助webpack插件引用）
  • 又能夠經過模塊化的方式引用
• 在使用非ts編寫的類庫時，必須爲類庫編寫一個聲明文件，對外暴露其api；
• 有時候這些類庫的聲明文件時包含在源碼中，有時候是單獨提供的須要額外安裝；大多數的聲明文件社區已經聲明好了；只需安裝便可；

npm i @types/jquery -D

能夠在這裏搜索： https://microsoft.github.io/TypeSearch/

三種類庫聲明文件的寫法：

• 全局庫對外保留全局變量，模塊庫有export 語句，UMD庫有典型的UMD封裝

// index.ts
import $ from 'jquery'
$('.app').css('color','red')
globaleLib({x: 1})
globaleLib.dosomething()

import moduleLib from './module-lib'
moduleLib.dosomething()

import umdLib from './umd-lib'

1. 全局庫

• 在html script裏面引入
• 名稱同樣；在同級目錄下加上.d.ts後綴；

declare 關鍵字

• 能夠爲外部變量提供類型聲明

// 聲明：
declare function globalLib(options: globalLib.options): void

 interface Options {
        [key: string]: key
}
    
declare namespace globleLib {
    const version: string;
    function doSomething(): void;
    interface Options {
        [key: string]: key
    }
}
export = globleLib

// 源碼：
function globalLib(options) {
    console.log(options)
}
globalLib.version = '1.0.0'
globalLib.doSomething = function(){
    console.log('globalLib do something')
}

2. 模塊類庫

declare function moduleLib(options: moduleLib.options): void

// 由於聲明文件自己是一個模塊，因此放在這裏不會暴露在全局
interface Options {
        [key: string]: key
}
    
declare namespace moduleLib {
    // ts官網中，多了個export
    export const version: string;
    function doSomething(): void;
}
export = moduleLib

3. umd庫

• 在一個模塊中，是能夠經過全局的方式來引用umd庫 在index.html中經過script標籤引入進來
  • 須要打開tsconfig-allowUmdGlobalAccess: true

// 聲明文件
declare nmdLib {
    const version: string
    function dosomething(): void
}
// 若是要編寫一個umd庫 這個語句是不可缺乏的
export as namespace umdLib

export = umdLib

// 源碼：
(function (root, factory) {
    if (typeof define === "function" && define.amd) {
        define(factory);
    } else if (typeof module === "object" && module.exports) {
        module.exports = factory();
    } else {
        root.umdLib = factory();
    }
}(this, function() {
    return {
        version: '1.0.0',
        doSomething() {
            console.log('umdLib do something');
        }
    }
}));

模塊插件和全局插件

• 能夠給類庫添加自定義的方法

import m from 'moment'
declare module 'moment' {
    export function myFunction(): void
}
m.myFunction = () => {}

• 全局插件添加自定義方法

// 會對全局變量形成必定污染
declare global {
    namespace globalLib {
        function doAnything(): void
    }
}
globalLib.doAnything = () => {}

- jquery的模塊依賴
mode_modules/@types/jquery/package.json
types: 'index'  ---> index.d.ts

// 模塊依賴,使用types屬性，ts會在@types目錄下尋找此sizzle，
// ts會把sizzle的聲明文件引入進來
/// <reference types="sizzle" /> 


// 路徑依賴，使用path屬性，是個相對的路徑
/// <reference path="JQueryStatic.d.ts" />
/// <reference path="JQuery.d.ts" />
/// <reference path="misc.d.ts" />
/// <reference path="legacy.d.ts" />