TS基础

作者: 我家有个王胖胖 | 来源:发表于2022-10-18 21:10 被阅读0次

    ts+vue3笔记

    一.TypeScript定义

    定义:TypeScript是JavaScript的超集.TypeScript 是 JS 的超集,TS 提供了 JS 的所有功能,并且额外的增加了:类型系统.
    Ts不能直接运行在浏览器上,需要先被编译为js再运行.

    TypeScript优势:
    JS 不会检查变量的类型是否发生变化,但是TS会.
    编译代码过程中,发现代码中的错误
    可以显示标记出代码中的意外行为,从而降低了发生错误的可能性

    示例:

    //js:
    //动态类型:类型随时可以改变
    let a = 123;
    a = "123";//✔
    
    //ts:
    //静态类型:类型一旦被定义不可以改变
    let b = 456;
    b = "456"; //Type '"123"' is not assignable to type number
    

    Ts的基础环境:
    1️⃣安装node
    2️⃣npm i typeScript -g (安装ts)
    由于tsc ***.ts 会生成一个 ***.js文件
    3️⃣ npm i -g ts-node 直接运行ts文件

    二.静态类型

    静态类型:就是你一旦定义了,将这个类型赋予某个变量,那么这个变量至始至终永远都是这个类型。ts使用静态类型,意味着使用静态类型的变量今后类型无法改变,类型的属性和方法也跟着确定了。

    1.常用基础类型

    可以将 TS 中的常用基础类型细分为两类:1 JS 已有类型 2 TS 新增类型
    原始类型:number/string/boolean/null/undefined/symbol
    对象类型:object(包括,数组、对象、函数等对象)

    (1)JS 已有类型
    1.原始类型
    原始类型:number/string/boolean/null/undefined/symbol
    特点:简单,这些类型,完全按照 JS 中类型的名称来书写

    let age: number = 18
    let myName: string = '老师'
    let isLoading: boolean = false
    
    // 等等...
    

    2.对象类型:对象类型包括对象类型、数组类型、函数类型、类类型的定义。

    • 对象类型
    function getObj(obj: object): object {
        console.log(obj)
        return obj
      }
    
      console.log({ name: 'father', nick: '爸爸' })
      console.log(new String('床前明月光'))// new 一个String对象
      console.log(String)
    
    • 数组类型(对象类型的一种)
      数组类型的两种写法:
      推荐使用 number[] 写法
    // 写法一:
    let numbers: number[] = [1, 3, 5]
    // 写法二:
    let strings: Array<string> = ['a', 'b', 'c']
    

    (2).TS新增类型
    联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any 等
    注意:
    原始类型在 TS 和 JS 中写法一致
    对象类型在 TS 中更加细化,每个具体的对象(比如,数组、对象、函数)都有自己的类型语法

    //类型注解 type annotation:我们告诉TS变量是什么类型。
    let age: number = 18
    

    说明:代码中的 : number 就是类型注解
    作用:为变量添加类型约束。比如,上述代码中,约定变量 age 的类型为 number 类型
    解释:约定了什么类型,就只能给变量赋值该类型的值,否则,就会报错
    错误演示:

    // 错误代码:
    // 错误原因:将 string 类型的值赋值给了 number 类型的变量,类型不一致。
    let age: number = '18'
    

    类型推断 type inference:TS会尝试去分析变量是什么类型。
    如果TS能自动分析变量的类型,我们就什么都不需要做了。
    如果TS不能自动分析变量的类型,我们就需要使用类型注解。


    类型推断.png
    function add(num1: number, num2: number) {
      return num1 + num2;
    }
    let num3 = add(1, 2);//num3推断为number
    -----------------------------------------------------------
    function add(num1: number, num2: number) {
      return num1 + num2 + "";
    }
    let num3 = add(1, 2);//num3推断为string
    --------------------------------------------------------
    //限制方法的返回值
    function add(num1: number, num2: number) :number{
      //return num1 + num2 + "";//提示语法错误,返回的值不符合要求
      return num1 + num2;
    }
    let num3 = add(1, 2);
    -------------------------------------------------------
    //无返回值的函数
    function print():void{
      console.log("123");
    }
    -------------------------------------------------------
    //函数无法执行完
    function errorEmiter():never{
      throw new Error();//throw error后,后面的代码无法继续执行
    }
    -----------------------------------------------------
    //解构时类型注解的写法
    function add({ first, second }: { first: number; second: number }): number {
      return first + second;
    }
    let num3 = add({ first: 1, second: 2 });
    

    类型别名:
    类型别名(自定义类型):为任意类型起别名
    使用场景:当同一类型(复杂)被多次使用时,可以通过类型别名,简化该类型的使用

    type CustomArray = (number | string)[]
    
    let arr1: CustomArray = [1, 'a', 3, 'b']
    let arr2: CustomArray = ['x', 'y', 6, 7]
    

    (3)数组和元组

    1.数组

    const arr: string[] = ["a", "b", "c"];
    const arr2: number[] = [1, 2, 3];
    const arr3: (string | number)[] = [1, "2", 3];
    
    const undefinedArr: undefined[] = [undefined];
    
    //类型别名
    type User = { name: string; age: number };
    const objectArr: { name: string; age: number }[] = [{ name: "张三", age: 18 }];
    const objectArr2: User[] = [{ name: "张三", age: 18 }];
    

    2元组:tuple:个数有限的数组,每一项的类型都是固定的形式,这种特殊的数组,我们称之为元组。()元组类型允许表示一个已知元素数量和类型的数组)

    const userInfoArr: [string, string, number] = ["Dell", "male", 18];
    const teacherList: [string, string, number][] = [
      ["Dell", "male", 18],
      ["john", "male", 19],
      ["lily", "female", 18],
    ];
    

    (4)接口interface:通用的类型 :可以用来约束一个函数,对象,以及类的结构和类型

    与别名(type)的区别:type可以代表string,number等,而interface只能用对象或者函数表示。
    ①直接传入对象

    const setPersonName = (person: { name: string }, name: string): void => {
      person.name = name;
    };
    
    const getPersonName = (person: { name: string }): void => {
      console.log("name:" + person.name);
    };
    
    const person = {
      name: "张三",
    };
    setPersonName(person, "李四");
    getPersonName(person);
    

    从跟上面的代码,我们发现,person: { name: string }是重复使用的,我们可以使用interface或者type(别名)来代替,通常情况下,可以使用interface的我们一般不使用type.
    ②使用interface

    interface Person {
      name: string;
      age?: 18;//当不确定属性是否一定需要时,可以这么处理
    }
    
    const setPersonName = (person: Person, name: string): void => {
      person.name = name;
    };
    
    const getPersonName = (person: Person): void => {
      console.log("name:" + person.name);
    };
    
    const person = {
      name: "张三",
    };
    setPersonName(person, "李四");
    getPersonName(person);
    
    
    参数不全.png

    还有一个问题,当字面量传参时,是强校验,不能包含传入参数限定以外的属性,但是间接传入对象时,当传入对象满足所需参数限定的属性即可.

    const setPersonName = (person: { name: string }, name: string): void => {
      person.name = name;
    };
    
    const getPersonName = (person: { name: string }): void => {
      console.log("name:" + person.name);
    };
    
    const person = {
      name: "张三",
    };
    setPersonName( {
      name: "张三",
      age:18
    }, "李四");
    getPersonName(person);
    
    直接字面量传参的方式,包含限定外的参数时.png

    而下面这种传参方式相较于直接传参,检验没有那么严格.

    const setPersonName = (person: { name: string }, name: string): void => {
      person.name = name;
    };
    
    const getPersonName = (person: { name: string }): void => {
      console.log("name:" + person.name);
    };
    
    const person = {
      name: "张三",
    
    };
    setPersonName(person, "李四");
    getPersonName(person);
    

    或者我们也可以用这种方式来解决

    interface Person {
      name: string;
      age?: number;
      [propsName: string]: any;//任意字符串类型的属性名
    }
    const setPersonName = (person: Person, name: string): void => {
      person.name = name;
    };
    
    const getPersonName = (person: Person): void => {
      console.log("name:" + person.name);
    };
    
    const person = {
      name: "张三",
      age: 18,
    };
    setPersonName(
      {
        name: "张三",
        age: 18,
        sex:"male"
      },
      "李四"
    );
    getPersonName(person);
    

    class 可以应用interface

    interface Person {
      name: string;
      age?: number;
      [propsName: string]: any;
      say(): string;
    }
    //类实现接口后,必须具备接口的属性
    class User implements Person {
      name = "张三";
      say(): string {
        return "say Hello";
      }
    }
    

    接口可以继承接口:除了继承之前的接口属性,还可以有自己的属性及方法

    interface Person {
      name: string;
      age?: number;
      [propsName: string]: any;
      say(): string;
    }
    
    interface Teacher extends Person {
      teach(): string;
    }
    const setPersonName = (person: Teacher, name: string): void => {
      person.name = name;
    };
    const getPersonName = (person: Teacher): void => {
      console.log("name:" + person.name);
    };
    const person = {
      name: "张三",
      age: 18,
      say() {
        return "say hello";
      },
      teach() {
        return "教学";
      },
    };
    setPersonName(person, "李四");
    getPersonName(person);
    
    接口的继承.png

    interface定义函数:

    interface sayHi {
      (word: string): string; //传一个string参数,返回一个string入参
    }
    const say: sayHi = (word: string) => {
      return word;
    };
    let sayContent = say("haha");
    

    类的继承:

    class Person {
      name = "dell";
      getName() {
        return this.name;
      }
    }
    
    class Teacher extends Person {
      getTeacherName() {
        return this.name;
      }
      //重写父类的方法
      getName() {
        return super.getName() + "lee";
      }
    }
    
    const teacher = new Teacher();
    
    console.log("Teacher:", teacher.getTeacherName());
    console.log("----------------------------");
    
    console.log("重写父类方法:", teacher.getName());
    //运行结果
    Teacher: dell
    ----------------------------
    重写父类方法: delllee
    

    super作用:子类重写父类方法后,可以通过super来重新调用父类的方法.

    类中的访问类型和构造器:
    访问类型:public protected private
    public:允许在类的内外调用
    protected:允许在类内和继承的子类中使用
    private:允许在类内调用

    class Customer {
      name: string;
      constructor(name: string) {
        this.name = name;
      }
    }
    
    let customer = new Customer("dell");
    console.log(customer.name);
    

    等价于

    class Customer {
      //传统写法
      // name: string;
      // constructor(name: string) {
      //   this.name = name;
      // }
      //简化写法
      constructor(public name: string) {}
    }
    
    let customer = new Customer("dell");
    console.log(customer.name);
    

    类继承时,父类有构造器,子类也有构造器时,子类的构造器中要手动的调用super()方法,来调用父类的构造函数.并且需要按照父类构造器的参数来传参.

    class Person {
      //传统写法
      // name: string;
      // constructor(name: string) {
      //   this.name = name;
      // }
      //简化写法
      constructor(public name: string) {}
    }
    
    class Teacher extends Person {
      constructor(public age: number) {
        super("dell");
      }
    }
    
    let person = new Person("dell");
    
    console.log(person.name);
    
    let teacher = new Teacher(18);
    
    console.log(teacher.age);//18
    console.log(teacher.name);//dell
    //子类重写父类的方法
    class Person {
      constructor(public name: string, public age: number) {}
      say() {
        console.log(`我的名字是${this.name},我的年龄是:${this.age}`);
      }
    }
    
    class Student extends Person {
      constructor(name: string, age: number, public school: string) {
        super(name, age);
      }
    
      //重写父类的方法
      say() {
        console.log(
          `我的名字是${this.name},我的年龄是:${this.age},我来自${this.school}`
        );
      }
    }
    let person = new Person("张三", 18);
    let hlbt = new Student("哈利波特", 18, "格兰芬多");
    hlbt.say();
    

    静态属性:getter和setter

    //类中的私有属性,为了安全不直接暴露给外部,但是可以对外提供get和set//方法,对其进行处理后,对外提供
    class People {
      constructor(private _name: string) {}
      get name() {
        return this._name + "lee";
      }
      set name(name: string) {
        this._name = name;
      }
    }
    
    const people = new People("blouse");
    console.log(people.name);
    people.name = "李小龙";
    console.log(people.name);
    

    类想要创建唯一的实例(单例模式),限制通过new的方式创建多个不同的实例,可以通过将构造方法私有化的方法.

    class Demo {
      private constructor() {}
    }
    class demo1 = new Demo("");
    
    类限制通过new的方式创建实例.png

    但是上面的Demo怎么去创建唯一实例呢

    class Demo {
      //static 静态的,将属性挂载在类上,而不是实例上,即实例话对象不可调用,只有类本身和其子类使用.
      private static instance: Demo;
      private constructor() {}
    
      //对外提供创建唯一实例的方法
      static getInstance() {
        //判断是否已经存在instance
        if (!this.instance) {
          this.instance = new Demo();
        }
        return this.instance;
      }
    }
    const demo1 = Demo.getInstance();
    const demo2 = Demo.getInstance();
    //这样,创建的两个实例是完全相等的
    console.log(demo1 === demo2);//true
    

    readonly:只能读不能改

    class Color {
      readonly name: string;
      constructor(name: string) {
        this.name = name;
      }
    }
    const red = new Color("red");
    
    console.log(red.name);//red
    red.name = "dark red";
    
    readonly只读.png

    类的多态:多态指的是父类型的引用指向了子类型的对象,不同类型的对象针对相同的方法,产生了不同的行为。

    (()=>{
    // 定义一个父类
    class Animal {
        // 定义一个属性
        name:string
        // 定义一个构造函数
        constructor(name:string){
            this.name = name
        }
        // 定义方法
        sayRunDistance(distance:number = 0){
            console.log(`我跑了${distance}米!!!!!!`)
        }
    }
    
    //定义一个子类1
    class Dog extends Animal {
        // 构造函数
        constructor (name:string) {
        // 调用父类的构造函数,实现子类中属性的初始化操作
            super(name)
        }
        // 实例方法,重写父类中的实例方法
        sayRun(distance:number = 5) {
            console.log(`我跑了${distance}米!!!!!!`)
        }
    }
    
    //定义一个子类2
    class Cat extends Animal {
        // 构造函数
        constructor (name:string) {
        // 调用父类的构造函数,实现子类中属性的初始化操作
            super(name)
        }
        // 实例方法,重写父类中的实例方法
        sayRun(distance:number = 10) {
            console.log(`我跑了${distance}米!`)
        }
    }
    // 实例化父类对象
    const Animal = new Animal ('大毛')
    Animal.sayRun();
    // 实例化子类对象1
    const Dog = new Dog('泰迪')
    Dog .sayRunDistance();
    // 实例化子类对象2
    const Cat = new Cat ('布偶猫')
    Cat .sayRunDistance();
    // 父类型和子类型的关系:父子关系,此时,父类类型创建子类的对象
    const Dog1 :Animal = new Dog('金毛');
    const Cat1 :Animal = new Cat('蓝短');
    Dog1.sayRun();
    Cat1.sayRun();
    })
    

    多态的作用:

    // 定义一个函数,该函数需要的参数是Animal类型的
    function showRun (ani:Animal){
        ani.sayRun()
    }
    // 此时将Animal的子类作为参数传进去
    showRun(Dog1)
    showRun(Cat1)
    

    抽象类:服务于子类(派生类),一般作为子类的基类来使用.

    1.关键字abstract
    2.抽象类不允许被实例化,抽象类的存在只为了向子类服务
    3.抽象类中包含抽象属性/方法,和普通属性/方法
    4.被抽象的属性/方法不允许拥有具体的内容
    5.子类如果不是抽象类,就必须将所有抽象父类的方法/属性具体化

    abstract class Person {
        name: string;
        constructor(name) {
         this.name = name;
        }
        abstract sayHi(); //抽象方法
    }
    
    //抽象类不允许被实例化
    let test = new Person('小明');
    
    //报错
    //Cannot create an instance of an abstract class.
    //抽象类中的抽象方法必须在子类中实现
    class Child extends Person {
      run() {
        console.log('learn to run...');
      }
    }
    
    let child = new Child();
    
    //这样写会报错
    //Non-abstract class 'Child' does not implement inherited abstract member 'sayHi' from class 'Person'.
    -------------------------------------------------------------------------------------
    //修改成下面这样可以正常编译通过
    class Child extends Person {
      run() {
        console.log(this.name + ' ' + 'learn to run...');
      }
    
      sayHi() {
        console.log('hello,everyone');
      }
    }
    
    let child = new Child('小明');
    child.sayHi();
    child.run();
    
    interface和abbstract的异同.png

    函数的重载:函数名相同,但是函数的参数级个数不相同.

    //函数重载声明
      function add(param1: string, param2: string): string;
      function add(param1: number, param2: number): string;
      //函数的重载
      function add(param1: string | number, param2: string | number) {
        if (typeof param1 === "string" && typeof param2 === "string") {
          return `${param1}${param2}`;
        } else if (typeof param1 === "number" && typeof param2 === "number") {
          return param1 + param2;
        }
      }
      add("东方", "不败");//东方不败
      add(10, 20);//30
      add("东方", 20);//报错
    
    函数重载.png

    构造函数也可以进行重载

    type people = {
      name: string;
      age: number;
      sex?: string;
    };
    const san: people = {
      name: "山姆",
      age: 18,
      sex: "男",
    };
    console.log("type类型:", typeof san); //object
    
    class Love {
      public name: string;
      public age: number;
      public sex: string;
    
      constructor(name_: string, age_: number);
      constructor(param: people);
      //由于构造函数本身不返回任何值,默认this且隐藏,所以重载和实现签名都不返回
      constructor(nameOrParam: any, age_: number = 0) {
        if (typeof nameOrParam === "object") {
          this.name = nameOrParam.name;
          this.age = nameOrParam.age;
          this.sex = nameOrParam.sex;
        } else {
          this.name = nameOrParam;
          this.age = age_;
          this.sex = "未知";
        }
      }
    
      public show(): string {
        let str = `这是一位${this.age}的${this.sex},名叫${this.name}`;
        console.log(str);
        return str;
      }
    }
    
    const a = new Love("小丽", 18);
    const b = new Love(san);
    a.show(); //这是一位18的未知,名叫小丽
    b.show(); //这是一位18的男,名叫山姆
    

    相关文章

      网友评论

          本文标题:TS基础

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