【前端进阶】-TypeScript类型声明文件详解及使用说明_typescript声明与实现-程序员宅基地

技术标签: TypeScript  前端  typescript  javascript  

前言

博主主页蜡笔雏田学代码
专栏链接【TypeScript专栏】
前三篇文章讲解了TypeScript的一些高级类型
详细内容请阅读如下:
【前端进阶】-TypeScript高级类型 | 泛型约束、泛型接口、泛型工具类型
【前端进阶】-TypeScript高级类型 | 交叉类型、索引签名类型、映射类型
【前端进阶】-TypeScript高级类型 | 类的初始化、构造函数、继承、成员可见性
今天来学习TypeScript的类型声明文件相关知识!
感兴趣的小伙伴一起来看看吧~

在这里插入图片描述

TypeScript 类型声明文件

概述

今天几乎所有的JavaScript应用都会引入许多第三方库来完成任务需求。

这些第三方库不管是否是用TS编写的,最终都要编译成JS代码,才能发布给开发者使用。

我们知道是TS提供了类型,才有了代码提示和类型保护等机制。

但在项目开发中使用第三方库时,你会发现它们几乎都有相应的TS类型,这些类型是怎么来的呢?类型声明文件

类型声明文件:用来为已存在的JS库提供类型信息。

这样在TS项目中使用这些库时,就像用TS一样,都会有代码提示,类型保护等机制了。

  1. TS的两种文件类型
  2. 类型声明文件的使用说明

TS中的两种文件类型

TS中有两种文件类型:1 .ts文件 2 .d.ts文件

.ts文件:

  1. 既包含类型信息又可执行代码。
  2. 可以被编译为.js文件,然后,执行代码。
  3. 用途:编写程序代码的地方

.d.ts文件:

  1. 只包含类型信息的类型声明文件。
  2. 不会生成.js文件,仅用于提供类型信息。
  3. 用途:为JS提供类型信息

总结:.ts是implementation(代码实现文件);.d.ts是declaration(类型声明文件)。

如果要为JS库提供类型信息,要使用.d.ts 文件。

类型声明文件的使用说明

在使用TS开发项目时,类型声明文件的使用包括以下两种方式:

  1. 使用已有的类型声明文件
  2. 创建自己的类型声明文件

学习顺序:先会用(别人的)再会写(自己的)。


一、使用已有的类型声明文件

1、内置类型声明文件; 2、第三方库的类型声明文件

A. 内置类型声明文件

TS为JS运行时可用的所有标准化内置API都提供了声明文件。

比如,在使用数组时,数组所有方法都会有相应的代码提示以及类型信息:

(method)Array<number>.forEach(callbackfn:(value: number, index:number, array: number[]) 
=> void, thisArg?: any): void

实际上这都是TS提供的内置类型声明文件。

可以通过Ctrl+鼠标左键来查看内置类型声明文件内容。

比如,查看forEach方法的类型声明,在VScode中会自动跳转到lib.es5.d.ts类型声明文件中。

当然,像window,document等BOM,DOM API也都有相应的类型声明(lib.dom.d.ts)。

B. 第三方库的类型声明文件

目前,几乎所有常用的第三方库都有相应的类型声明文件。

第三方库的类型声明文件有两种存在形式:1、库自带类型声明文件 2、由DefinitelyTyped提供

a. 库自带类型声明文件

比如,axios。

在这里插入图片描述

解释:这种情况下,正常导入该库,TS就会自动加载库自己的类型声明文件,以提供该库的类型声明。

b. 由DefinitelyTyped提供

DefinitelyTyped是一个github仓库,用来提供高质量TypeScript类型声明。

