类型声明

• 声明文件可以让我们不需要将JS重构为TS，只需要加上声明文件就可以使用系统
• 类型声明在编译的时候都会被删除，不会影响真正的代码
• 关键字 declare 表示声明的意思,我们可以用它来做出各种声明:

declare var 声明全局变量
declare function 声明全局方法
declare class 声明全局类
declare enum 声明全局枚举类型
declare namespace 声明(含有子属性的)全局对象
interface 和 type 声明全局类型

1. 普通类型声明

declare let name: string;  //变量
declare let age: number;  //变量
declare function getName(): string;  //方法
declare class Animal { name: string }  //类
console.log(name, age);
getName();
new Animal();
export default {};

声明jQuery对象

declare const $: (selector: string) => { //变量
    click(): void;
    width(length: number): void;
};
$('#root').click();
console.log($('#root').width);

2. 外部枚举

• 外部枚举是使用declare enum定义的枚举类型
• 外部枚举用来描述已经存在的枚举类型的形状

declare enum Seasons {
    Spring,
    Summer,
    Autumn,
    Winter
}

let seasons = [
    Seasons.Spring,
    Seasons.Summer,
    Seasons.Autumn,
    Seasons.Winter
];

• declare 定义的类型只会用于编译时的检查，编译结果中会被删除。上例的编译结果如下

var seasons = [
    Seasons.Spring,
    Seasons.Summer,
    Seasons.Autumn,
    Seasons.Winter
];

• 也可以同时使用declare 和 const

declare const enum Seasons {
    Spring,
    Summer,
    Autumn,
    Winter
}

let seasons = [
    Seasons.Spring,
    Seasons.Summer,
    Seasons.Autumn,
    Seasons.Winter
];

编译结果

var seasons = [
    0 /* Spring */,
    1 /* Summer */,
    2 /* Autumn */,
    3 /* Winter */
];

3. namespace

• 如果一个全局变量包括了很多子属性，可能使用namespace
• 在声明文件中的namespace表示一个全局变量包含很多子属性
• 在命名空间内部不需要使用 declare 声明属性或方法

declare namespace ${
    function ajax(url:string,settings:any):void;
    let name:string;
    namespace fn {
        function extend(object:any):void;
    }
}
$.ajax('/api/users',{});
$.fn.extend({
    log:function(message:any){
        console.log(message);
    }
});
export {};

4. 类型声明文件

• 我们可以把类型声明放在一个单独的类型声明文件中
• 可以在类型声明文件中使用类型声明
• 文件命名规范为*.d.ts
• 观看类型声明文件有助于了解库的使用方式

4.1 jquery.d.ts

typings\jquery.d.ts

declare const $:(selector:string)=>{
    click():void;
    width(length:number):void;
}

4.2 tsconfig.json

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES2015",  
    "outDir":"lib"
  },
  "include": [
    "src/**/*",
    "typings/**/*"
  ]
}

4.3 test.js

src\test.ts

$('#button').click();
$('#button').width(100);
export {};

5. 第三方声明文件

• 可以安装使用第三方的声明文件
• @types是一个约定的前缀，所有的第三方声明的类型库都会带有这样的前缀
• JavaScript 中有很多内置对象，它们可以在 TypeScript 中被当做声明好了的类型
• 内置对象是指根据标准在全局作用域（Global）上存在的对象。这里的标准是指 ECMAScript 和其他环境（比如 DOM）的标准
• 这些内置对象的类型声明文件，就包含在TypeScript 核心库的类型声明文件中

5.1 使用jquery

cnpm i jquery -S

//对于common.js风格的模块必须使用 import * as 
import * as jQuery from 'jquery';
jQuery.ajax('/user/1');

5.2 安装声明文件

cnpm i @types/jquery -S

5.3 自己编写声明文件

• 模块查找规则
• node_modules@types\jquery/index.d.ts
• 我们可以自己编写声明文件并配置tsconfig.json

5.3.1 index.d.ts

types\jquery\index.d.ts

declare function jQuery(selector:string):HTMLElement;
declare namespace jQuery{
  function ajax(url:string):void
}
export default jQuery;

5.3.2 tsconfig.json

