TypeScript入门写法总结

前言

本次文章依然是我自己学习总结的一个markdown写的简要笔记，以供开发的参考，希望能帮到有同样需求的同学。

再次安利一下在VSCode利用markmap插件中编写markdown转思维导图的方式，对于学习总结来说真的很方便

TypeScript（以下称TS）

照例贴出markmap渲染出来的思维导图：

是JavaScript（以下称JS）超集

• 这里会列出常见的TypeScript的写法参考，以帮助想使用TS快速上手的同学，并不会做更详细的解读
• 所以针对的还是有一定前端基础的同学，对于基础级别的同学来说可能有难度，会不知所云
• 对于结合vue3或者react使用时用到的大多都是类型的约束
• 另外通过类型约束在定义方法或者导出数据时，引入使用的时候会有更有好的类型提示
• 我们使用时大致有几个方面
  • 使用已有类库抛出的类型接口
  • 自己定义enum枚举类型来全局使用
  • 自定义type文件来定义已有类库抛出的接口类型约束

基本数据类型

• string

  • let name: string = 'Vue3'
    

• number

  • let price: number = 128
    

• boolean

  • let isOnline: boolean = true
    

• undefined

  • let someUndefined: undefined
    

• null

  • let someNull: null
    

• array

  • let me: [string, number] = ['孙悟空', 120] 
    

• any

  • // 相当于没有类型限制，可以把任意数据类型数据赋值给该变量 
    let someAny: any = 'whatever'
    someAny = 1
    

• enum(枚举)

  • // 用来列举一些常量和分类信息，可以指定值也可以shying默认值（从0开始计数）
    enum ThemeEnum {
      DARK = 'dark',
      LIGHT = 'light',
    }
    ThemeEnum['DARK']
    

• 【｜】类型联合符

  • // 如下可以给fullName赋值string和undefined类型的数据
    let fullName: string | undefined
    

给JS变量添加限定的类型

• let price: number = 128;
  let name: string = 'xiaoming';
  // 函数传参和返回值注解
  function greeting(text: string): string {
    return `Hello ${text}`
  }
  

interface定义复杂类型（对象类型）接口

• // ? 是配置该属性可选
  // readonly 是配置该属性只读，初始化后不可再修改
  interface Course {
    type: string,
    num: number,
    readonly teacher: string,
    time?: string | boolean
  }
  let math: Course = {
    type: '1',
    num: 1,
    teacher: 'xiaoming'
  }
  

函数类型限制

• 基本使用方式

  • function 函数名(参数:参数类型):返回值类型{} //大致语法
    function add(x: number, y: number): number {    
      return x + y;
    }
    add(1, 2);
    

• 使用type约束变量接收的函数

  • type addType = (a:number,b:number) => number
    let add2: addType  = function(x: number, y: number): number {
      return x + y;
    }
    

• 使用interface约束变量接收的函数

  • interface AddType {
      (a:number,b:number)=>number
    }
    let add2:AddType  = function(x: number, y: number): number {
      return x + y;
    }
    

• 函数重载（是指定义同一个函数传参不同返回不同的一组函数）

  • // 通过如下一组定义的方式实现函数的重载 
    function reverse(x: number): number
    function reverse(x: string): string
    function reverse(x: number | string): number | string | void {
      if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
      } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
      }
    }
    

泛型（输出类型是跟参数类型一致的）

• // test的输入类型是与返回的类型绑定
  function test<T>(args: T): T {
    return args;
  }
  test<string>('玩转vue 3全家桶') // 这个T就是string，所以返回值必须得是string
  test<number>(1)
  

keyof extends

• type C = keyof Course;
  

• function getProperty<T, K extends keyof T>(o: T, name: K): T[k] {
    return o[name];
  }
  

对于宿主环境（浏览器）中全局接口的类型约束

• // Window接口
  let w:Window = window
  

• // DOM接口
  let ele:HTMLElement = document.createElement('div')
  

• // NodeList接口
  let allDiv: NodeList = document.querySelectorAll('div')
  

• ele.addEventListener('click',function(e: MouseEvent) {
    const args:IArguments = arguments w.alert(1)
    console.log(args)
  }, false)
  

有了类型约束和定义就会有很好的错误提示和功能提示

这样项目维护起来就有据可依，并不像纯JS语言环境下写完的项目有注释的情况下依然不运行不知道之前的业务逻辑

总结

本文列出了TS的基本用法，后续会在有最佳实践时单独写一个TypeScript结合Vue使用的文章，进一步阐述我们使用TS开发的必要性，和社区全面拥抱TS开发的趋势。