zoukankan      html  css  js  c++  java
  • TS 自学笔记(一)

    TS 自学笔记(一)

    本文写于 2020 年 5 月 6 日

    日常废话两句

    有几天没有更新了,最近学的比较乱,休息了两天感觉好一些了。这两天玩了几个设计软件,过几天也写篇文章分享分享。

    为啥要学 TS?

    进入正题哈,经常写 JS 的人会特别多的碰到一个 bug:xxxx is not a function之类的。

    这是为什么呢?

    其实就是我们用了一些不属于它的方法。

    比如说我们有一个const a = 250,然后我们让他a.filter(()=>{})

    有人可能会说,那明明是一个 number 类型,我怎么可能给他 filter 呢?

    我之前就犯过这个错误,我想让一个数组等于另一个被 push 一个新元素数组:

    let newArr = arr.push('hello')
    newArr.filter(() => {})
    

    要知道,arr.push他的返回值是新的数组长度!

    我让一个 number 类型去使用数组方法,自然是会报错的。

    好吧我知道这样似乎非常愚蠢,但是总而言之,在日常写 JS 的报错中,有大把大把的报错是因为这种完全可以避免掉的问题

    如果是 Java,他会在编辑器内就给你划红线,不会等到你运行了,再去告诉你。

    这就是动态语言的毛病。

    关于代码提示

    不仅如此,我们是否会在写代码的时候烦心于代码提示呢?

    比如我在某个 class 内部声明了一些变量,可是当我在其他地方进行实力化的时候,统统都没有提示!

    我必须要翻到这个 class 的文件,找到那些变量再确认一番。

    而 TS 的接口概念,可以帮助我们非常完美的解决问题!


    所以我们需要学习 TypeScript。

    据说用了 TS,能有效减少 80%的 Bug(笑)。

    但不管这是不是真的,从各个大框架对于 TS 的青睐程度来看,未来几年内,TS 必然会是绝对的热点之一!

    毕竟,现在已经不只是:

    能被 JS 改写的终将被 JS 改写

    而是:

    能被 TS 改写的,终将被 TS 改写

    01 变量类型

    JS 是弱类型语言,TS 却不是。

    TS 拥有这些类型:

    1. undefined
    2. null
    3. boolean
    4. number
    5. string
    6. object
    7. array
    
    ----⬆️JS 有的,⬇️JS 没有的----
    
    8. tuple
    9. enum
    10. any
    11. void
    12. never
    

    number、string、boolean 没有什么特别好说的,和 JS 没什么区别,我来写几个我觉得比较重要的。

    数组的声明

    let list: number[] = [1, 2, 3]
    let list_b: Array<number> = [1, 2, 3]
    

    第一种方法不难理解,就是生命一个 number 数组。

    第二种方法叫做数组泛型,即Array<元素类型>

    什么叫做泛型呢?

    如果我们有一个函数:

    function identity(arg: number): number {
      return arg
    }
    

    那这个时候,传入的变量就必须是数字。

    考虑到可复用性的问题,我们可以使用泛型。

    function identity<T>(arg: T): T {
      return arg
    }
    

    identity 函数 叫做泛型(注意,T 不是泛型!),因为它可以适用于多个类型。

    T 是类型变量,它是一种特殊的变量,只用于表示类型而不是值。

    它可以帮助我们捕获用户传入的类型,让我们可以对这个类型加以利用。

    其实之前的情况,我们可以通过 any 来实现,但是 any 就会让我们丢失 T 这一信息。

    在命名变量的时候有一个小坑,变量名不能命名为name,因为会与 DOM 中的全局 window 对象下的 name 属性出现重名。

    enum 是成组常量的好用法!

    enum Hello {
      teacher: "老师好",
      classmate: "同学好",
      parents: "爸爸好",
      girlfriend: "刘好"
    }
    

    一般情况,枚举类型会自动赋给自己常量值:

    enum Hello {
      teacher, // 0
      classmates, // 1
      parents, // 2
      girlfriend // 3
    }
    

    我们也可以从中间打断这个赋值:

    enum Hello {
      teacher, // 0
      classmates, // 1
      parents = 5, // 5
      girlfriend // 6
    }
    

    接下来会进行顺延。

    从来没有的 Never 值

    never 类型表示的是那些永不存在的值的类型,听起来就像个悖论——我如何列举一个不存在的值?

    其实never 类型可以是抛出的异常,或根本就不会有返回值的函数的返回值类型。

    function error(message: string): never {
      throw new Error(message)
    }
    
    function fail() {
      return error('Something failed')
    }
    
    function infiniteLoop(): never {
      while (true) {}
    }
    

    总体来讲大同小异,TS 补充了一些在别的语言中有过的常见数据类型,相信这一块对于 JS 开发者来说,不会是什么难题。

    唯一的难题就是习惯,可不能老是使用 any 类型!

    (未完待续)

  • 相关阅读:
    松软科技web课堂:字符串方法和属性
    松软科技web课堂:JavaScript 事件
    松软科技前端课堂:JavaScript 对象
    松软科技web课堂:JavaScript 数据类型
    MVN TEST指定运行脚本
    Cucumber语法格式
    Maven pom文件标签解析大全
    测试用例自动转换成自动化脚本
    Cucumber使用中问题
    Cucumber常用关键字
  • 原文地址:https://www.cnblogs.com/xhyccc/p/12833906.html
Copyright © 2011-2022 走看看