JS代码转换d.ts语法

参考一:

上次弄了一个as3转ts的工具,受到广大码农朋友的热烈欢迎~

在实际开发中,经常会遇到第三方的js库,没有d.ts脚本,自己写太麻烦。

于是想到能不能有个工具可以转换成d.ts来用用。

网上搜了一下,有几种方式可以做到,用npm的命令来转换。

npm i dtsmake -g
npm i tern --save-dev
dtsmake -s fileame.js
嗯,这样也是可以的,但是做为码农,最大的快乐莫过于自己造轮子。

享受这个建造的过程~   于是这个工具js2tsd他就出世了!!

主要的作用就是把javascript代码转成d.ts文件,供typescript项目使用了。

(这是我为它画的图标~)

我们来欣赏一下它的界面是什么样的,请看下面。

使用方法:把你要转换的js代码文件,直接拖放到工具界面上即可。当然也可以复制代码粘贴进行转换。

扫描二维码关注公众号,回复: 4855809 查看本文章

做个小小的转换测试,转换前的js代码如下:

var Test = function () {
    this.a = 1;
    this.b = 'a';
};
 
Test.prototype.fun1 = function (func) {
    return this.a;
};
 
Test.prototype.fun2 = function (func) {
    return this.b;
};
 
var ParentClass = function (a, b) {
    this.c = true;
};
 
ParentClass.prototype.func2 = function (test) {
    return "test";
};
 
var ChildClass = function () {
    this.d = true;
    var my = function () {
        ok;
    }
};
 
ChildClass.prototype = new ParentClass();
ChildClass.prototype.constructor = ChildClass.constructor;
 
ChildClass.prototype.func3 = function (funcB) {
    return this.d;
};
 
 
[
    new Test(),
    new ParentClass(),
    new ChildClass()
]
以下是转换后生成的d.ts文件代码如下:

declare class Test {
    a:number;
    b:string;
 
    constructor();
 
    fun1(func):number;
    fun2(func):string;
}
 
declare class ParentClass {
    c:boolean;
 
    constructor(a, b);
 
    func2(test):string;
}
 
declare class ChildClass extends ParentClass {
    d:boolean;
 
    constructor();
 
    func3(funcB):boolean;
}
看起来是不是非常完美? 不过js的写法多种多样,而且还很变态。

这个工具还很年轻,有些复杂的js写法可能还没有兼容,不过放心,我会一直保持更新的。

下载地址:(在csdn下载)

https://download.csdn.net/download/sjt223857130/10709380

 
--------------------- 
作者:sjt223857130 
来源:CSDN 
原文:https://blog.csdn.net/sjt223857130/article/details/82986548 
版权声明:本文为博主原创文章,转载请附上博文链接!

参考二:

近期在学习angularjs2的时候,遇到在typescript中引入第三方库的问题,需要tsd文件,

在TypeSearch中有的可以找到,有的则找不到,遇到找不到的又不想自己去写的,于是我就需要自动将通过js转换出tsd文件,

解决方案如下:

首先你得有node环境,其次进入终端,输入:npm i dtsmake -g,

然后有两种转换方式:

1.

dtsmake -s ./path/to/sourcefile.js

2.

dtsmake -s ./path/to/src/target.js --dist ./path/to/dist/mydefinition -n "mydefinition" -p node -e -S "legacy" -M "MyDefinition" -x "./path/to/extrafile1.js,./path/to/extrafile2.js" -N --def ./path/to/def/ecma6 -A -i -a -g
在组件中引用第三方库方法请移步->angularjs2学习心得之使用第三方JS库

参考地址:https://www.npmjs.com/package/dtsmake
--------------------- 
作者:爱死费崇政 
来源:CSDN 
原文:https://blog.csdn.net/fay462298322/article/details/53307553 
版权声明:本文为博主原创文章,转载请附上博文链接!

猜你喜欢

转载自blog.csdn.net/haibo0668/article/details/85651174