0603-TypesScript

前端全栈
字数统计: 1.9k字   |   阅读时长≈ 7分钟

第一章 TypeScript简介

1.1 TypeScript概述

        TypeScript是一种由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
        TypeScript 扩展了 JavaScript 的句法，所以任何现有的 JavaScript 程序可以不加改变的在 TypeScript 下工作。TypeScript 是为大型应用之开发而设计，而编译时它产生 JavaScript 以确保兼容性。

1.2 TypeScript安装

  1. 安装TypesScript

    1
    2
    3
    4
    5
    6
    # npm
    npm install -g typescript 
    # yarn
    yarn global add typescript
    # 如果没有安装yarn,先安装yarn
    npm install -g yarn

  2. 编写TypeScript文件：是以ts结尾的文本文件，并使用tsc命令编译ts文件，编译成功会生对应的js文件

    1
    tsc xxx.ts

第二章 TypeScript基础

2.1 变量

  1. 定义变量并指定数据类型

    1
    2
    // 基本格式
    let 变量名称:变量类型;

  2. 定义变量同时为变量赋值：TypeScript会根据变量的值推断变量的类型

    1
    let 变量名称 = 值;

2.2 数据类型

1. 布尔类型（boolean）

1
2
3
4
// 定义boolean类型变量
let 变量名称:boolean;
// 定义boolean类型变量并赋值,TypeScript
let 变量名称 = true | false;

2. 数字类型 （number）

1
let 变量名称:number;

3. 字符串类型（string）

4. 数组类型（array）

1
2
3
4
// 使用数组字面量定义数组
let 变量名称:元素类型[] = [元素1,元素2,... ...];
// 使用数组对象并指定泛型定义数组
let 变量名称:Array<元素类型> = [元素1,元素2,... ...];

5. 元组类型（tuple）

  • 元组表示固定长度的数组：即一旦定义好后，元组不允许修改；

  • 定义元组需要为元组内每个元素都指定数据类型

    1
    let 变量名称:[string,number,boolean] = ["ts",2,false]

6. 枚举类型（enum）

  • 定义枚举类

    1
    2
    3
    enum 枚举类名称{
      NAME_A,NAME_B
    }

  • 使用枚举

    1
    let 变量 = 枚举类名称.NAME_A;

7. 任意类型（any）

  • TypeScript中声明any类型表示放弃对变量进行类型校验

    1
    let 变量:any;

8. 未知类型（unknown）

  • 表示未知类型：是类型安全的any；

  • unknown类型的变量不能赋值给其他类型的变量；

  • 可以用类型断言：手动将unknown类型指定为其他类型

    1
    2
    3
    4
    let str:string = '已知类型是字符串';
    let un:unknown = '字符串';
    // 通过类型断言将un赋值给str
    str = un as string;

9. 空值（null）

10. 未定义（undefined）

11. 不存在（never）

  • 表示未知类型：比如定义了一个方法专门为了throw异常，则该方法返回值为never类型；

12. 空（void）

  • 一般用于函数（方法）的返回值：表示方法没有返回值

    1
    2
    3
    function 函数名称():void{
      
    }

13. 复合类型

  • 复合类型表示变量可以定义多个类型

    1
    2
    // 下面变量表示可以是string或者number
    let 变量名称:string|number;

  • 复合类型别名：如果复合类型在多处使用，可以为符合类型定义别名

    1
    2
    3
    4
    // 定义复合类型别名
    type 别名 = string|number；
    // 使用别名
    let 变量名称:别名;

14. 对象（object）

  • 一切皆对象，可以使用对象字面量{}约束变量内的属性；
  • {}内的属性如果是?表示是可选属性；
  • {}内的属性如果是[]表示是包含多个可选属性；

2.3 函数

1. 函数返回值

1
2
3
function 函数名称():返回值类型{
  return 返回值;
}

2. 函数形参

1
2
3
function 函数名称(参数A:参数类型,参数B:参数类型, ... ...):void{
  
}

3. 可选参数

1
2
3
function getInfo(name:string,age?:number):string{
  // age是可选参数,可选参数必须配置到参数的最后面
}

4. 参数默认值

1
2
3
function getInfo(name:string,age:number=20):string{
	// age参数可以不传值,默认值是20
}

5. 三点运算符

1
2
3
4
5
6
7
8
// 接收多个参数封装到result数组中
function sum(...result:number[]):number{
	
}
// 三点运算符需要的定义在函数参数的最后
function sum(a:number,b:number,...result:number[]):number{

}

