美文网首页
typescript的基本使用

typescript的基本使用

作者: 付出的前端路 | 来源:发表于2022-06-26 17:21 被阅读0次

    环境参数: typecript: 4.2.3

    typescript的作用

    为什么要使用typescript?

    • 类型推演与类型匹配
    • 开发编译时报错
    • 极大程度的避免了低级错误
    • 支持JavaScript最新特性(包含ES6/7/8)

    二、语法

    1、变量声明:let、const

    2、TypeScript类型

    • 基础类型:boolean、string、 number、 array、null、undefined、object
      ==新增==: tuple、 enum、 void、 never、 any
    • 高级类型:union 组合类型、Nullable 可空类型、Literal 预定义类型

    3、常见用法

    // 1、数组
    let list1: Array<number> = [1, 2, 3]
    let list2: number[] = [1, 2, 3]
    let list3 = [1, 2, ,3]
    
    let list4 = [1, '2', '3']
    let list5: any[] = [1, 'b', true]
    
    // 元祖(tuple)
    // 固定长度和固定类型的特殊数组。注意声明元祖一定要指定类型。
    let person1: [number, string] = [1, 'a']
    person1[0] = 'b' // 报错
    
    
    // 2、联合(Union)和字面量(Literal)类型
    let union2: number | string | string[]
    union2 = true // 报错
    
    let literal: 1 | '2' | [1, 2]
    literal = [1, 2, 3] // 报错
    
    // 3、枚举类型Enum
    enum Color {
      red = 'red1',
      blue = 'blue',
      green = 'green'
    }
    console.log('Color', Color.red) // red1
    
    
    // 4、any 和 unknown
    let randomValue: any = 666
    randomValue =  true
    randomValue()
    randomValue.toUpperCase()
    
    // any,可理解为忽略类型检查;unknow比any更加保险一点,保证类型安全
    
    let randomValue: unknown = 666
    randomValue =  true
    randomValue() // 报错
    randomValue.toUpperCase() // 报错
    
    
    // 5、void、undefined、 never
    function printResult (): undefined {
      console.log('lalala')
      return
    }
    
    function thorwError (message: string, errorCode: number): never {
      throw {
        message,
        errorCode
      }
    }
    
    

    4、类型适配(类型断言) Type Assertions

    let message: any
    message = 'abc'
    message.endsWith('c')
    
    let ddd = (<string>message).endsWith('c')
    let ddd2 = (message as string).endsWith('c')
    

    5、函数类型

    // 函数类型
    let log = (message: string, code?: number, desc: string = '404') => {
      console.log(message, code, desc)
    }
    log('helloWord')
    
    // Object对象类型
    const person = {
      firstName: 'hello Word',
      lastName: 'gao',
      age: 18
    }
    console.log(person.hobby) // 报错
    

    6、 接口、类、访问修饰符

    // interFace接口
    let drawPoint = (point: Point) => {
      console.log({x: point.x, y: point.y })
    }
    
    drawPoint({x: 123, y: 456})
    drawPoint({x: '123', y: '456'}) // 报错
    
    interface Point {
      x: number,
      y: number
    }
    
    // Class类
    interface IPoint {
      x: number,
      y: number;
      drawPoint: () => void;
      getDistances: (p: IPoint) => number
    }
    
    class Point implements IPoint {
      constructor(public x: number, public y: number = 2) {
    
      }
    
      drawPoint = () => {
        console.log('X:', this.x, 'Y:', this.y)
      }
    
      getDistances = (p: IPoint) => {
        return Math.pow(p.x - this.x, 2) + Math.pow(p.y - this.y, 2) 
      }
    }
    
    const point = new Point(24, 50)
    point.drawPoint()
    
    
    // 访问修饰符
    public 、 private, protected
    
    // 私有变量懒人包
    
    

    7、泛型

    数据类型 + 尖括号

    // 基本泛型
    let list1: Array<number> = [1, 2, 3]
    
    // 动态泛型
    let makeTuple = <T, Y>(x: T, y: Y) => [x, y];
    const v1 = makeTuple(1, 'one')
    const v2 = makeTuple(true, 1)
    

    相关文章

      网友评论

          本文标题:typescript的基本使用

          本文链接:https://www.haomeiwen.com/subject/gmjgvrtx.html