首页 > 网络编程 > JavaScript > javascript技巧 > ts引入js模块编写声明文件

在ts文件中引入js模块编写声明文件的写法示例

2023-08-29 09:23:20 作者：z1625000762

这篇文章主要给大家介绍了关于在ts文件中引入js模块编写声明文件的写法示例,TypeScript是JavaScript的超集,TypeScript会进类型检查,需要的朋友可以参考下

一、声明文件的作用

在ts文件中引入js文件，由于js代码中没有类型约束，所以ts无法获得js代码的类型信息，进而会隐式推断js中类型为any,失去了ts代码类型推断和约束的作用，声明文件就是将一个js模块中所有对外暴露的变量、函数、类使用ts语法进行类型声明，进而让ts编译器在检测到该声明文件之后（只要被检测到写在哪都可以）就可以获取js文件中对应变量、函数、类的类型信息

二、声明文件的写法

1、需要导入的*.js代码

/*test.js*/
//导出变量
export const test1 = '变量'
//导出函数
export function test2(name){
    return name
}
//导出类
export class Test3{
    name='类'
    constructor(){
        console.log(this.name);
    }
}

2、js代码的*.d.ts声明代码

/*test.d.ts*/
//声明模块(被匹配的文件都属于该模块)
declare module '*/test.js'{
    //声明变量类型
    export const test1:string
    //声明函数类型
    export function test2(name:string):string
    //声明class接口
    interface Tests{
        name:string
        //new()代表构造函数
        new():Tests
    }
    //声明class类型
    export const Test:Tests;
}

3、引入ts文件

/*test.ts*/
import { test1,test2,Test } from './test.js'
console.log(test1);
console.log(test2('函数'));
new Test()

4、运行结果

三、声明文件的配置

声明文件必须被ts检索到，如果声明文件不生效需要到tsconfig.json文件中添加

{
  "include": ["*/*.ts"] //需要检索的文件位置
}

详细内容：
介绍 · 声明文件 · TypeScript中文网 · TypeScript——JavaScript的超集

总结

到此这篇关于在ts文件中引入js模块编写声明文件的文章就介绍到这了,更多相关ts引入js模块编写声明文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！