• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Chrome Extension笔记:typescript开发chrome插件时的类型提示

原作者: [db:作者] 来自: [db:来源] 收藏 邀请


引入typescript就是为了有类型组织代码和静态检查开发起来会更爽的,结果发现默认情况下ts对于chrome extension的api识别不了,需要引入另外的类型库:

https://www.npmjs.com/package/@types/chrome

这个库定义了chrome扩展的api,使得在ts中能够进行chrome extension api的代码提示与静态检查,大大提高开发效率。


先为项目添加依赖:

yarn add @types/chrome -D

等待一会儿会自动安装完成,检查packet.json文件看下依赖是否已经被添加上了:

{
	...

	"devDependencies": {
		...

		"@types/chrome": "^0.0.96",
		
		...
	}

	...
}

然后打开tsconfig.json文件,检查编译选项(compilerOptions)的types部分是不是有chrome类型,如果没有的话就添加上此类型:

{
	...

	"compilerOptions": {
		...

		"types": [
			...
			
			"chrome",

			...
		],

		...

	...
}

在content-script中调用chrome的api,能够有代码提示和静态类型检查:

public static async sendMessage(message: Command<any>): Promise<any> {
    return new Promise((resolve, reject) => {
        chrome.runtime.sendMessage(message, (result: CommandExecResult) => {
            if (result.isSuccess) {
                return resolve(result.payload);
            } else {
                return reject(result.payload);
            }
        });
    });
}

同样的类型库还有一个@types/chrome-apps,不过google即将要放弃掉chrome apps了,@types/chrome-apps这个库以后应该用不到了。


.


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
React+dva.js+typescript实现百度贴吧移动web端发布时间:2022-07-18
下一篇:
TypeScript学习2--TypeScript基础静态类型和对象类型发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap