在ts文件中引入js模塊編寫聲明文件的寫法示例
一、聲明文件的作用
在ts文件中引入js文件,由于js代碼中沒有類型約束,所以ts無法獲得js代碼的類型信息,進而會隱式推斷js中類型為any,失去了ts代碼類型推斷和約束的作用,聲明文件就是將一個js模塊中所有對外暴露的變量、函數(shù)、類使用ts語法進行類型聲明,進而讓ts編譯器在檢測到該聲明文件之后(只要被檢測到寫在哪都可以)就可以獲取js文件中對應變量、函數(shù)、類的類型信息
二、聲明文件的寫法
1、需要導入的*.js代碼
/*test.js*/
//導出變量
export const test1 = '變量'
//導出函數(shù)
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
//聲明函數(shù)類型
export function test2(name:string):string
//聲明class接口
interface Tests{
name:string
//new()代表構造函數(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、運行結果

三、聲明文件的配置
聲明文件必須被ts檢索到,如果聲明文件不生效需要到tsconfig.json文件中添加
{
"include": ["*/*.ts"] //需要檢索的文件位置
}詳細內(nèi)容:
介紹 · 聲明文件 · TypeScript中文網(wǎng) · TypeScript——JavaScript的超集
總結
到此這篇關于在ts文件中引入js模塊編寫聲明文件的文章就介紹到這了,更多相關ts引入js模塊編寫聲明文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
javascript 關于# 和 void的區(qū)別分析
href 為#的跳到了自己的頁面。原來‘#’代表的是 #top ,2009-10-10
JS一維數(shù)組轉化為三維數(shù)組的實現(xiàn)示例
很多時候,跟后端接口開發(fā)對接時,因為需求的關系,需要前端地區(qū)數(shù)據(jù)跟后端的數(shù)據(jù)要一一對應,有時候需要的是多維數(shù)據(jù),這篇文章主要介紹了JS一維數(shù)組轉化為三維數(shù)組的實現(xiàn)示例,感興趣的可以了解一下2021-12-12

