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

```
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,686评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,668评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,160评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,736评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,847评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,043评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,129评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,872评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,318评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,645评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,777评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,861评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,589评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,687评论 2 351

推荐阅读更多精彩内容