首页 > 编程语言 >【TS】 TypeScript声明文件:打通JavaScript和TypeScript的桥梁

【TS】 TypeScript声明文件:打通JavaScript和TypeScript的桥梁

时间:2024-08-05 23:26:28浏览次数:12  
标签:function property1 TypeScript JavaScript TS number 类型

 TypeScript 声明文件的讲解:
 
TypeScript 声明文件(Declaration File)在 TypeScript 项目中具有举足轻重的地位,它是连接 TypeScript 严格的类型系统与外部无类型或类型不明确的 JavaScript 代码的关键纽带。
 
声明文件的核心价值在于为 TypeScript 编译器提供必要的类型信息,使得在使用外部 JavaScript 库、模块或代码片段时,能够进行精确的类型检查和智能的代码提示,从而显著提高代码的质量、可维护性以及开发效率。
 
让我们通过一系列丰富多样且逐步深入的示例来透彻理解声明文件的各个方面。
 
首先,考虑一个基础但常见的 JavaScript 函数库  simpleFunctions.js  ,其中包含了以下几个简单函数:
 
 

function sum(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

function divide(a, b) {
  if (b === 0) {
    throw new Error('Division by zero is not allowed.');
  }
  return a / b;
}


 
 
为了在 TypeScript 项目中有效地使用这些函数,并确保类型的安全性和准确性,我们创建一个对应的声明文件  simpleFunctions.d.ts  :
 
 

declare function sum(a: number, b: number): number;
declare function multiply(a: number, b: number): number;
declare function divide(a: number, b: number): number;


 
 
在这个声明文件中,我们明确地指定了每个函数的参数类型均为  number  ,并且返回值类型也为  number  。这使得在 TypeScript 代码中调用这些函数时,编译器能够检查传入的参数是否符合预期的类型,如果类型不匹配,将会给出相应的错误提示。
 
接下来,我们看一个更复杂一些的情况,假设有一个 JavaScript 库  complexObjectLibrary.js  ,其中定义了一个包含多个方法和属性的对象:
 
 

function createComplexObject(name, age) {
  return {
    name: name,
    age: age,
    greet() {
      console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    },
    updateAge(newAge) {
      this.age = newAge;
    }
  };
}


 
 
相应的声明文件  complexObjectLibrary.d.ts  可以这样来编写:
 
 

interface ComplexObject {
  name: string;
  age: number;
  greet(): void;
  updateAge(newAge: number): void;
}

declare function createComplexObject(name: string, age: number): ComplexObject;


 
 
在此声明文件中,我们首先定义了一个名为  ComplexObject  的接口,详细描述了对象的属性和方法的类型。然后,声明了  createComplexObject  函数,明确其参数类型以及返回值的类型为我们定义的  ComplexObject  接口。
 
再深入一步,考虑一个包含类和继承关系的 JavaScript 库  classHierarchy.js  :
 
 

function BaseClass(property1) {
  this.property1 = property1;
}

BaseClass.prototype.baseMethod = function() {
  console.log(`Base method called with property1: ${this.property1}`);
}

function DerivedClass(property1, property2) {
  BaseClass.call(this, property1);
  this.property2 = property2;
}

DerivedClass.prototype = Object.create(BaseClass.prototype);
DerivedClass.prototype.constructor = DerivedClass;

DerivedClass.prototype.derivedMethod = function() {
  console.log(`Derived method called with property2: ${this.property2}`);
}


 
 
对应的声明文件  classHierarchy.d.ts  可能如下所示:
 

class BaseClass {
  constructor(property1: string);
  property1: string;
  baseMethod(): void;
}

class DerivedClass extends BaseClass {
  constructor(property1: string, property2: number);
  property2: number;
  derivedMethod(): void;
}
 


 
在这个声明文件中,我们清晰地定义了基类  BaseClass  和派生类  DerivedClass  的结构,包括构造函数的参数类型、实例属性的类型以及方法的返回类型。这种详细的类型定义使得在 TypeScript 中使用这些类时,能够充分利用类型系统的优势,避免潜在的类型错误。
 
现在,让我们探讨一个涉及模块和命名空间的 JavaScript 库  moduleNamespace.js  :
 
 

(function() {
  function internalFunction() {
    // 内部实现
  }

  namespace MyNamespace {
    export function publicFunction1() {
      // 公共函数 1 的实现
    }

    export function publicFunction2() {
      // 公共函数 2 的实现
    }
  }
})();


 
 
相应的声明文件  moduleNamespace.d.ts  可以这样构建:
 
 

declare namespace MyNamespace {
  function publicFunction1(): void;
  function publicFunction2(): void;
}


 
 
通过这样的声明,我们明确了命名空间  MyNamespace  中公开可用的函数及其类型。
 
此外,如果存在与全局对象或窗口对象相关的 JavaScript 代码,例如:
 
 

window.globalSettings = {
  theme: 'light',
  fontSize: 14
};

window.performGlobalAction = function() {
  // 全局操作的实现
};


 
 
对应的声明文件可以是这样:
 
 

interface GlobalSettings {
  theme: string;
  fontSize: number;
}

declare var globalSettings: GlobalSettings;
declare function performGlobalAction(): void;


 
 
通过上述广泛而深入的示例,我们全面展示了 TypeScript 声明文件在处理各种不同结构和复杂度的 JavaScript 代码时的强大能力和灵活性。它能够为简单的函数、复杂的对象、类层次结构、模块、命名空间以及全局对象提供准确且详尽的类型定义,确保 TypeScript 项目在与外部 JavaScript 代码集成时保持高度的类型安全性和开发的便利性。
 
 

 

标签:function,property1,TypeScript,JavaScript,TS,number,类型
From: https://blog.csdn.net/zhugedali_/article/details/140938506

相关文章

  • vue3+ts公司人员管理系统示例(接口版)
    vue3+ts公司人员管理系统示例(接口版)首先,让我们创建一个新的Vue3项目:vuecreatecompany-management-systemcdcompany-management-systemvueaddtypescriptnpminstallelement-plusaxios然后,我们来创建必要的文件和组件:在src/types目录下创建Employee.ts:/......
  • JavaScript(二十二)——JavaScript this 关键字
    目录方法中的this单独使用this函数中使用this(默认)函数中使用this(严格模式)事件中的this对象方法中绑定显式函数绑定面向对象语言中this表示当前对象的一个引用。但在JavaScript中this不是固定不变的,它会随着执行环境的改变而改变。在方法中,this表示该方......
  • React与Electron与ts一些组件配置与交互遇到的问题
    React同vue一样都是组件化的,React更加的复杂多变,当我们需要改变页面中的内容时不仅仅要在直接关联的布局页面进行修改,步骤大致如下:在当前直接布局页面中增加布局组件函数,比如:renderRightView(){//TODORV++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++re......
  • Jetson Orin nano 安装ubuntu22.04
    最近项目需要给底盘部署建图以及定位导航,底盘用的是Jetsonorinnano,用的是Ros2humble版本的机器人操作系统,由于humble版本的系统只支持ubuntu22.04,所以需要在orinnano上重新烧录ubuntu22.04,但是这个版本的系统跟之前的有些不一样,也踩了很多坑,查阅了官网的相关资料后,已经......
  • WPF locate discreted points via periodically and set transparency via the alpha,
    //xaml<Windowx:Class="WpfApp229.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.mi......
  • AT_abl_e Replace Digits 题解
    题目传送门前置知识线段树解法需要维护区间信息,考虑使用线段树维护。预处理出\(\overline{xx\dotsx}\),其中\(x\in\{1,2,3,4,5,6,7,8,9\}\),便于区间赋值。然后就是普通的线段树板子了。代码#include<bits/stdc++.h>usingnamespacestd;#definelllonglong#de......
  • echarts 关系图(graph)里的links的起点和终点设置无效
    问题描述,data里面数据也设置了id({id:1})这样设置的,links里面设置了source和target({source:0,target:1}),但是运行发现只显示了node没显示连线(edge),去看了文档描述 1、source  stringnumber 边的源节点名称的字符串,也支持使用数字表示源节点的索引。2、target stringn......
  • JavaScript 中的闭包和事件委托
    包(Closures)闭包是JavaScript中一个非常强大的特性,它允许函数访问其外部作用域中的变量,即使在该函数被调用时,外部作用域已经执行完毕。闭包可以帮助我们实现数据的私有化、封装和模块化,使代码更简洁、易读和可维护。闭包的定义简单来说,闭包是指有权访问另一个函数作......
  • 图表全能王(ChartStudio) 上架VisionPro!
    图表全能王(ChartStudio)-终极图表制作工具!支持条形图、折线图、面积图、柱形图、条形图、饼图、玫瑰图、雷达图、牛肉图、风琴图、旭日图、桑基图等图表。https://apps.apple.com/app/chartstudio-data-analysis/id6474099675https://apps.apple.com/cn/app/%E5%9B%BE%E8%A1%......
  • 3GPP RAN TSG#102闭幕及R19启动项目-5(NR 中的人工智能 (AI)/机器学习 (ML) 研究)
    Rel-19StudyonArtificialIntelligence(AI)/MachineLearning(ML)formobilityinNR-主体提案编号:RP-234055一、文档摘要(AI生成)工作项目描述:本文介绍了一个名为FS_NR_AIML_Mob的工作项目,目的是研究在NR中使用人工智能/机器学习(AI/ML)来提升移动性。研究内容:本文主要......