梁宵《TypeScript开发实战》(基础篇)

本文探讨了TypeScript如何通过静态类型检查增强编程的严谨性,对比了强类型与弱类型、动态类型与静态类型的差异。介绍了TypeScript的基础类型如数组、元组、函数、枚举和接口,并通过示例展示了它们在实际开发中的应用。同时,文章提到了函数重载的概念,强调了类型安全对于提高代码质量和可维护性的重要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

重塑“类型思维”

尽管es标准在几年内发展迅速,但是在类型检查方面依然是无所建树,这就会导致我们在定义函数的时候难以对函数的参数类型进行界定。众所周知js是一门动态弱类型语言,对变量的类型非常宽容,但是对于开发者而言,如果长期在没有约束的情况下开发,就会造成类型思维的缺失养成不良的编程习惯。
ts就是致力于为js提供静态类型检查,现今angular和vue团队开始全面使用ts重构代码,在es标准推出静态类型检查之前,ts是解决此问题的最好方案。
ts是拥有类型系统的js的超集,可以编译成纯js,它有三个特点:

  • 类型检查
  • 语言扩展(包含es6和未来提案中的特性,也会从其他语言借鉴如接口和抽象类等特性)
  • 工具属性(可以编译成标准的js,可以在任何浏览器,操作系统上运行)

类型基础

强类型

在强类型语言中,不允许改变变量的数据类型,除非进行强制类型转换
而弱类型则没有这些约束,虽然相对灵活,但是也更容易产生bug

动态类型与静态类型

静态类型语言:在编译阶段就确定所有变量的类型
动态类型语言:在执行阶段确定所有变量的类型
在这里插入图片描述
所以动态类型语言无论是在时间还是空间上都有比较多的性能的损耗,总结一下
在这里插入图片描述

基本类型

在这里插入图片描述
看一下数组类型的定义:
在这里插入图片描述
这里会强制指定数组中的数据类型,这也是和js不同的地方。
元组类型:
在这里插入图片描述
函数类型:
在这里插入图片描述
以此推类,可以看到ts对定义的类型可以进行指定与检查。

枚举类型

看一段角色判断的代码的例子:
在这里插入图片描述
这段代码有两个问题:

  • 可读性很差:很难记住数字的含义
  • 可维护性差:硬编码,牵一发而动全身
    这里就用到了js的枚举类型,看下数字枚举:
    在这里插入图片描述
    定义第一个字段的值为1,则后面的字段会依次递增。

接口

看下接口定义:
在这里插入图片描述
在上述的list接口中定义两个变量,一个是id,是number类型,一个是name,是string类型
如果传入的数据包含接口的必要字段,则可以通过类型检查。
但是如果传入对象字面量,则会触发对应的类型检查。
绕过这种检查主要有三种方式:

  • 将对象字面量赋值给一个变量
  • 使用类型断言
  • 看下类型断言的两种方式:
    在这里插入图片描述
    在这里插入图片描述
  • 使用字符串索引签名
    在这里插入图片描述
    如果要定义函数类型接口呢?看下定义的例子:
    在这里插入图片描述

函数相关知识点

函数定义的四种方式:
在这里插入图片描述
函数重载:

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值