在ts文件中引入js模塊編寫聲明文件的寫法示例
一、聲明文件的作用
在ts文件中引入js文件,由于js代碼中沒有類型約束,所以ts無法獲得js代碼的類型信息,進而會隱式推斷js中類型為any,失去了ts代碼類型推斷和約束的作用,聲明文件就是將一個js模塊中所有對外暴露的變量、函數(shù)、類使用ts語法進行類型聲明,進而讓ts編譯器在檢測到該聲明文件之后(只要被檢測到寫在哪都可以)就可以獲取js文件中對應(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、運行結(jié)果
三、聲明文件的配置
聲明文件必須被ts檢索到,如果聲明文件不生效需要到tsconfig.json文件中添加
{ "include": ["*/*.ts"] //需要檢索的文件位置 }
詳細內(nèi)容:
介紹 · 聲明文件 · TypeScript中文網(wǎng) · TypeScript——JavaScript的超集
總結(jié)
到此這篇關(guān)于在ts文件中引入js模塊編寫聲明文件的文章就介紹到這了,更多相關(guān)ts引入js模塊編寫聲明文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript 關(guān)于# 和 void的區(qū)別分析
href 為#的跳到了自己的頁面。原來‘#’代表的是 #top ,2009-10-10ES6 proxy和reflect的使用方法與應(yīng)用實例分析
這篇文章主要介紹了ES6 proxy和reflect的使用方法,結(jié)合具體實例形式分析了ES6 proxy和reflect基本功能、原理、使用方法與操作注意事項,需要的朋友可以參考下2020-02-02學(xué)習JavaScript設(shè)計模式(接口)
這篇文章主要帶領(lǐng)大家學(xué)習JavaScript設(shè)計模式,其中重點介紹接口,舉例說明什么是接口,對接口進行詳細剖析,感興趣的小伙伴們可以參考一下2015-11-11JS一維數(shù)組轉(zhuǎn)化為三維數(shù)組的實現(xiàn)示例
很多時候,跟后端接口開發(fā)對接時,因為需求的關(guān)系,需要前端地區(qū)數(shù)據(jù)跟后端的數(shù)據(jù)要一一對應(yīng),有時候需要的是多維數(shù)據(jù),這篇文章主要介紹了JS一維數(shù)組轉(zhuǎn)化為三維數(shù)組的實現(xiàn)示例,感興趣的可以了解一下2021-12-12js中如何復(fù)制一個對象并獲取其所有屬性和屬性對應(yīng)的值
如果知道這個對象的所有屬性自然就可以重新new一個,然后對每個屬性賦值,就可以做到,但如果不知道呢?如何創(chuàng)建一個內(nèi)容相同 的對象呢?下面有個不錯的示例,大家可以看看2013-10-10