什么是 @types/amp-message
@types/amp-message 是一个 TypeScript 类型声明文件的 npm 包。它可以让你在使用 AMP 开发框架 的过程中，更好的支持 TypeScript 的类型检查和代码提示。
如何引入 @types/amp-message
使用 @types/amp-message 非常简单，在你的 TypeScript 项目中执行以下命令：
npm install --save-dev @types/amp-message
然后，在你的 TypeScript 代码中引入 amp-message 模块即可：
import * as ampMsg from 'amp-message';
如何使用 amp-message
amp-message 是 AMP 开发框架中的一部分，它提供了一套用于与 AMP runtime 通信的协议，可以用于获取页面的状态信息或者操作页面上的元素。
在使用 amp-message 之前，我们需要先在页面中加入 amp-access 组件，并告诉它我们要使用的 amp-message 协议。在 HTML 文件中可以这样写：
-- -------------------- ---- -------
--------- -----
----- --- ----------
------
----- ----------------
------------- ------------
------- ----- ------------------------------------------------
------- ----- --------------------------- ---------------------------------------------------------------
------- ----- ------------------------------ -----------------------------------------------------------------
----- --------------- -------------------------------------------------------------
------ -----------
-- --- ------ ---- --
--------
-------
------
---------- ---------
----------- -------------- -------------------
------- ------------------------
-
---------------- --------------------------------
----------- -------------------------------
-------- -
---------- -----------------------------
----------- -----------------------------
--
-------------------------------- -
-------- -----
--------------- ----- --- ------------
-
-
---------
--------
------------------
-----------
-----------------------
---------------
------- ------------------------
-
-------- -------
--------- -------
------- ------------
------- -
----------------- -
-
-
---------
----------
-------------
---------- -------------
------- ------------------------
-
-------- -
-
----- --
------- ----- --
--
-
----- --
------- ----- --
--
-
----- --
------- ----- --
-
-
-
---------
------------
---- -------------
--------- ------------- --------------------
----------
---- ----------- ----- -------------------------- -------------------------------
----------
-----------
---- ---------- --------------------
------
----------- ------------------ ------------------- --------------
-------
-------amp-access 组件包含了我们的 amp-msg 组件，在它的 script 中，我们指定了我们要使用的协议，并且定义了 amp-state 的初始数据。
在页面的 JavaScript 文件中，我们可以这样使用 amp-message：
import * as ampMsg from 'amp-message';
// 获取 AMP runtime 中的 selectedItemId 数据
ampMsg.get({type: 'amp-state', id: 'ampMsg', aid: 'selectedItemId'}, (res: any) => {
console.log(res.value); // 打印出来 1
});在 get 方法中，我们传入了一个 JSON 对象，描述了我们要获取的数据的类型（type），我们要从哪个 amp-msg 组件里获取数据（id），还有我们要获取哪个 amp-state 数据的属性（aid）。
上述示例中还使用到了 res 对象，在 amp-message 返回数据时，res 对象包含以下属性：
success: 表示amp-message是否成功获取到了我们指定的数据value: 获取到的数据的值
总结
@types/amp-message 提供了一套完整的 TypeScript 类型声明，可以帮助我们更好的使用 amp-message 协议，并且提供了便捷的类型检查和代码提示。在上文中，我们学习了如何引入和使用 amp-message，也提供了使用示例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc143b5cbfe1ea0611d3b