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

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

后记

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