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

快跑啊小卢_
1,170 阅读4分钟

这是我参与8月更文挑战的第15天，活动详情查看：8月更文挑战

🎉 前言

  • 虽然之前有学过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较多。
  • 如果在一个地方全局声明了一个变量，那么在其他的地方就不可以再重新声明了。

image.png

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

🌸 声明全局方法

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

image.png

🌷 声明全局类

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

image.png

🌼 声明全局枚举类型

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文件中直接使用。

image.png

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

🌈 声明合并

  • 在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」入门基础(三)🎯---数组类型与函数类型

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

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

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

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

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

avatar
文章
阅读
粉丝