什么是TypeScript TypeScript 快速入门

短命女 2022-12-23 07:10 229阅读 0赞

### TypeScript 概述 ###

基于JS的扩展语言，最低能编译到ES3版本的代码。  
任何一种JavaScript运行环境都支持TypeScript进行开发  
相比于Flow,功能更为强大,生态更健全、更完善  
很多大项目都使用TypeScript进行开发 – Angular/Vue3.0  
TyperScript — 前端领域中都第二语言  
缺点：  
语言本身多了很多概念，提高了学习成本  
项目初期，TypeScript会增加一些成本  
![!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/2020112122124877.png?x-oss-process=image/watermark,type\_ZmFuZ3poZW5naGVpdGk,shadow\_10,text\_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size\_16,color\_FFFFFF,t\_70\#pic\_cente][https_img-blog.csdnimg.cn_2020112122124877.png_x-oss-process_image_watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_cente]

### TypeScript 快速上手 ###

新建文件夹，导入vscode，先npm init 初始化。  
安装: yarn add typescript --dev  
编译: yarn tsc .\\code\\01-getting-started.ts  
检查类型异常  
如果没有报错，移除类型注解等扩展语法  
自动转换ES新特性  
生成配置文件: yarn tsc --init  
直接运行yarn tsc编译整个项目，配置文件才会生效

### TypeScript 配置文件 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center]

### TypeScript 原始类型 ###

// 原始数据类型
    
    const a: string = 'foobar'
    
    const b: number = 100 // NaN Infinity
    
    const c: boolean = true // false
    
    // 在非严格模式（strictNullChecks）下，
    // string, number, boolean 都可以为空
    // const d: string = null
    // const d: number = null
    // const d: boolean = null
    
    const e: void = undefined
    
    const f: null = null
    
    const g: undefined = undefined
    
    // Symbol 是 ES2015 标准中定义的成员，
    // 使用它的前提是必须确保有对应的 ES2015 标准库引用
    // 也就是 tsconfig.json 中的 lib 选项必须包含 ES2015
    const h: symbol = Symbol()
    
    // Promise
    
    // const error: string = 100

### TypeScript 标准库声明 ###

不指定库调用其他ES版本的方法或对象会报错。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 1]

### TypeScript 中文错误消息 ###

设置中文错误消息  
![在这里插入图片描述][20201121233847734.png_pic_center]

### TypeScript 作用域问题 ###

// 作用域问题
    
    // 默认文件中的成员会作为全局成员
    // 多个文件中有相同成员就会出现冲突
    // const a = 123
    
    // 解决办法1: IIFE 提供独立作用域
    // (function () { 
    // const a = 123
    // })()
    
    // 解决办法2: 在当前文件使用 export，也就是把当前文件变成一个模块
    // 模块有单独的作用域
    const a = 123
    
    export { }

### TypeScript Object 类型 ###

// Object 类型
    
    export { } // 确保跟其它示例没有成员冲突
    
    // object 类型是指除了原始类型以外的其它类型
    const foo: object = function () { } // [] // {}
    
    // 如果需要明确限制对象类型，则应该使用这种类型对象字面量的语法，或者是「接口」
    const obj: {  foo: number, bar: string } = {  foo: 123, bar: 'string' }
    
    // 接口的概念后续介绍

### TypeScript 数组类型 ###

// 数组类型
    
    export { } // 确保跟其它示例没有成员冲突
    
    // 数组类型的两种表示方式
    
    const arr1: Array<number> = [1, 2, 3]
    
    const arr2: number[] = [1, 2, 3]
    
    // 案例 -----------------------
    
    // 如果是 JS，需要判断是不是每个成员都是数字
    // 使用 TS，类型有保障，不用添加类型判断
    function sum (...args: number[]) { 
      return args.reduce((prev, current) => prev + current, 0)
    }
    
    sum(1, 2, 3) // => 6

### TypeScript 元组类型 ###

// 元组（Tuple）
    
    export { } // 确保跟其它示例没有成员冲突
    
    const tuple: [number, string] = [18, 'zce']
    
    // const age = tuple[0]
    // const name = tuple[1]
    
    const [age, name] = tuple
    
    // ---------------------
    
    const entries: [string, number][] = Object.entries({ 
      foo: 123,
      bar: 456
    })
    
    const [key, value] = entries[0]
    // key => foo, value => 123

### TypeScript 枚举类型 ###

