Typescript 第十一章 与JavaScript互操作(外参变量声明,外参类型声明,外参模块声明)

第十一章 与JavaScript互操作

本章讨论在实际开发中如何编写Typescript。有可能你真正把代码从无类型语言向Typescript迁移。也有可能要使用第三方库。

  • 使用类型声明
  • 逐步从JavaScript迁移到Typescript
  • 使用第三方JavaScript和Typescript

11.1 类型声明

类型声明文件的扩展名为.d.ts。类型声明配合JSDoc注解(11.2.3节)是无类型的JavaScript代码附加Typescript类型的一种方式。( // 编译时将.d.ts类型声明一同打包"declaration": true,tsconfig.json)

类型声明的句法与常规的Typescript代码类似,不过也有几点区别:

  • 类型声明只能包含类型,不能有值。这意味着,类型声明不能实现函数,类,对象或变量,参数也不难有默认值。

  • 类型声明虽然不能定义值,但是可以声明JavaScript代码中定义了某个值,此时,使用特殊的declare关键字。

  • 类型声明只声明使用方可见的类型。如果某个代码不导出,或者是函数体内的局部变量,则不为其声明类型。

  • // a.ts
    export let a = "hhaha"
    export let b = false
    let c = [1,2]// 没有导出
    

    tsc -d a.ts的到a.d.ts

    export declare let a:string;
    epoxrt declare let b:boolean;
    
import {Subscriber} from './Subscriber'
import {Subscription} from './Subscription'
import {PartialObserver,Subscribable,TeardownLogic} from './types'export class Observable<T> implements Subscribable<T>{public _isScalar:boolean = falseconstructor(subscribe?:(this:Observable<T>,Subscriber:Subscriber<T>)=>TeardownLogic){if(subscribe){this._subscribe = subscribe}}static create<T>(subscribe?:(subscriber:Subscriber<T>)=>TeardownLogic){return new Observable<T>(subscribe)}
}

当我们使用tsc -d 文件名编译上面的代码,得到类型声明.d.ts如下

import {Subscriber} from './Subscriber'
import {Subscription} from './Subscription'
import {PartialObserver,Subscribable,TeardownLogic} from './types'export declare class Observable<T> implements Subscribable<T>{//1.public _isScalar:booleanconstructor(subscribe?:(this:Observable<T>,Subscriber:Subscriber<T>)=>TeardownLogic);static create<T>(subscribe?:(subscriber:Subscriber<T>)=>TeardownLogic):Observable<T>// 2.
}
  1. 注意,class前面有个declare关键字。在类型声明中虽然不可以真正定义类,但是却可以声明.d.ts文件对应的JavaScript文件中定义了指定的类。declare可以理解为一种断言:我肯定,我写的JavaScrip代码中导出了这个类型的类
  2. 由于类型声明中不能有具体实现,所以这里只保留了声明,没有实现的签名

注意:.d.ts文件中是.ts文件去掉实现后剩下的内容,也就是说,.d.ts只有.ts文件里的类型

这个类型声明对其他文件而言没有用,因为其他文件可以直接访问.ts,而该文件自身就是Typescript源文件。如果你在自己的Typescript应用中使用,类型声明就有用了。

如果某个npm包的开发人员想打包信息,发布到npm中供Typescript使用,有两种选择:第一,打包源文件(Typescript使用)和编译得到的JavaScript文件(JavaScript使用);第二种,提供编译后得到的JavaScript文件和供Typescript用户使用的类型声明。后一种方式所占的文件体积较小,而且十分明确。另外后一种还能减少编译应用所用的时间。

类型声明文件有以下作用:

  1. 其他人在他们的Typescript应用使用你提供的编译好的Typescript代码时,TSC会寻找与生成的JavaScript文件对应的.d.ts文件,让Typescript知道项目中涉及哪些类型。
  2. 支持Typescript的代码编辑器会读取.d.ts文件,在输入代码的过程中显示有用的提示
  3. 由于无需重新编译Typescript代码,能极大地减少编译时间。

类型声明的作用是告诉Typescript,“JavaScript文件中定义了这个,我来告诉你他的信息“类型声明描述的是外参环境,与包含值的常规声明要区分开,而常规的变量声明使用let或const关键字声明变量:

借助类型声明可以做到下面几件事:

  • 告诉Typescript,JavaScript文件中定义了某个全局变量。假如你在浏览环境中通过脚本定义了Promise或process.env,或许应该使用外参变量声明让Typescript提前知道这一点。
  • 定义在项目中任何地方都可以使用的全局类型,无须导入就能使用(这叫外参类型声明)
  • 描述通过npm安装的第三方模块(外参模块声明)

类型声明,不管作何用途,始终放在脚本模式下的.ts或.d.ts文件中。按约定,如果有对应的.js文件,类型声明文件使用.d.ts扩展名;否则,使用.ts扩展名。

类型声明文件的名称没有具体要求,例如,存储在顶层目录中的types.ts,除非内容多到不可控,一个类型声明文件中可以有任意多个类型声明。

最后要注意一点:在类型声明文件中,顶层值要使用declare关键字(declare let,declare function,declare class等),而顶层类型和接口则不需要。

下面说明每种类型声明。

11.1.1 外参变量声明

外参变量声明让Typescript知道全局变量的存在,无须显式导入即可在项目中的任何.ts和.d.ts中使用。

假设你在浏览器中运行nodejs程序,某个时刻,该程序会检查process.env.NODE_ENV的值(为“development”或”production“)。运行这个程序。你会看到错误

可以自己定义process.env.NODE_ENV

process = {env:{NODE_ENV:'production'}
}
// 不报错但是有提示
declare let process:{env:{NODE_EMV:"development"|"production"}
}
process = {env:{NODE_ENV:'production'}
}

我们向Typescript声明,有个全局对象名为process,而且该对象有个属性,名为env,对属性名下有一个属性,名为NODE_ENV。告诉Typescript这些信息之后,报错提示就会消失,现在可以安全地定义全局对象process。

TSC设置:lib

Typescript自带一些类型声明,用于描述JavaScript标准库,包括JavaScript内置的类型,例如Array和Promise;例如window和document及onmessage(职程)

11.1.2 外参类型声明

// types.ts
type A = string
全局可用

11.1.3 外参模块声明

// types.ts
declare module "test-module" {export type name = stringlet test:nameexport default test
}

未完待续!!!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/25092.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

bash的特性(二)IO重定向与管道

bash的I/O重定向及管道 一、概述 在shell中&#xff0c;最常使用的fd(file descriptor)有三个&#xff0c;标准输入&#xff0c;标准输出&#xff0c;错误输出。进程用文件描述符来管理打开的文件。 名称 文件描述符 标准输入&#xff08;stdin) 0 键盘&#xff0c;也可以…

(十一)大数据实战——hadoop高可用之HDFS手动模式高可用

前言 本节内容我们介绍一下hadoop在手动模式下如何实现HDFS的高可用&#xff0c;HDFS的高可用功能是通过配置多个 NameNodes(Active/Standby)实现在集群中对 NameNode 的热备来解决上述问题。如果出现故障&#xff0c;如机器崩溃或机器需要升级维护&#xff0c;这时可通过此种…

DP-GAN剩余代码

在前面计算完损失后&#xff0c;该进行更新&#xff1a; 1&#xff1a;netEMA是模型的生成器&#xff1a; 遍历生成器的state_dict&#xff0c;将每一个键对应的值乘以EMA_decay。 接着根据当前迭代步数计算num_upd&#xff0c;每1000,2500,10000代倍数就执行一次。 当num…

❤ npm不是内部或外部命令,也不是可运行的程序 或批处理文件

❤ npm不是内部或外部命令,也不是可运行的程序 或批处理文件 cmd或者终端用nvm 安装提示&#xff1a; npm不是内部或外部命令,也不是可运行的程序或批处理文件 原因&#xff08;一&#xff09; 提示这个问题&#xff0c;有可能是Node没有安装&#xff0c;也有可能是没有配置…

ardupilot 中坐标变换矩阵和坐标系变换矩阵区别

目录 文章目录 目录摘要1.坐标变换矩阵与坐标系变换矩阵摘要 本节主要记录ardupilot 中坐标变换矩阵和坐标系变换矩阵的区别,这里非常重要,特别是进行姿态误差计算时,如果理解错误,很难搞明白后面算法。 1.坐标变换矩阵与坐标系变换矩阵 坐标变换矩阵的本质含义:是可以把…

【elementui】解决el-select组件失去焦点blur事件每次获取的是上一次选中值的问题

目录 【问题描述】 【问题摘要】 【分析问题】 【完整Test代码】 【封装自定义指令】 ↑↑↑↑↑↑↑↑↑↑↑↑ 不想看解决问题过程的可点击上方【封装自定义指令】目录直接跳转获取结果即可~~~ 【问题描述】 一位朋友遇到这么一个开发场景&#xff1a;在表格里面嵌入el-…

js-4:BOM是什么?

1、Bom是什么&#xff1f; BOM&#xff08;Browser Object Model&#xff09;&#xff0c;浏览器对象模型&#xff0c;提供了独立于内容与浏览器窗口进行交互的对象&#xff0c;其作用是跟浏览器做一些交互效果&#xff0c;例如如何进行页面的后退&#xff0c;前进&#xff0c;…

CPP17 计算小球走过的路程和反弹高度

描述 一球从 h 米高度自由落下&#xff0c;每次落地后反跳回原高度的一半再落下&#xff0c;求它在第 n 次落地时共经过了多少米&#xff1f;第 n 次返弹多高&#xff1f; 输入描述&#xff1a; 输入小球下落的高度和落地的次数&#xff08;先输入小球初始高度再输入反弹次数…

NetSuite 2023.2 Cash 360 功能更新

大约一年前&#xff0c;Cash 360功能推出。我们写了篇介绍&#xff1a; NetSuite Cash 360_netsuite oneworld数据可以迁移到sap上吗_NetSuite知识会的博客-CSDN博客Cash 360是在SuiteWorld 2021做的预告&#xff0c;本来是要跟着22.1发布出来&#xff0c;但是各种原因导致跳票…

【Kubernetes】当K8s出现问题时,从哪些方面可以排查

前言 kubernetes&#xff0c;简称K8s&#xff0c;是用8代替名字中间的8个字符“ubernete”而成的缩写。是一个开源的&#xff0c;用于管理云平台中多个主机上的容器化的应用&#xff0c;Kubernetes的目标是让部署容器化的应用简单并且高效&#xff08;powerful&#xff09;,Kub…

小红书2023/08/06Java后端笔试 AK

T1&#xff08;模拟、哈希表&#xff09; #include <bits/stdc.h>using namespace std;typedef long long LL; typedef pair<string, int> PSI;const int N 1e5 10;void solve() {string line, t;getline(cin, line);line ;vector<PSI> ans;unordered_m…

【CSS3】CSS3 2D 转换 - scale 缩放 ② ( 使用 scale 设置缩放代码示例 - 图片缩放示例 )

文章目录 一、需求分析二、代码分析三、代码示例四、执行结果 一、需求分析 默认状态下 , 界面中显示一张图片 : 当鼠标移动到 图片上时 , 显示如下效果 , 其中图片是逐渐放大的 , 有一个过渡 : 二、代码分析 上述盒子模型布局结构如下 , div 是外层父容器 , a 标签用于设置链接…

手撕最常见的算法岗面试题(25道)

手撕代码环节常常是面试官给出题目的口头或文字描述&#xff0c;要求在纸上手写或在txt文档中打字&#xff0c;面试以简单数据结构与算法题为主&#xff0c;考察基本代码功底。 考察频次&#xff1a;链表 > 字符串/哈希 > 二叉树与图 > 栈/队列 > 查找/排序/搜索 …

金融供应链智能合约 -- 智能合约实例

前提 Ownable:监管者合约,有一个函数能转让监管者。 SupplyChainFin:供应链金融合约,银行、公司信息上链&#xff0c;公司和银行之间的转账。 发票&#xff1a;记录者交易双方和交易金额等的一种记录数据。如:我在超市买了一瓶水,超市给我开了一张发票。 Ownable // SPDX-…

基于java理发店预约系统微信小程序设计与实现

摘要 多姿多彩的世界带来了美好的生活&#xff0c;行业的发展也是形形色色的离不开技术的发展。作为时代进步的发展方面&#xff0c;信息技术至始至终都是成就行业发展的重要秘密。不论何种行业&#xff0c;大到国家、企业&#xff0c;小到团体、个人都在多方位的结合信息化技术…

【C++】unordered_map在Windows和Linux上的不同行为

我目前手头上的项目&#xff0c;需要编译在板端Linux上运行&#xff0c;但是日常daily调试多在Windows上开发。这就涉及到同一份代码在多平台上的编译个运行。有一次遇到了一个奇怪的现象&#xff1a;跑同样的一份代码&#xff0c;Windows和Linux出来的结果是不一致的。最终确定…

spring security + oauth2 使用RedisTokenStore 以json格式存储

1.项目架构 2.自己对 TokenStore 的 redis实现 package com.enterprise.auth.config;import org.springframework.data.redis.connection.RedisConnection; import org.springframework.data.redis.connection.RedisConnectionFactory; import org.springframework.data.redis…

深度学习入门必读 | 深度学习算法技术原理和发展

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。随着人工智能技术的发展&#xff0c;深度学习已经成为了一个热门话题。为了让大家能够更清晰直观的了解深度学习&#xff0c;今天这篇文章就重点给大家介绍一下深度学习算法的技术原理和发展&#xff01;&#x1f308; 目录…

fishing之第一篇邮件的基础知识

文章目录 一、传统钓鱼方式0x01 介绍0x02 社工方式0x03 传统钓鱼方式:0x04 常见的钓鱼方式最简单的邮件头伪造利用文件名反转(RLO)自解压自解压+RLO二、企业对钓鱼的防护邮件网关三、现今钓鱼演变0x01 鱼叉网络钓鱼0x02 水坑攻击0x03 U盘钓鱼0x04 信息收集常见信息包括常见可获…

Python中的PDF文本提取:使用fitz和wxPython库(带进度条)

引言&#xff1a; 处理大量PDF文档的文本提取任务可能是一项繁琐的工作。本文将介绍一个使用Python编写的工具&#xff0c;可通过简单的操作一键提取大量PDF文档中的文本内容&#xff0c;极大地提高工作效率。 import wx import pathlib import fitzclass PDFExtractor(wx.Fr…