TypeScript常用知识之--声明文件

368 阅读4分钟

这是我参与8月更文挑战的第14天,活动详情查看:8月更文挑战

因为Typescript的持续火爆,分享下TS的常用知识点,我们一起学习交流,一起加油!

全局声明文件

因为声明文件比较多,所以单独分享下

1.有时候我们会使用一些js的第三方库,但是如果没有声明文件,ts就不会有智能提示或参数约定等等。

2.因为我们引入库的时候,有两种类型的库

1.全局引入,这种会改变全局的变量,所以定义声明文件也需要以全局的方式去定义

2.模块引入,这种方式就是以import 的方式来引入库,所以声明文件也需要以export的方式来导出

1.声明全局的变量 方法 类 枚举

// 声明全局的变量
declare var a1: string;
declare const a2: string;
declare let a3: string;
a1.split("");
a2.split("");
a3.split("");

// 声明全全局方法
declare function getName(id: string): string;
getName("id");

// 声明全局类
declare class Person {
  constructor(name: string);
}
const p = new Person("Tom");

// 声明枚举
declare enum COLOR {
  Red,
  Blue,
}

COLOR.Blue;

2.声明全局的命名空间

// 在命名空间中不用使用declare 字段
declare namespace Aoo {
  const version: string;
  function getAge(id: string): number;
  class Person {}
  enum COLOR {
    Red,
    Blue,
  }

  // 命名空间支持嵌套
  namespace Boo {
    function getName(id: string): void;
    function getGender(id: string): void;
  }
}

Aoo.COLOR.Blue;
const person = new Aoo.Person();
Aoo.getAge("id");
Aoo.version;
Aoo.Boo.getName("id");

// 可以直接定义嵌套的命名空间
declare namespace Coo.Doo {
  function getTime(): void;
  function getTime2(): void;
}

Coo.Doo.getTime2();

// 对于interface 和 type 可以不用使用declare
interface AA {
  name: string;
}
let aa: AA = { name: "name" };

type BB = {
  age: number;
};
let bb: BB = { age: 11 };

// 声明合并 相同名字的不同声明会合并到一起
declare namespace C {
  function getTime(time: string): void;
}
declare function C(name: string): void;

C.getTime("1990");
C("tom");

模块的引用

模块的引用有3种方式

1.es6的导出导入

2.common.js的引入 (这种只适合npm包这种)

3.umd的引入(这种方式可以被script加载 也可以被import 引入)

1. es6导入导出


================================================   export  ====================================================================
// 导出变量 命名空间 默认 和commonjs的导出
export const gender: string;
export function getAge(): number;
export class Fish {}
export enum ClassRoom {
  Window,
  Seat,
  Teacher,
  Student,
}

export interface Page {
  pageNo: number;
  pageIndex: number;
  pageSize: number;
}

// export +declare , 先declare 然后再一起export
declare const address: string;
declare function getAdd(): string;
declare class Address {}

export { address, getAdd, Address };


// 只有 function  class 和 interface 可以默认导出
export default function getClass(a:string,b:string):void


================================================   import  ====================================================================

// 引入 export的内容
import { gender, getAge, Fish, Page, ClassRoom } from "foo";

console.log("gender", gender);
getAge();
const fish = new Fish();
let page: Page = { pageIndex: 1, pageNo: 1, pageSize: 20 };
console.log(ClassRoom.Student);
console.log(ClassRoom.Teacher);

// 引入 export + declare的定义

import { address, getAdd, Address } from "foo";

// 引入export default

import getCls from "foo";
getCls("1", "2");
}

2. 引入common.js

因为有些第三方库是common.js规范的所以引入方式有2种如下, 对于一下的方式必须使用commonjs的方式导出方式*

================================================   export  ====================================================================

// commonjs 声明文件需要使用export
// 这里使用了export = 之后就不能单独导出bar了, 所以使用namespace来合并
export = eoo;

declare function eoo(): string;
declare namespace eoo {
    const bar: number;
}

================================================   import  ====================================================================

// 方法一 import * as xxx from xxx
import * as eoo from 'eoo';

// 方法二 import require
import eoo = require('eoo');

3. UMD库的声明文件


===============================================  export  ====================================================================
// 扩展npm库的变量
export as namespace doo;
// 方法一
export = doo;
// 方法二
export default doo;

declare function doo(a:string):void;
declare namespace doo {
     const dooo: number;
}


/* 在npm 和umd中声明全局变量 */
declare global {
     interface String {
         prependHello(): string;
     }
 }
   
    
============================================  import  =======================================================================

// UMD库的声明文件
import * as doo from 'doo';

// 在umd或者commonjs中声明全局变量 
'bar'.prependHello()

4 .declare module 可以为多个模块定义声明

===============================================  export  ====================================================================
declare module 'voo' {
    export interface Foo {
        foo: string;
    }
}

declare module 'xar' {
    export function bar(): string;
}
   
============================================  import  =======================================================================

// 方法一 导入foo
import { Foo } from 'voo';

// 方法二 导入bar
import * as bar from 'xar';

全局文件中的三斜线的应用

/*
1.因为不能加import 或者是export ,添加后就会被视为npm umd包所以必须使用三斜线
2.三斜线可以引入类型,
  1.types 是对另一个库的依赖
  2.path是对文件的依赖
*/

/// <reference types="sizzle" />
/// <reference path="JQueryStatic.d.ts" />
/// <reference path="JQuery.d.ts" />
/// <reference path="misc.d.ts" />
/// <reference path="legacy.d.ts" />

export = jQuery;

自动生成声明文件

如果想要自动生成 可配置tsconfig.json 的选项:

declaration 设置为true 则自动生成声明文件
declarationDir 设置生成 .d.ts 文件的目录
declarationMap 对每个 .d.ts 文件,都生成对应的 .d.ts.map(sourcemap)文件
emitDeclarationOnly 仅生成 .d.ts 文件,不生成 .js 文件

手动生成声明文件

如果一个库中没有声明文件 则需要手动补充一个

声明文件的查找顺序如下
1.package.json中的types 或者typing
2.库文件的根目录的index.d.ts
3.通过package.json中的 main得到名字,在找相同名字的d.ts后缀文件
4.查看tsconfig.json中path配置的路径看能否找到配置文件 如 foo/index.d.ts或者 foo.d.ts

相关资料

大家喜欢的可以看看我的专栏 (TypeScript常用知识) 我会尽量保持每天晚上更新,如果喜欢的麻烦帮我点个赞,十分感谢

大家如果喜欢“算法”的话,可以看看我分享的另外一个专栏(前端搞算法)里面有更多关于算法的题目的分享,希望能帮助大家更深的理解算法

文章内容目的在于学习讨论与分享学习TS过程中的心得体会,文中部分素材来源网络,如有侵权,请联系删除,邮箱 182450609@qq.com