在ts文件中引入js模塊編寫聲明文件的寫法示例
一、聲明文件的作用
在ts文件中引入js文件,由于js代碼中沒有類型約束,所以ts無法獲得js代碼的類型信息,進(jìn)而會(huì)隱式推斷js中類型為any,失去了ts代碼類型推斷和約束的作用,聲明文件就是將一個(gè)js模塊中所有對(duì)外暴露的變量、函數(shù)、類使用ts語(yǔ)法進(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)文章
javascript 關(guān)于# 和 void的區(qū)別分析
href 為#的跳到了自己的頁(yè)面。原來‘#’代表的是 #top ,2009-10-10
js keycode快捷鍵大全 并附有簡(jiǎn)單使用說明
js keycode快捷鍵大全 并附有簡(jiǎn)單使用說明,方便大家使用。2010-10-10
JS中錨點(diǎn)鏈接點(diǎn)擊平滑滾動(dòng)并自由調(diào)整到頂部位置
這篇文章主要介紹了JS中錨點(diǎn)鏈接點(diǎn)擊平滑滾動(dòng)并自由調(diào)整到頂部位置,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-02-02
ES6 proxy和reflect的使用方法與應(yīng)用實(shí)例分析
這篇文章主要介紹了ES6 proxy和reflect的使用方法,結(jié)合具體實(shí)例形式分析了ES6 proxy和reflect基本功能、原理、使用方法與操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
前端HTML實(shí)現(xiàn)個(gè)人簡(jiǎn)歷信息填寫頁(yè)面效果實(shí)例
本文介紹了如何使用HTML、CSS和JavaScript構(gòu)建一個(gè)個(gè)人簡(jiǎn)歷信息填寫頁(yè)面,涵蓋了簡(jiǎn)歷頁(yè)面的HTML結(jié)構(gòu)設(shè)計(jì)、CSS樣式美化以及JavaScript實(shí)現(xiàn)動(dòng)態(tài)功能和驗(yàn)證的全過程,需要的朋友可以參考下2024-11-11
學(xué)習(xí)JavaScript設(shè)計(jì)模式(接口)
這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript設(shè)計(jì)模式,其中重點(diǎn)介紹接口,舉例說明什么是接口,對(duì)接口進(jìn)行詳細(xì)剖析,感興趣的小伙伴們可以參考一下2015-11-11
JS一維數(shù)組轉(zhuǎn)化為三維數(shù)組的實(shí)現(xiàn)示例
很多時(shí)候,跟后端接口開發(fā)對(duì)接時(shí),因?yàn)樾枨蟮年P(guān)系,需要前端地區(qū)數(shù)據(jù)跟后端的數(shù)據(jù)要一一對(duì)應(yīng),有時(shí)候需要的是多維數(shù)據(jù),這篇文章主要介紹了JS一維數(shù)組轉(zhuǎn)化為三維數(shù)組的實(shí)現(xiàn)示例,感興趣的可以了解一下2021-12-12
js中如何復(fù)制一個(gè)對(duì)象并獲取其所有屬性和屬性對(duì)應(yīng)的值
如果知道這個(gè)對(duì)象的所有屬性自然就可以重新new一個(gè),然后對(duì)每個(gè)屬性賦值,就可以做到,但如果不知道呢?如何創(chuàng)建一個(gè)內(nèi)容相同 的對(duì)象呢?下面有個(gè)不錯(cuò)的示例,大家可以看看2013-10-10

