「TypeScript」入门进阶(五)✈️---声明与声明合并

简介: 「TypeScript」入门进阶(五)✈️---声明与声明合并

🎉 前言


  • 虽然之前有学过TypeScript但是平时业务上面都还是用JavaScript来开发导致逐渐对TypeScript生疏了。
  • 借此更文活动的机会再来一起学习一下TypeScript的知识吧。
  • 在之前的文章中我们TypeScript的基础知识过了一遍,是不是发现其实也不会很难呢。
  • 本文也是TypeScript进阶篇的第五篇,应该也是入门进阶的最后一篇了,关于基础篇可以看我之前分享的文章喔~
  • 本文大概1400+字,阅读可能需要六分钟~ 🥂


🌱 声明语句


  • 我们在JavaScript声音全局变量可能就是一个var来声明,而在TypeScript中我们会用到declaredeclare翻译过来也就是声明的意思。
  • declare var声明全局变量
  • declare function声明全局方法
  • declare class声明全局类
  • declare enum声明全局枚举类型
  • declare namespace声明命名空间


🍃 声明全局变量

declare var id:string;
declare let book:string;
declare const people:string;
复制代码
  • JavaScript类似只是在前面多加了一个declare,实际上declare vardeclare let没什么区别,值得注意的是declare const定义的是一个常量,后面就不允许改变了,事实上我们一般全局定义的一般都是常量所以用declare const较多。
  • 如果在一个地方全局声明了一个变量,那么在其他的地方就不可以再重新声明了。

  • 可以看到我们在别的地方声明过people,那么它就会报错了。


🌸 声明全局方法

declare function addIce(x:number):string
复制代码
  • 我们可以类似这样声明一个全局方法,值得注意的是我们使用声明declare的时候不能将它实现,只能声明,如下图这样就不行了。


🌷 声明全局类

declare class People{
  name: string;
  constructor(name: string);
  sleep(): string;
}
复制代码
  • 我们可以类似这样声明一个全局类,同样的我们使用声明declare的时候不能将它的方法进行实现,如下图。


🌼 声明全局枚举类型

declare enum fruit {
  apple,
  banana,
  mango
}
let sthFruit=[fruit.apple,fruit.banana,fruit.mango]
复制代码
  • 我们可以这样声明一个全局枚举类型。


🌻 声明命名空间

  • namespace翻译过来是命名空间的意思,顾名思义我们可以给一个独立空间。
declare namespace doSthing {
  function sleep(x:string):string
}
doSthing.sleep('我在睡觉')
复制代码


🌺 声明文件


  • 我们一般将这些声明的语句放在一个声明文件里面,声明文件以.d.ts为后缀
declare var book:string
declare const id:number=1314520
declare function addIce(x:number):string
declare class People{
  name: string;
  constructor(name: string);
  sleep(): string;
}
复制代码
  • 我们可以在ts文件中直接使用。

  • 关于更多声明文件的时候在这篇文章写的比较清楚了,链接发出来给大家可以自行学习喔~传送门


🌈 声明合并


  • TypeScript中我们使用声明合并将同一个名字的两个独立声明合并为单一声明


🐣 合并函数

  • 我们之前分享过,当我们命名了相同的函数时,它会重载。
function add(x: number): number;
function add(x: string): string;
function add(x: number | string): number | string | void{
    if (typeof x === 'number') {
        return 23
    } else if (typeof x === 'string') {
        return '23岁'
    }
}
复制代码
  • 如上我们前面两个定义了函数的类型,最后一个定义并实现了add函数,add可以接收number类型和string类型分别做出不同的处理。


🐛 合并接口

interface People {
  name: string;
  sex: string;
}
interface People {
  age: number;
}
let xm: People = {name: '小明', sex: '男', age: 23};
复制代码
  • 如上我们就简单的合并了一个接口,让最后的xm需要符合拥有namesexage属性的形状。


👋 写在最后


  • 本文也算是记录一下TypeScript的学习,我们的TypeScript入门指南到这里也就结束了,大家可以一起回顾学习。
  • 入了门之后基本上TypeScript在业务中就够用了,接下里就可以去看看一些TypeScript封装的工具类型呀好的源码来深入学习。
  • 其实吧,如果一开始没使用习惯TypeScript也不要盲目跟从,JavaScript还是很强大的,特别是以前vue2.x项目中使用惯了JavaScript就用回去也没关系,不是说一定要用TypeScript,大家看着尽力而为就好了,TypeScript至少了解一下,入一下门免得以后别人写的代码看不懂就不好了。
  • 好了,关于TypeScript的入门我就分享到这里了,如果您觉得这篇文章有帮助到您的的话不妨🍉关注+点赞+收藏+评论+转发🍉支持一下哟~~😛


🌅 往期精彩


「TypeScript」入门基础(一)🎯---安装与基础数据类型

「TypeScript」入门基础(二)🎯---联合类型与接口

「TypeScript」入门基础(三)🎯---数组类型与函数类型

「TypeScript」入门基础(四)🎯---类型断言

「TypeScript」入门进阶(一)✈️---类型别名、字符串字面量与元组

「TypeScript」入门进阶(二)✈️--类

「TypeScript」入门进阶(三)✈️---类与接口

「TypeScript」入门进阶(四)✈️---泛型

相关文章
|
6月前
|
JavaScript 前端开发
【TypeScript入门】TypeScript入门篇——数据类型
我们人类可以很容易的分清数字与字符的区别,但是计算机并不能呀,计算机虽然很强大,但从某种角度上看又很傻,除非你明确的告诉它,1是数字,“汉”是文字,否则它是分不清1和‘汉’的区别的,因此,在每个编程语言里都会有一个叫数据类型的东东,其实就是对常用的各种数据类型进行了明确的划分,你想让计算机进行数值运算,你就传数字给它,你想让他处理文字,就传字符串类型给他。
65 3
|
1月前
|
JavaScript 前端开发 编译器
【小白入门】 浏览器如何识别Typescript?
【10月更文挑战第1天】浏览器如何识别Typescript?
|
2月前
|
JavaScript 前端开发 编译器
TypeScript,从0到入门带你进入类型的世界
该文章提供了TypeScript的入门指南,从安装配置到基础语法,再到高级特性如泛型、接口等的使用,帮助初学者快速掌握TypeScript的基本用法。
|
4月前
|
JavaScript 编译器
TypeScript(十三)声明合并
TypeScript(十三)声明合并
58 0
|
4月前
|
JavaScript 前端开发 索引
TypeScript(十)泛型进阶
TypeScript(十)泛型进阶
35 0
|
5月前
|
JavaScript 前端开发 程序员
typescript入门笔记分享
typescript入门笔记分享
30 0
|
5月前
|
JavaScript 前端开发 编译器
34.【TypeScript 教程】声明合并
34.【TypeScript 教程】声明合并
38 0
|
6月前
|
JavaScript 前端开发
TypeScript极速入门笔记1
TypeScript极速入门笔记1
73 4
|
6月前
|
JavaScript
vite+typescript从入门到实战(三)
vite+typescript从入门到实战
97 0
|
6月前
|
JavaScript
vite+typescript从入门到实战(二)
vite+typescript从入门到实战
85 0