在ts文件中引入js模塊編寫聲明文件的寫法示例
更新時(shí)間：2023年08月29日 09:25:29 作者：z1625000762
這篇文章主要給大家介紹了關(guān)于在ts文件中引入js模塊編寫聲明文件的寫法示例,TypeScript是JavaScript的超集,TypeScript會(huì)進(jìn)類型檢查,需要的朋友可以參考下
一、聲明文件的作用
在ts文件中引入js文件，由于js代碼中沒有類型約束，所以ts無法獲得js代碼的類型信息，進(jìn)而會(huì)隱式推斷js中類型為any,失去了ts代碼類型推斷和約束的作用，聲明文件就是將一個(gè)js模塊中所有對(duì)外暴露的變量、函數(shù)、類使用ts語法進(jìn)行類型聲明，進(jìn)而讓ts編譯器在檢測(cè)到該聲明文件之后（只要被檢測(cè)到寫在哪都可以）就可以獲取js文件中對(duì)應(yīng)變量、函數(shù)、類的類型信息
二、聲明文件的寫法
1、需要導(dǎo)入的*.js代碼
/*test.js*/
//導(dǎo)出變量
export const test1 = '變量'
//導(dǎo)出函數(shù)
export function test2(name){
return name
}
//導(dǎo)出類
export class Test3{
name='類'
constructor(){
console.log(this.name);
}
}2、js代碼的*.d.ts聲明代碼
/*test.d.ts*/
//聲明模塊(被匹配的文件都屬于該模塊)
declare module '*/test.js'{
//聲明變量類型
export const test1:string
//聲明函數(shù)類型
export function test2(name:string):string
//聲明class接口
interface Tests{
name:string
//new()代表構(gòu)造函數(shù)
new():Tests
}
//聲明class類型
export const Test:Tests;
}3、引入ts文件
/*test.ts*/
import { test1,test2,Test } from './test.js'
console.log(test1);
console.log(test2('函數(shù)'));
new Test()4、運(yùn)行結(jié)果
三、聲明文件的配置
聲明文件必須被ts檢索到，如果聲明文件不生效需要到tsconfig.json文件中添加
{
"include": ["*/*.ts"] //需要檢索的文件位置
}詳細(xì)內(nèi)容：
介紹 · 聲明文件 · TypeScript中文網(wǎng) · TypeScript——JavaScript的超集
總結(jié)
到此這篇關(guān)于在ts文件中引入js模塊編寫聲明文件的文章就介紹到這了,更多相關(guān)ts引入js模塊編寫聲明文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了前端JS可視化學(xué)習(xí)利用向量判斷多邊形邊界示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-12-12
JS如何設(shè)置cookie有效期為當(dāng)天24點(diǎn)并彈出歡迎登陸界面
這篇文章主要介紹了JS如何設(shè)置cookie有效期為當(dāng)天24點(diǎn)并彈出歡迎登陸界面的代碼，代碼比較簡(jiǎn)單，好理解，需要的朋友可以參考下2016-08-08
本篇文章主要是對(duì)js中replace的用法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
詳解MVC如何使用開源分頁插件（shenniu.pager.js）
本文主要分享了shenniu.pager.js整個(gè)插件內(nèi)容，不多且清晰。具有很好的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
解讀Bootstrap v4 sass設(shè)計(jì)
這篇文章主要介紹了Bootstrap v4 sass設(shè)計(jì)的相關(guān)資料,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了Javascript中的Callback方法淺析,本文講解了什么是callback、Javscript Callback、Callback是什么、Callback實(shí)例等內(nèi)容,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了js中的事件捕捉模型與冒泡模型,實(shí)例分析了js事件的執(zhí)行順序與冒泡模型的原理,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
用JavaScript獲取頁面文檔內(nèi)容的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄肑avaScript獲取頁面文檔內(nèi)容的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
小程序?qū)崿F(xiàn)簡(jiǎn)單語音聊天的示例代碼
這篇文章主要介紹了小程序?qū)崿F(xiàn)簡(jiǎn)單語音聊天的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章通過圖文詳細(xì)的給大家介紹了關(guān)于Javascript中的上下文與作用域背后的機(jī)制，主要涉及到執(zhí)行上下文（execution context）、作用域鏈（scope chain）、閉包（closure）、this等概念。需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02