初探Ts

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()

```
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容