• 如果配置了paths,那么在引入包的的时候会自动去paths目录里找类型声明文件
• 在 tsconfig.json 中，我们通过 compilerOptions 里的 paths 属性来配置路径映射
• paths是模块名到基于baseUrl的路径映射的列表

{
  "compilerOptions": {
    "baseUrl": "./",// 使用 paths 属性的话必须要指定 baseUrl 的值
    "paths": {
      "*":["types/*"]
    }
}

import $ from "jquery";
$.ajax('get');

5.4 npm声明文件可能的位置

• node_modules/jquery/package.json
  • "types":"types/xxx.d.ts"
• node_modules/jquery/index.d.ts
• node_modules/@types/jquery/index.d.ts
• typings\jquery\index.d.ts

5.5 查找声明文件

• 如果是手动写的声明文件，那么需要满足以下条件之一，才能被正确的识别
• 给 package.json 中的 types 或 typings 字段指定一个类型声明文件地址
• 在项目根目录下，编写一个 index.d.ts 文件
• 针对入口文件（package.json 中的 main 字段指定的入口文件），编写一个同名不同后缀的 .d.ts 文件

{
    "name": "myLib",
    "version": "1.0.0",
    "main": "lib/index.js",
    "types": "myLib.d.ts",
}

• 先找myLib.d.ts
• 没有就再找index.d.ts
• 还没有再找lib/index.d.js
• 还找不到就认为没有类型声明了

6. 扩展全局变量的类型

6.1 扩展局部变量类型

declare var String: StringConstructor;
interface StringConstructor {
    new(value?: any): String;
    (value?: any): string;
    readonly prototype: String;
}
interface String {
    toString(): string;
}

//扩展类的原型
interface String {
    double():string;
}

String.prototype.double = function(){
    return this+'+'+this;
}
console.log('hello'.double());

//扩展类的实例
interface Window{
    myname:string
}
console.log(window.myname);
//export {} 没有导出就是全局扩展

6.2 模块内全局扩展

types\global\index.d.ts

declare global{
    interface String {
        double():string;
    }
    interface Window{
        myname:string
    }
}

export  {}

7. 合并声明

• 同一名称的两个独立声明会被合并成一个单一声明
• 合并后的声明拥有原先两个声明的特性

关键字	作为类型使用	作为值使用
class	yes	yes
enum	yes	yes
interface	yes	no
type	yes	no
function	no	yes
var,let,const	no	yes

• 类既可以作为类型使用，也可以作为值使用，接口只能作为类型使用

class Person{
    name:string=''
}
let p1:Person;//作为类型使用
let p2 = new Person();//作为值使用

interface Animal{
    name:string
}
let a1:Animal;
let a2 = Animal;//接口类型不能用作值

7.1 合并类型声明

• 可以通过接口合并的特性给一个第三方为扩展类型声明

use.js

interface Animal{
    name:string
}
let a1:Animal={name:'hello ',age:10};
console.log(a1.name);
console.log(a1.age);
//注意不要加export {} ,这是全局的

types\animal\index.d.ts

interface Animal{
    age:number
}

7.2 使用命名空间扩展类

• 我们可以使用 namespace 来扩展类，用于表示内部类

class Form {
  username: Form.Item='';
  password: Form.Item='';
}
//Item为Form的内部类
namespace Form {
  export class Item {}
}
let item:Form.Item = new Form.Item();
console.log(item);

7.3 使用命名空间扩展函数

我们也可以使用 namespace 来扩展函数

function greeting(name: string): string {
    return greeting.words+name;
}

namespace greeting {
    export let words = "Hello,";
}

console.log(greeting('hello '))

7.4 使用命名空间扩展枚举类型

enum Color {
    red = 1,
    yellow = 2,
    blue = 3
}

namespace Color {
    export const green=4;
    export const purple=5;
}
console.log(Color.green)

7.5 扩展Store

import { createStore, Store } from 'redux';
type StoreExt = Store & {
    ext: string
}
let store: StoreExt = createStore(state => state);
store.ext = 'hello';

8. 生成声明文件

把TS编译成JS后丢失类型声明，我们可以在编译的时候自动生成一份JS文件

{
  "compilerOptions": {
     "declaration": true, /* Generates corresponding '.d.ts' file.*/
  }
}