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

引入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这个库以后应该用不到了。

.

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

原文：https://www.cnblogs.com/cc11001100/p/12350611.html