这是我参与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