TapPay Web SDK 串接 - @types/tpdirect 介绍

前言

非常非常久以前写过一篇 TapPay 串接的文章
但可惜的是 TapPay 没有前端 npm 套件可以下载使用
所以在串接前端的其实都不会有智能提示跳出来, 其实有点不方便
於是就弄了一个 @types/tpdirect

在还没使用 @types 之前

就像下图在写 code 的时候是不会跳出任何提示
这在撰写程序起来其实是非常不方便的


但由於 sdk 没有 npm 可以下载, 但是定义档这东西是可以自己做的
於是笔者就做了一个定义档发到 @types/tpdirect

用法

先透过 npm install @types/tpdirect --save-dev 下载定义档
那这个 @types 带来的好处是什麽?
我们就直接上图先来看结果吧!
(此两图皆为在 vue script tag 下写的)


没错, 透过定义档在写 JS 的时候, 就会有提示可以跳出来
目前笔者在 vue, react, ts 以及纯 js 里面都是可以用的
但环境的话, 目前是只有在 vscode 进行测试过
不太确定其他 IDE 也能不能吃

那 vscode 有一个快捷键式 command + i (mac command / windows control)
假设在针对 function 要带入的参数时, 只要先写好 {} 并把鼠标停留在里面
接着按下 command + i 就可以跳出提示现在还剩几个参数要带入

输入完 {}
输入完 {}

按下 command + i
按下 command + i

但要注意的是, 里面属性和方法皆是由定义档产生出来的
并不是根据 SDK 本身拥有的属性和方法出现的
定义档万一定义 methodA, 但实际 SDK 是叫做 methoda
结果写程序的时候, 因为提示跳了 methodA, 於是写了 methodA
这样等到实际执行的时候就会爆出错误说找不到 methodA
因为实际 SDK 拥有的方法是 methoda

後记

透过这种方式写扣, 就可以很快地写完
但这种定义档不是官方提供的, 还是得看有没有其他人持续在维护
那因为受惠 @types 蛮多的, 於是就起头先建立一个
希望这能帮到其他人


<<:  如何让Word的数学公式居左,编号靠右

>>:  【资料结构】图的基本定义

DAY30 献给看到这里的你

今天就是我铁人赛的最後一天了,像我这样的新手也没能想到我能这样子完赛,当初也是课业需要来试试铁人赛,...

创建App後半部界面

在已建设的登入界面与App主界面後,今天来建设App的後部分界面,也就是功能主要在的大部分,其中更分...

Day 28 KubeEdge小专题: NodeMCU设定

今天要说硬体设定的部分,在室内亮度侦测的部分我使用光敏电阻。 NodeMCU的部分我使用NodeMC...

Day 22:开心SQL,SQLDelight

Keyword: SQLDelight,SQL语法 到23日,引入SQLDelight,到在Andr...

Deep Link / Deferred Deep Link 深度连结

Deep Link 可以开启 app 的特定页面,而不仅仅是打开 app 首页而已。 In the ...