🎉 前言
- 虽然之前有学过
TypeScript
但是平时业务上面都还是用JavaScript
来开发导致逐渐对TypeScript
生疏了。 - 借此更文活动的机会再来一起学习一下
TypeScript
的知识吧。 - 在之前的文章中我们
TypeScript
的基础知识过了一遍,是不是发现其实也不会很难呢。 - 本文也是
TypeScript
进阶篇的第五篇,应该也是入门进阶的最后一篇了,关于基础篇可以看我之前分享的文章喔~ - 本文大概
1400+
字,阅读可能需要六分钟~ 🥂
🌱 声明语句
- 我们在
JavaScript
声音全局变量可能就是一个var
来声明,而在TypeScript
中我们会用到declare
,declare
翻译过来也就是声明的意思。
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 var
跟declare 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
需要符合拥有name
sex
age
属性的形状。
👋 写在最后
- 本文也算是记录一下
TypeScript
的学习,我们的TypeScript
入门指南到这里也就结束了,大家可以一起回顾学习。 - 入了门之后基本上
TypeScript
在业务中就够用了,接下里就可以去看看一些TypeScript
封装的工具类型呀好的源码来深入学习。 - 其实吧,如果一开始没使用习惯
TypeScript
也不要盲目跟从,JavaScript
还是很强大的,特别是以前vue2.x
项目中使用惯了JavaScript
就用回去也没关系,不是说一定要用TypeScript
,大家看着尽力而为就好了,TypeScript
至少了解一下,入一下门免得以后别人写的代码看不懂就不好了。 - 好了,关于
TypeScript
的入门我就分享到这里了,如果您觉得这篇文章有帮助到您的的话不妨🍉关注+点赞+收藏+评论+转发🍉支持一下哟~~😛
🌅 往期精彩
「TypeScript」入门基础(一)🎯---安装与基础数据类型
「TypeScript」入门基础(二)🎯---联合类型与接口
「TypeScript」入门基础(三)🎯---数组类型与函数类型