// 枚举（Enum）
    
    export { } // 确保跟其它示例没有成员冲突
    
    // 用对象模拟枚举
    // const PostStatus = { 
    // Draft: 0,
    // Unpublished: 1,
    // Published: 2
    // }
    
    // 标准的数字枚举
    // enum PostStatus { 
    // Draft = 0,
    // Unpublished = 1,
    // Published = 2
    // }
    
    // 数字枚举，枚举值自动基于前一个值自增 不指定就从0开始累积
    // enum PostStatus { 
    // Draft = 6,
    // Unpublished, // => 7
    // Published // => 8
    // }
    
    // 字符串枚举
    // enum PostStatus { 
    // Draft = 'aaa',
    // Unpublished = 'bbb',
    // Published = 'ccc'
    // }
    
    // 常量枚举，不会侵入编译结果
    const enum PostStatus { 
      Draft,
      Unpublished,
      Published
    }
    
    const post = { 
      title: 'Hello TypeScript',
      content: 'TypeScript is a typed superset of JavaScript.',
      status: PostStatus.Draft // 3 // 1 // 0
    }
    
    // PostStatus[0] // => Draft

双向键值对对象，可以通过key获取value，也可以通过value获取key  
enum编译后的样子  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 2]  
编译成js后 enum会被移除，变成对应数值。  
![在这里插入图片描述][20201121235556608.png_pic_center]

### TypeScript 函数类型 ###

// 函数类型
    
    export { } // 确保跟其它示例没有成员冲突
    
    function func1 (a: number, b: number = 10, ...rest: number[]): string { 
      return 'func1'
    }
    
    func1(100, 200)
    
    func1(100)
    
    func1(100, 200, 300)
    
    // -----------------------------------------
    
    const func2: (a: number, b: number) => string = function (a: number, b: number): string { 
      return 'func2'
    }

### TypeScript 任意类型 ###

// 任意类型（弱类型）
    
    export { } // 确保跟其它示例没有成员冲突
    
    function stringify (value: any) { 
      return JSON.stringify(value)
    }
    
    stringify('string')
    
    stringify(100)
    
    stringify(true)
    
    let foo: any = 'string'
    
    foo = 100
    
    foo.bar()
    
    // any 类型是不安全的

### TypeScript 隐式类型推断 ###

// 隐式类型推断
    
    export { } // 确保跟其它示例没有成员冲突
    
    let age = 18 // number
    
    // age = 'string'
    
    let foo
    
    foo = 100
    
    foo = 'string'
    
    // 建议为每个变量添加明确的类型标注

### TypeScript 类型断言 ###

// 类型断言
    
    export { } // 确保跟其它示例没有成员冲突
    
    // 假定这个 nums 来自一个明确的接口
    const nums = [110, 120, 119, 112]
    
    const res = nums.find(i => i > 0)
    
    // const square = res * res
    
    const num1 = res as number
    
    const num2 = <number>res // JSX 下不能使用

### TypeScript 接口 ###

接口，一种规范，一种契约。

// 接口
    
    export { } // 确保跟其它示例没有成员冲突
    
    interface Post { 
      title: string
      content: string
    }
    
    function printPost (post: Post) { 
      console.log(post.title)
      console.log(post.content)
    }
    
    printPost({ 
      title: 'Hello TypeScript',
      content: 'A javascript superset'
    })

### TypeScript 接口补充 ###

// 可选成员、只读成员、动态成员
    
    export { } // 确保跟其它示例没有成员冲突
    
    // -------------------------------------------
    
    interface Post { 
      title: string
      content: string
      subtitle?: string
      readonly summary: string
    }
    
    const hello: Post = { 
      title: 'Hello TypeScript',
      content: 'A javascript superset',
      summary: 'A javascript'
    }
    
    // hello.summary = 'other'
    
    // ---------------------------------- 动态添加成员
    
    interface Cache { 
      [prop: string]: string
    }
    
    const cache: Cache = { }
    
    cache.foo = 'value1'
    cache.bar = 'value2'

### TypeScript 类的基本使用 ###

描述具体事务的抽象特征，例如手机是一类，子类必须有父类的共同特点，子类也可以有自己的特点。

// 类（Class）
    
    export { } // 确保跟其它示例没有成员冲突
    
    class Person { 
      name: string // = 'init name'
      age: number
      
      constructor (name: string, age: number) { 
        this.name = name
        this.age = age
      }
    
      sayHi (msg: string): void { 
        console.log(`I am ${ this.name}, ${ msg}`)
      }
    }

### TypeScript 类的访问修饰符 ###

