初探Ts

作者: channel_puls | 来源:发表于2022-05-13 10:39 被阅读0次

    TS

    安装

    npm i -g typescript

    编译

    tsc xxx(文件名)

        tsc index
    

    typescript

    变量

    • string 字符串

          let str:string //定义一个变量 是string类型 作为类型推导
          let str2 = '1' //定义一个变量str2 赋值为'2' 隐式推导
      
    • number 数字

          let num:number //定义一个变量 是number类型 作为类型推导
          let num2 = 2   //定义一个变量num2 赋值为2 隐式推导
      
    • any 跳过检查

          let a:any      //声明 a 为any 寓意跳过语法检查变为原生js语法
          let b          //声明变量b 不给类型 默认为any
      
    • object 对象

          /* 定义一个接口类型 */
          interface IPerson {
              name: string
              age: number
              gender: string
          }
      
          let person: IPerson = {
              name: "小明",
              age: 12,
              gender: "female",
          }
          /* 也可以使用type 自定义变量 */
           type personType = {
              name: string
              age?: number
          }
      
          let person2: personType = {
              name: "小红",
              age: 23,
          }
      
    • string [] / number[] 字符串数组

         /* string [] 中只能是string的数组*/
           let str:string[] = ['str','2']
           let num:number[] = [1,2,3]
           /* 
           数组的类型声明 
           1 类型[]
           2 Array<类型>
           */
           // string []
           let stirs: string[]
           stirs = ["v", "2"] //里面的内容只能是string
           //number []
           let numArray: number[]
           let numArray2: Array<number>
           numArray2 = [1, 2]
      
    • literal 字面量

          let a:10 //字面量声明过的 不能在赋值给其他
          a = 10
      
    企业微信截图_16524076385723.png
    • unknown 未知

           // unknown
           let unknown: unknown // unknown 实际上是一个类型安全的any unknown 不能直接赋值给其他变量
           unknown = 10
           unknown = "ins"
           // literal = unknown //unknown 不能把值赋给其他类型
      
    • enum 枚举

            // 枚举 enum
            enum Gender {
                male = 0,
                female = 1,
            }
            let i: { name: string; gender: Gender }
            i = { name: "11", gender: Gender.male }
      
    • tuple 元组

            // 元组 tuple -->固定长度的数组
            /* 语法
            [类型,类型]
            */
            let h: [string, string]
            h = ["1", "1"]
      

    函数

          /* 函数类型 */
          /* (x: number, y: number) => number 表示此函数的类型 */
          /* (x: number, y: number) => x + y 表示 此函数 符合上述函数类型*/
          const func1: (x: number, y: number) => number = (x: number, y: number) => x + y
          type sum = (x: number, y: number) => number
          const func2: sum = (x: number, y: number) => x + y
    
          /* 函数重载 */
          function pdd(x: string, y: string): string
          function pdd(x: number, y: number): number
          function pdd(x: number | string, y: number | string): number | string | undefined {
              if (typeof x == "number" && typeof y == "number") {
                  return x + y
              } else if (typeof x == "string" && typeof y == "string") {
                  return x + y
              }
          }
          /* 
              没有与此调用匹配的重载。
              第 1 个重载(共 2 个),“(x: string, y: string): string”,出现以下错误。
              类型“number”的参数不能赋给类型“string”的参数。
              第 2 个重载(共 2 个),“(x: number, y: number): number”,出现以下错误。
              类型“string”的参数不能赋给类型“number”的参数
          */
          //pdd("x", 2)
          pdd(2, 3)
    
    

    泛型

    ```ts
        /* 泛型:在定义函数、接口、类的时候不能预先确定要使用的数据类型二十在使用的时候才能确定 */
        /* 比如 创建一个函数 传入两个参数 第一个是数据 第二个是数量 返回同第二个长度一致的数据 里面的内容是第一个参数 */
        function getList(value: string, counter: number): string[] {
            let result: string[] = []
            for (let index = 0; index < counter; index++) {
                result.push(value)
            }
            return result
        }
        /* 此时 T表示未知Type  */
        function getList2<T>(value: T, counter: number): T[] {
            let result: T[] = []
            for (let index = 0; index < counter; index++) {
                result.push(value)
            }
            return result
        }
    
        function Dis<K, T, V>(x: K, y: T, z: V): [K, T, V] {
            return [x, y, z]
        }
    
    ```
    

    ```ts
        /* 
            类可以理解为模板 通过模板可以实例化对象 
            面向编程思想
        */
        enum Gender2 {
            female = 0,
            male = 1,
        }
    
        class Person2 {
            name: string
            age: number
            gender: Gender2
            /* 设置值的类型 和 默认值 */
            constructor(name: string = "ycc", age: number = 25, gender: Gender2 = Gender2.male) {
                this.name = name
                this.age = age
                this.gender = gender
            }
            // 设置类型和默认值 设定返回值
            isCheck(bool: boolean = false): boolean {
                return bool
            }
        }
    
        const person2 = new Person2()
        console.log(person2.isCheck(true))
    
        /*  
            继承:类与类之间的关系
            继承后类于类之间的叫法
            A类继承了B这个类那么此时A类叫子类B类叫基类
            B也叫父类 
            子类 --> 派生类
            基类 --> 超类(父类)
            一旦继承 就发生了父子类的关系
        */
    
        class People extends Person2 {
            public color: string
            constructor(name: string, age: number, gender: Gender2, color: string) {
                super(name, age, gender)
                this.color = color
            }
            isChecked(bool: boolean): void {
                super.isCheck(bool)
            }
        }
        const p2 = new People("name", 23, Gender2.male, "red")
        console.log("p2", p2.color)
        /* 多态 */
        /* 定义一个父类 */
        class Animal {
            name: string
            constructor(name: string) {
                this.name = name
            }
            run(dis: number) {
                console.log(`跑了${dis}米`)
            }
        }
        /* 定义一个子类 */
        class Dog extends Animal {
            run(dis: number = 10): void {
                console.log(`跑了${dis}米`)
            }
        }
        const ani: Animal = new Animal("动物")
        ani.run(122)
    
        /* 抽象类 */
        /* 包含抽象发放 也包含实例方法 抽象类不能被实例化为了让子类进行实例化及实现方法 */
        /* 抽象类的作用 都是为子类服务的 (做约束) */
        abstract class Abs {
            /* 在子类实现方法的时候 需要实现这个接口 */
            abstract eat(): void
            run() {
                console.log("跑")
            }
        }
        /* 实例化抽象类对象 */
        /* const abs:Abs = new Abs() */ //不能被实例化
        /* 继承抽象方法 */
        class Pig extends Abs {
            eat(): void {
                console.log("拱起来吃 真好吃")
            }
        }
        const pig = new Pig()
        pig.eat()
        pig.run()
    
    ```
    

    相关文章

      网友评论

          本文标题:初探Ts

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