typescript引⼊js类库编写声明⽂件插件（day07）typescript引⼊js类库&编写声明⽂件（day07）
typescript引⼊js类库
安装类库
npm i jquery
在src下新建 lib ⽂件夹
新建 index.ts ⽂件
安装类型声明包
npm i @type/jquery -D
// src/lib/index.ts
import $ from'jquery'
$('.app').css('color','red')
可以在中查询是否有对应的声明⽂件
如果没有需要⾃⼰写
三种类库的编写⽅法
全局库
function globalLib(options){
console.log(options);
}
globalLib.version ='1.0.0';
globalLib.doSomething=function(){
console.log('globalLib.doSomething')
}
在 index.html 中引⼊
<script src="src/lib/global-lib.js"></script>
在同⽬录下编写 global-lib.d.ts 声明⽂件
// src/lib/global-lib.d.ts
//declare 可以为外部变量提供类型声明
declare function globalLib(options: globalLib.Options):void;
declare namespace globalLib {
const veersion:string;
function doSomething():void;
interface Options {
[key:string]:any
}
}
在 src/lib/index.ts 中追加
globalLib({ x:1})
globalLib.doSomething()
模块库
const version ='1.0.0';
function doSomething(){
console.log('moduleLib do somrthing');
}
function moduleLib(options){
console.log(options)
}
moduleLib.version = version;
moduleLib.doSomething = doSomething;
在同⽬录下编写 module-lib.d.ts 声明⽂件
// src/lib/module-lib.d.ts
declare function moduleLib(options: Options):void;
interface Options {
[key:string]:any
}
declare namespace moduleLib {
const version:string
function doSomething():void
}
export= moduleLib
在 src/lib/index.ts 中追加
import moduleLib from'./module-lib'
moduleLib.doSomething()
umd库
(function(root, factory){
if(typeof define ==="function"&& define.amd){
define(factory);
linux打开配置文件命令}else if(typeof module ==="object"&& ports){
buffer p1的作用
}else{
root.umdLib =factory();
}
}(this,function(){
return{
version:'1.0.0',xcopy命令参数详解
doSomething(){
console.log('umdLib do something');
}jquery下载文件插件
}
}));
在同⽬录下编写 umd-lib.d.ts 声明⽂件
declare namespace umdLib {
const version:string
function doSomething():void
日本unicode}
export as namespace umdLib
export= umdLib
在 src/lib/index.ts 中追加
import umdLib from'./umd-lib'
umdLib.doSomething()
umd库可以通过全局的⽅式引⽤，同global-lib
在 index.html 中引⼊
<script src="src/lib/umd-lib.js"></script>
// src/lib/index.ts
// import umdLib from './umd-lib'
umdLib.doSomething()
报错：umdLib”指 UMD 全局，但当前⽂件是模块。请考虑改为添加导⼊。
修改配置 tsconfig.js
“allowUmdGlobalAccess”: true
插件
给类库添加⾃定义⽅法
安装类库npm i moment
模块插件
删除exif信息在 src/lib/index.ts 中追加
import m from'moment'
declare module'moment'{
export function myFunction():void
}
全局插件
在 src/lib/index.ts 中追加
declare global {
namespace globalLib {
function doAnything():void
}
}
globalLib.doAnything=()=>{}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。