TypeScript 声明文件

最新推荐文章于 2024-04-19 08:36:30 发布

samxiaoguai

最新推荐文章于 2024-04-19 08:36:30 发布

阅读量685

点赞数

分类专栏：前端 TS 文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/samxiaoguai/article/details/128443814

版权

前端同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

11 篇文章 1 订阅

订阅专栏

一、TypeScript 声明文件

1.TypeScript 声明文件的创建和简单使用

一、TypeScript 声明文件

1.TypeScript 声明文件的创建和简单使用

TypeScript 作为 JavaScript 的超集，在开发过程中不可避免要引用其他第三方的 JavaScript 的库。虽然通过直接引用可以调用库的类和方法，但是却无法使用TypeScript 诸如类型检查等特性功能。为了解决这个问题，需要将这些库里的函数和方法体去掉后只保留导出类型声明，而产生了一个描述 JavaScript 库和模块信息的声明文件。通过引用这个声明文件，就可以借用 TypeScript 的各种特性来使用库文件了。

创建xiaoguai.js定义一个第三方库

let SamXiaoguai;  
(function(SamXiaoguai) {
    let SamC = (function () { 
        function SamC() { 
        } 
    })
    SamC.prototype.samSpaek = function (oneStr) {
        return oneStr; 
    }
    SamXiaoguai.SamC = SamC; 
    return SamC; 
})(SamXiaoguai || (SamXiaoguai = {})); 
let samTest = new SamXiaoguai.SamC();

声明文件以 .d.ts 为后缀

创建SamC.d.ts文件使用declare module声明文件或模块

declare module SamXiaoguai {
    export class SamC {
        samSpaek(oneStr: string): string;
    }
}

创建samTest文件引入声明文件

/// <reference path = "SamC.d.ts" /> 
let obj = new SamXiaoguai.SamC();
console.log(obj.samSpaek("Hello"));

使用tsc samTest.ts编译生成samTest.js

可以通过创建html使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SamXiaoguai</title>
    <script src="xiaoguai.js"></script>
    <script src="samTest.js"></script>
</head>

<body>
    <script>
        let obj2 = new SamXiaoguai.SamC();
        console.log(obj2.samSpaek("Hello"));
        console.log(obj2.samSpaek("Ts"));
    </script>
</body>

</html>

打开控制台可以看到输出内容为