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

这篇具有很好参考价值的文章主要介绍了在ts文件中引入js模块,编写声明文件的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 一、声明文件的作用

在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文件中引入js模块,编写声明文件的方法

三、声明文件的配置

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

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

详细内容:
介绍 · 声明文件 · TypeScript中文网 · TypeScript——JavaScript的超集文章来源地址https://www.toymoban.com/news/detail-507677.html

到了这里,关于在ts文件中引入js模块,编写声明文件的方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 已安装xxx模块,但报错无法找到模块“xxx”的声明文件(TS)

    在一个vue3+TS项目中,引入md5时,报错误 已声明“md5”,但从未读取其值。ts(6133) 无法找到模块“js-md5”的声明文件。“D:/Desktop/vue3_online-retailers/project/node_modules/js-md5/src/md5.js”隐式拥有 “any” 类型。 尝试使用 npm i --save-dev @types/js-md5 (如果存在),或者添加一个包含 declare m

    2024年02月14日
    浏览(38)
  • 解决 TypeScript 引入第三方包,无法找到模块“XXX”的声明文件

    例子: 报错 :无法找到模块“three”的声明文件。“e:/VScode/vite-demo/node_modules/three/build/three.module.js”隐式拥有 “any” 类型。 该包如果存在可尝使用 npm i --save-dev @types/three 安装,或者添加一个包含 declare module \\\'three\\\' 的新声明文件(.d.ts后缀,例如 vite-env.d.ts) 原因:npm安装的版本

    2024年02月06日
    浏览(62)
  • vue3引入.vue文件以及.ts文件时提示找不到模块

    1.找不到vue文件的,是因为ts无法解析我们的vue结尾的文件,所以需要在src目录下, 新建一个d.ts结尾的文件(可以叫env.d.ts) 然后里面这样写就可以 2,找不到ts文件就更正常了,我们需要在tsconfig.json里面进行配置(没有的话就新建一个,在根src同级的目录下面)。就直接复制就

    2024年02月11日
    浏览(84)
  • vue3+ts报错:无法找到模块“xxx.vue“的声明文件,xxx隐式拥有“any“类型

    1、报错原因:typescript不能识别.vue文件 2、解决方法: 可以在vite-env.d.ts中添加以下代码,如果没有 vite-env.d.ts ,可以自己新建一个 xxx.d.ts 类型的文件即可 创建好项目之后一直报错,搜索解决掉了,自己整理所用,原文链接:vue3+ts报错解决:无法找到模块“xxx.vue”的声明文

    2024年01月21日
    浏览(47)
  • 解决vue3+vite项目中引入mockjs失败的问题--无法找到模块“mockjs”的声明文件

     看到上面报错,根据提示 修改声明方式 declare module \\\'mockjs\\\'  我们修改一下引入的声明,发现修改之后仍然报错;    解决方法: 需要在vite-env.d.ts文件中,添加  declare module \\\'mockjs\\\',保存即可  然后就可以正常使用了  

    2024年02月11日
    浏览(49)
  • 前端vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决【引入新建页面或者通过router引入时报错】

    🌏 博客首页: 水香木鱼 📌 专栏收录:后台管理系统 📑 文章摘要: vue   typescript   vite 💌 木鱼寄语: 故木秀于林,风必摧之;堆出于岸,流必湍之;行高于人,众必非之。 提示找不到模块问题 👇 解决方案: 在 src 目录下, vite-env.d.ts 文件内新增如下代码: 在 tsco

    2024年02月13日
    浏览(66)
  • vscode报错:找不到模块“vue”或其相应的类型声明。ts(2307)

    https://www.xjx100.cn/news/187714.html?action=onClick vue3 setup + ts + vite 项目问题解决:Cannot find module ... or its corresponding type declarations.(ts2307)_cannot find module \\\'vue-router\\\' or its correspondi_喵喵喵更多的博客-CSDN博客 重点:Ctrl+Shift+P 唤起命令面板,配置 volar 的 typescript版本

    2024年02月21日
    浏览(42)
  • vue3.2+ts错误:找不到模块“./App.vue”或其相应的类型声明。ts(2307)

    vue3.2+ts错误:找不到模块“./App.vue”或其相应的类型声明。ts(2307)   解决方法: 在项目根目录创建 env.d.ts 文件(如果已有,则在文件中追加),加入以下内容: 报错原因: 未定义 .vue文件的类型,导致 ts 无法解析其类型,在env.d.ts中定义后即可解决。

    2024年02月11日
    浏览(54)
  • Vue3+TS+Vite 找不到模块“@/components/xxx/xxx”或其相应的类型声明。

    今天在写vue3项目时碰到一个问题,引入自定义的词云图组件一直报错,提示找不到模块 文件是存在的,引入路径也是对的。于是直接百度解决方案 有一些解决方案是在tsconfig.json里面做一些配置,这里我就不说了,大家可以自行百度,还有一种是在项目根目录建立一个 env.

    2024年02月11日
    浏览(93)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包