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" />