• 《21天精通TypeScript-4》-类型推断与语义检查


    大家好,我是半夏👴,一个热爱分享的前端程序员(半吊子后端程序员).如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

    专栏地址

    https://blog.csdn.net/shangyanaf/category_11822476.html

    专栏封面

    类型推断

    在编码区域中,输入以下代码:

    let userName= '123'
    
    • 1

    当你将鼠标放置在该串代码处,会看到TS推断出userName的类型是string

    image-20220413175812323

    当你添加以下代码

    userName = 18
    
    • 1

    此时该串代码下方会出现红色的波浪线。TS会提示你:Type ‘number’ is not assignable to type ‘string’.

    image-20220413180125583

    在JS中,我们可以给一个变量分配不同类型的值,例如这里的userName你可以给他赋值字符串,也可以赋值为数字。

    这种不重视变量类型的写法,可能会带来一些不易察觉的错误。

    在TS中,当我们给一个变量初始化是字符串类型,后面我们又给他分配了数字类型!TS会抛出具体的错误信息。

    这也就是TS的类型推断。当我们初始化一个变量,并赋值。TS会从赋值中推断出该类型。例如:let userName= '123',TS

    会推断出userName的类型是字符串。

    当然除了简单的类型之外,TS类型推断还支持Object和Array类型推断。

    例如下面的user对象,TS会自动推断user对象的类型为:{name:"搞前端的半夏"},并且内部属性name的类型也可以推断出来。

    let user={
      name:"搞前端的半夏"
    }
    
    • 1
    • 2
    • 3

    image-20220413211341770

    image-20220413211502889

    同样的类型推断也适用于函数返回。

    例如下面这个示例,result接受了函数的返回值0,当鼠标放在result是,TS会提示result是number类型。

    function test() {
      return 0;
    }
    let tesult=test()
    
    • 1
    • 2
    • 3
    • 4

    image-20220413204028612

    语义分析

    百度百科:语义分析是编译过程的一个逻辑阶段, 语义分析的任务是对结构上正确的源程序进行上下文有关性质的审查,进行类型审查。

    在TS中,语义分析阶段分为:

    • 作用域分析
    • 类型检查

    TS的一个目标就是通过静态分析代码,在开发过程中提前知道代码中的可能错误。

    例如下面的代码,这是一个极端的例子,应该不会有人这么写吧。在test函数内部,有一个for循环,很不幸的是,我们不小心在循环的时候,使用了const定义i

    function test(){
        for(const i=0;i<100;i++){
        
         }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5

    在TS环境下:

    image-20220413214144205

    在JS环境下:

    image-20220413214201141

  • 相关阅读:
    vue3+ts表格拖拽
    Python的PyQt框架的使用-创建主窗体篇
    python中几个常用函数
    GMT 格式 转 标准日期格式
    精准获取B端客户的实用技巧和策略
    SpringCloud(三) RestTemplate实现服务间调用
    java连接zookeeper
    acwing算法基础之基础算法--区间合并算法
    Naive 组件库 动态渲染icon图标
    libtorch在windows上的使用及采坑
  • 原文地址:https://blog.csdn.net/shangyanaf/article/details/125940699