// 类的访问修饰符
    
    export { } // 确保跟其它示例没有成员冲突
    
    class Person { 
      public name: string // = 'init name' ts中默认就是public
      private age: number
      protected gender: boolean
      
      constructor (name: string, age: number) { 
        this.name = name
        this.age = age
        this.gender = true
      }
    
      sayHi (msg: string): void { 
        console.log(`I am ${ this.name}, ${ msg}`)
        console.log(this.age)
      }
    }
    
    class Student extends Person { 
      private constructor (name: string, age: number) { 
        super(name, age)
        console.log(this.gender)
      }
    
      static create (name: string, age: number) { 
        return new Student(name, age)
      }
    }
    
    const tom = new Person('tom', 18)
    console.log(tom.name)
    // console.log(tom.age) 只有class内部可以访问
    // console.log(tom.gender) 只有class内部可以访问 
    
    const jack = Student.create('jack', 18)

protected和private区别，子类可以访问protected  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 3]  
如果 private修饰了construct就无法new，只能在内部new  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 4]

### TypeScript 类的只读属性 ###

只能构造函数中初始化，或类型声明的时候初始化。

// 类的只读属性
    
    export { } // 确保跟其它示例没有成员冲突
    
    class Person { 
      public name: string // = 'init name'
      private age: number
      // 只读成员
      protected readonly gender: boolean
      
      constructor (name: string, age: number) { 
        this.name = name
        this.age = age
        this.gender = true
      }
    
      sayHi (msg: string): void { 
        console.log(`I am ${ this.name}, ${ msg}`)
        console.log(this.age)
      }
    }
    
    const tom = new Person('tom', 18)
    console.log(tom.name)
    // tom.gender = false

### TypeScript 类与接口 ###

一个接口对应一个能力会更合理一些，例如车也会跑，但不会吃。

// 类与接口
    
    export { } // 确保跟其它示例没有成员冲突
    
    interface Eat { 
      eat (food: string): void
    }
    
    interface Run { 
      run (distance: number): void
    }
    
    class Person implements Eat, Run { 
      eat (food: string): void { 
        console.log(`优雅的进餐: ${ food}`)
      }
    
      run (distance: number) { 
        console.log(`直立行走: ${ distance}`)
      }
    }
    
    class Animal implements Eat, Run { 
      eat (food: string): void { 
        console.log(`呼噜呼噜的吃: ${ food}`)
      }
    
      run (distance: number) { 
        console.log(`爬行: ${ distance}`)
      }
    }

### TypeScript 抽象类 ###

抽象类包含具体的实现，接口不包含实现即可。  
抽象类只能被继承，不能new了，  
抽象方法需要重写。

// 抽线类
    
    export { } // 确保跟其它示例没有成员冲突
    
    abstract class Animal { 
      eat (food: string): void { 
        console.log(`呼噜呼噜的吃: ${ food}`)
      }
    
      abstract run (distance: number): void
    }
    
    class Dog extends Animal { 
      run(distance: number): void { 
        console.log('四脚爬行', distance)
      }
    
    }
    
    const d = new Dog()
    d.eat('嗯西马')
    d.run(100)

### TypeScript 泛型 ###

作用：极大复用代码。调用的时候才声明。

// 泛型
    
    export { } // 确保跟其它示例没有成员冲突
    
    function createNumberArray (length: number, value: number): number[] { 
      const arr = Array<number>(length).fill(value)
      return arr
    }
    
    function createStringArray (length: number, value: string): string[] { 
      const arr = Array<string>(length).fill(value)
      return arr
    }
    
    function createArray<T> (length: number, value: T): T[] { 
      const arr = Array<T>(length).fill(value)
      return arr
    }
    
    // const res = createNumberArray(3, 100)
    // res => [100, 100, 100]
    
    const res = createArray<string>(3, 'foo')

### TypeScript 类型声明 ###

引入其他库的时候可能没有强类型检查，这个时候可以用类型声明设置一个。

// 类型声明
    
    import {  camelCase } from 'lodash'
    import qs from 'query-string'
    
    qs.parse('?key=value&key2=value2')
    
    // declare function camelCase (input: string): string
    
    const res = camelCase('hello typed')
    
    
    export { } // 确保跟其它示例没有成员冲突

可安装loadsh对应声明模块可解决。![在这里插入图片描述][20201122011240706.png_pic_center]

[https_img-blog.csdnimg.cn_2020112122124877.png_x-oss-process_image_watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_cente]: /images/20221120/4acc6f1bbee0470b914b0486aa1be4dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/6ccb84601e494e738a6a2fd2a9c94410.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/25388a9b8537456ba27be966149670c5.png
[20201121233847734.png_pic_center]: /images/20221120/1b810b381d764679b5aab399455541e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/ded5b6346ff84c199b18d16743d657b7.png
[20201121235556608.png_pic_center]: https://img-blog.csdnimg.cn/20201121235556608.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201122005146724.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20201122005415339.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center
[20201122011240706.png_pic_center]: https://img-blog.csdnimg.cn/20201122011240706.png#pic_center