在ts文件中引入js模塊編寫聲明文件的寫法示例

更新時間：2023年08月29日 09:25:29 作者：z1625000762

這篇文章主要給大家介紹了關(guān)于在ts文件中引入js模塊編寫聲明文件的寫法示例,TypeScript是JavaScript的超集,TypeScript會進類型檢查,需要的朋友可以參考下

一、聲明文件的作用

在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-10
js keycode快捷鍵大全并附有簡單使用說明
js keycode快捷鍵大全并附有簡單使用說明，方便大家使用。
2010-10-10
JavaScript深入介紹WebAPI的用法
JS分成三個大的部分：ECMAScript、DOM API、BOM API，其中：ECMAScript是讓前端開發(fā)建立基本的編程思維。但是要想真正來寫一個更加復(fù)雜的有交互式的頁面,還需要WebAPI的支持，相當(dāng)于把后端編程實現(xiàn)成前端交互。DOM+BOM就組成了WebAPI
2022-06-06
JS中錨點鏈接點擊平滑滾動并自由調(diào)整到頂部位置
這篇文章主要介紹了JS中錨點鏈接點擊平滑滾動并自由調(diào)整到頂部位置,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-02-02
ES6 proxy和reflect的使用方法與應(yīng)用實例分析
這篇文章主要介紹了ES6 proxy和reflect的使用方法,結(jié)合具體實例形式分析了ES6 proxy和reflect基本功能、原理、使用方法與操作注意事項,需要的朋友可以參考下
2020-02-02
前端HTML實現(xiàn)個人簡歷信息填寫頁面效果實例
本文介紹了如何使用HTML、CSS和JavaScript構(gòu)建一個個人簡歷信息填寫頁面,涵蓋了簡歷頁面的HTML結(jié)構(gòu)設(shè)計、CSS樣式美化以及JavaScript實現(xiàn)動態(tài)功能和驗證的全過程,需要的朋友可以參考下
2024-11-11
學(xué)習(xí)JavaScript設(shè)計模式(接口)
這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript設(shè)計模式，其中重點介紹接口，舉例說明什么是接口，對接口進行詳細剖析，感興趣的小伙伴們可以參考一下
2015-11-11
JS一維數(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-12
js中如何復(fù)制一個對象并獲取其所有屬性和屬性對應(yīng)的值
如果知道這個對象的所有屬性自然就可以重新new一個，然后對每個屬性賦值，就可以做到，但如果不知道呢？如何創(chuàng)建一個內(nèi)容相同的對象呢？下面有個不錯的示例，大家可以看看
2013-10-10
輕量級 JS ToolTip提示效果
JS ToolTip提示效果，喜歡的朋友可以參考下。
2010-07-07