第三章 TypeScript面向对象

3.1 对象

1. 对象（class定义）

1
2
3
4
5
6
class Person {
    public name;
    public eat() {
        console.log('eat');
    }   
}

2. 属性定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Person {
  // 静态属性
  public static gender:boolean;
  // 实例属性
  public name:string;
  // 私有属性
  private age:number;
	// 只读属性
	readonly address:string;

	// 实例方法
  public eat() {
  }
  // 静态方法
  public static staticMethod(){
  }
}

3. 构造函数与this

  1. 构造函数：当使用类new对象的时候会调用该对象的构造函数

    1
    2
    3
    4
    5
    6
    class Person {
      public name
      constructor(name:string) {
        this.name = name;
      }
    }

  2. 构造函数语法糖：构造函数的属性可以定义在构造函数中，并且省略构造函数中参数赋值

    1
    2
    3
    4
    class Person {
      constructor(public name: string) {
      }
    }

  3. 构造函数中this：表示调用构造函数的对象的引用；

3.3 属性封装

  1. 类属性访问控制符

    • public: (默认控制符)
    • protected: (受保护的，内部和子类中访问到，外部不可访问)
    • private: (私有的)

  2. 设置私有属性并为属性设置getset方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    class Person {
        private name:string;
        get name(){
          return this.name;
        }
      	set name(name:string){
          this.name = name;
        }
    }

3.2 继承

1. 继承概述

  • 继承使用extends关键字：extends后面的类表示父类（被继承的类）
  • 子类拥有父类所有public和protect修饰符的成员

2. 继承extends

  1. 类的继承基本写法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 定义父类
    class Animal{
      constructor(public name: string) {
      }
    }

    // 定义Dog类并继承Animal类,则Dog类也拥有了name属性
    class Dog extends Animal{
      
    }

  2. super 调用父类的构造函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    class Person {
      constructor(public name: string) {
        this.name= name;
      }
    }

    class Employee extends Person {
      constructor(public name: string, public code: string) {
        super(name);
        this.code = code;
      }
    }

3.3 抽象类

1. 抽象类概述

  • 抽象类不能被实例化：即不能用来new对象，需要通过子类继承抽象类，new子类对象
  • 抽象类中可以定义抽象方法：只有方法参数和方法名称没有方法体的方法，抽象方法需要延迟到子类进行实现

2. 抽象类abstract

1
2
3
4
5
6
7
8
9
abstract class Animal{
  eat():void;
}

class Dog{
  eat():void{
    // 子类必须实现抽象类中的抽象方法
  }
}

3.4 接口

1. 接口概述

  • 接口是特殊的抽象类：接口中的方法都是抽象方法；
  • 接口可以重复定义：如果实现接口则需要实现多个接口中的所有冲虚方法；

2. 接口interface

  • 用来建立某种代码约定，使得其他开发者调用某个方法或者创建新的类时必须遵循接口所定义的代码约定。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    interface IPerson {
        name: string;
        age: number;
    }

    class Person implements IPerson{
        constructor(public config: IPerson) {
            
        }
    }

    var p1 = new Person({
        name: 'zhanggsan',
        age: 19
    });

  • interface接口用来做抽象封装

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    interface Animal {
      eat();
    }

    class Sheep implements Animal {
      eat() {
        console.log('i eat grass');
      }
    }

    class Tiger implements Animal {
      eat() {
        console.log('i eat meat');
      }
    }

3. 接口泛型

  • 定义接口规定属性类型，规定属性名称

    1
    2
    3
    interface TypeA{
      [属性名:属性类型]: 属性值
    }

3.5 泛型

1. 泛型概述

  • 类型参数化：在类中使用类型的时候可以向参数一样，类型由使用者在调用的时候指定；

2. 泛型使用场景

1
2
3
4
var works: Array<Person> = []; // 数组里面只能放入 Person 对象

works[0] = new Person('zhangsan');
works[1] = new Employee('lisi', '123');

3.6 注解

1. 注解概述

2. 注解使用

第四章 TypeScript配置

4.1 TypeScript配置

4.2 Webpage配置TS

4.3 Vue3配置TS

打赏
  • 版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！
  • © 2020-2022 xiaoliuxuesheng
  • PV: UV:

老板,来一杯Java

支付宝
微信