可以通过npm/yarn来下载该仓库提供的TS类型声明包,这些包的名称格式为:@types/*。

比如,@types/react,@types/lodash等。

说明:在实际项目开发时,如果你使用的第三方库没有自带的声明文件,VScode会给出明确的提示。

在这里插入图片描述

解释:当安装@types/*类型声明包后,TS也会自动加载该类型声明包,以提供该库的类型声明。

补充:TS官方文档提供了一个页面,可以来查询@types/*库。


二、创建自己的类型声明文件

A、 项目内共享类型 ;B、为已有JS文件提供类型声明

A. 项目内共享类型

如果多个.ts文件都用到同一个类型,此时可以创建.d.ts文件提供该类型,实现类型共享

// a.ts
import {
     Props } from './index'  //通过import导入
// type Props = { x: number; y: number }

let p1: Props = {
    
  x: 1,
  y: 2
}
// b.ts
import {
     Props } from './index'  //通过import导入
// type Props = { x: number; y: number } 

let p2: Props = {
    
  x: 12,
  y: 24
}
// index.d.ts
type Props = {
     x: number; y: number }
export {
     Props }  //创建需要共享的类型,并使用export导出

操作步骤:

  1. 创建index.d.ts类型声明文件。
  2. 创建需要共享的类型,并使用export导出(TS中的类型也可以使用import/export实现模块化功能)。
  3. 在需要使用共享类型的.ts文件中,通过import导入即可(.d.ts后缀导入时,直接省略)。

B. 为已有JS文件提供类型声明

概述:

  1. 将JS项目迁移到TS项目时,为了让已有的.js文件有类型声明。
  2. 成为库作者,创建库给他人使用。

注意:类型声明文件的编写与模块化方式相关,不同的模块化方式有不同的写法。但由于历史原因,JS模块化的发展经历过多种变化(AMD,CommonJS,UMD,ESModule等),而TS支持各种模块化形式的类型声明。这就导致,类型声明文件相关内容又多又杂。

演示:基于最新的ESModuleimport/export)来为已有.js文件,创建类型声明文件。

开发环境准备:使用webpack搭建,通过ts-loader处理.ts文件。

说明TS项目中也可以使用.js文件。

说明:在导入.js文件时,TS会自动加载与.js同名的.d.ts文件,以提供类型声明。

declare关键字:用于类型声明,为其他地方(比如,.js文件)已存在的变量声明类型,而不是创建一个新的变量

  1. 对于type,interface等这些明确就是TS类型的(只能在TS中使用的),可以省略declare关键字。
  2. 对于let,function等具有双重含义(在JS,TS中都能用),应该使用declare关键字,明确指出此处用于类型声明。
// index.ts文件
//导入.js文件时,自动加载.js文件的类型声明文件.d.ts,然后就能用到声明好的类型了
import {
     count, songName, add, Point} from './utils'

type Person = {
    
  name: string
  age: number
}

let p:Partial<Person> = {
    
  name: 'jack'
}

let p1: Point = {
    
  x: 10,
  y: 20
}
console.log('项目启动了')
console.log('count', count)
console.log('songName', songName)
console.log('add()', add(1, 4))
//utils.js文件
let count = 10
let songName = '痴心绝对'
let position = {
    
  x: 0,
  y: 0
}
//函数声明形式
function add(x, y) {
    
  return x + y
}

function changeDirection(direction) {
    
  console.log(direction)
}
//函数表达式形式
const fomartPoint = point => {
    
  console.log('当前坐标:',point)
}

export {
     count, songName, position, add, changeDirection, fomartPoint }
//utils.d.ts文件
//为utils.js文件来提供类型声明
declare let count: number  //为已存在的变量声明类型
declare let songName: string
interface Point {
    
  x: number
  y: number
}
declare let position: Point

declare function add(x: number, y: number): number
declare function changeDirection(direction: 'up' | 'down' | 'left' | 'right'): void

//自定义函数类型
type FomartPoint = (point: Point) => void
declare const fomartPoint: FomartPoint

//注意:类型提供好以后,需要使用 模块化方案 中提供的模块化语法,来导出声明好的类型。
//然后,才能在其他的.ts文件中使用。
export {
     count, songName, position, add, changeDirection, fomartPoint }

今天的分享就到这里啦 \textcolor{red}{今天的分享就到这里啦} 今天的分享就到这里啦

原创不易,还希望各位大佬支持一下 \textcolor{blue}{原创不易,还希望各位大佬支持一下} 原创不易,还希望各位大佬支持一下

点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/xuxuii/article/details/126923067

智能推荐

C语言课后习题_c课后习题语言-程序员宅基地

文章浏览阅读182次。简单的C语言小程序#include <iostream>#include <math.h>int main(){ float i,s=0,n,sum=0; scanf("%f",&n); for(i=1;i<=n-1;i++) { s=100* pow(0.5,i); sum=3*s+sum; } if(i==n) { sum=sum+100* pow(0.5,i-1); } printf("%8.6f",sum);_c课后习题语言

Sliding Window Matrix Maximum_implement a sliding-window mean filter on an n*n m-程序员宅基地

文章浏览阅读135次。Given an array ofn * mmatrix, and a moving matrix window (sizek * k), move the window from top left to botton right at each iteration, find the maximum sum inside the window at each moving.Return..._implement a sliding-window mean filter on an n*n matrix with an m*m window

Java生成5个不重复的随机数_5位随机数java-程序员宅基地

文章浏览阅读3.3k次。Java生成5个不重复的随机数$package com.sjs.cs;//生成5个不重复的随机数import java.util.Random;public class SjsTest03 {public static void main(String[] args) {//定义生成随机数对象Random r = new Random(); //定义一个5个长度的int类型数组 int arr[] = new int[5]; //给以上数组每一个元素一个初始值,值为-1_5位随机数java

rebase退出(master|REBASE)模式_git 退出rebase-程序员宅基地

文章浏览阅读3.7k次。使用 git rebase --abort退出 REABASE模式_git 退出rebase

linux 内核源码树的建立_linux 源码 stage2.c-程序员宅基地

文章浏览阅读568次。linux 内核源码树的建立http://www.cnblogs.com/Jezze/archive/2011/12/23/2299871.html 刚看 O'REILLY 写的《LINUX 设备驱动程序》时。作者一再强调在编写驱动程序时必须 建立内核树。先前的内核只需要有一套内核头文件就够了,但因为2.6的内核模块吆喝内核源码树中的目标文件连接,通过这种方式,可得到一_linux 源码 stage2.c

Promise then方法的链式调用 读取文件_怎么用then读promise的数据-程序员宅基地

文章浏览阅读268次。引入fsconst fs = require('fs');用promise读取第一个文件用resolve返回文件内容,用then方法时,value是文件的内容。const p = new Promise(function(resolve, reject) { fs.readFile('第一个.md', (err, data) => { if (err) reject(err); resolve(data); })});链式调用then方法_怎么用then读promise的数据

随便推点

骨骼动画详解-Spine_spine骨骼动画-程序员宅基地

文章浏览阅读7.7k次。游戏中人物的走动,跑动,攻击等动作是必不可少,实现它们的方法一般采用帧动画或者骨骼动画。帧动画与骨骼动画的区别在于:帧动画的每一帧都是角色特定姿势的一个快照,动画的流畅性和平滑效果都取决于帧数的多少。而骨骼动画则是把角色的各部分身体部件图片绑定到一根根互相作用连接的“骨头”上,通过控制这些骨骼的位置、旋转方向和放大缩小而生成的动画。它们需要的图片资源各不相同,如下分别是帧动画和骨骼动画所需的资源图..._spine骨骼动画

git忽略文件.ignore以及项目问题index.lock_git ignore将index-程序员宅基地

文章浏览阅读2.6k次。如果是git的老司机,那么这个问题就很菜了。就是我们日常在本地管理后,推到远程管理,那么有一些文件我们并不想推送到远程,怎么弄?开始天真的自己竟然认为像node_modules这样的文件,git推送的时候是自动忽略的。(当时的想法是,这些文件太大了,git知道不需要)。现在回过头来,才知道多么天真。其实,需要我们自己定义规则,去考虑git需要忽略那些文件,机器再智能也需要人去操作。1、.ignor..._git ignore将index

学习笔记17 --使用matlab自带函数,将旋转矩阵计算成欧拉角_matlab旋转矩阵转欧拉角-程序员宅基地

文章浏览阅读9k次,点赞6次,收藏33次。个人环境是使用matlab2017b该公式计算欧拉角有个要求,必须是3x3的旋转矩阵(尝试过4x4的计算不了)。matlab自带的由旋转矩阵计算欧拉角公式是,rotm2eul(),可以指定旋转顺序,否则默认旋转顺序为ZYX...._matlab旋转矩阵转欧拉角

SpringCloud第九章Hystrix断路器(服务监控hystrixDashboard)_除了隔离依赖服务的调用以外,hystrix还提供了准实时的调用监控(hystrix dashboar-程序员宅基地

文章浏览阅读169次。5、服务监控hystrixDashboard5.1、概述除了隔离依赖服务的调用以外,Hystrix还提供了准实时的调用监控(Hystrix Dashboard),Hystrix会持续地记录所有通过Hystrix发起的请求的执行信息,并以统计报表和图形的形式展示给用户,包括每秒执行多少请求多少成功,多少失败等。Netflix通过hystrix-metrics-event-stream项目实现了对以上指标的监控。Spring Cloud也提供了Hystrix Dashboard的整合,对监控内容转化成可视化_除了隔离依赖服务的调用以外,hystrix还提供了准实时的调用监控(hystrix dashboard

jfinal基本概述_jifinal-程序员宅基地

文章浏览阅读1.1k次。JFinal简介基于JFinal的web项目需要创建一个继承自JFinalConfig类的子类,该类对整个web项目进行配置。JFinalConfig子类需要事项六个抽象方法1.configConstant(…)此方法用来配置JFinal常量值如开发模式常量devMode配置,会输出本次请求的URL、Controller、Method以及请求所携带的参数2.configRoute(…..._jifinal

Arthas 命令解析(jvm/thread/stack/heapdump)_arthas分析dump-程序员宅基地

文章浏览阅读3.7k次。Arthas 命令解析(jvm/thread/stack/heapdump)[Arthas](https://arthas.aliyun.com/doc/index.html)是Alibaba开源的Java诊断工具,`Arthas`支持JDK 6+,支持Linux/Mac/Windows,采用命令行交互模式,同时提供丰富的`Tab`自动补全功能,进一步方便进行问题的定位和诊断。Arthas 3.0使用OGNL表达式求值库,详见[OGNL表达式官网_arthas分析dump

推荐文章

热门文章

相关标签