TypeScript快速入门

TypeScript快速入门

提示：本文根据B站尚硅谷TypeScript教程（李立超老师TS新课）整理
B站视频指路：尚硅谷TypeScript教程（李立超老师TS新课）

前言

1. TypeScript是JavaScript的超集。
2. 它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。
3. TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。
4. TS完全兼容JS，换言之，任何的JS代码都可以直接当成TS使用。
5. 相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS。

提示：以下是本篇文章正文内容，下面案例可供参考

一、TypeScript 开发环境搭建

1. TypeScript使用前提是需要安装Node.js(请确保已安装完成)

2. 使用npm全局安装typescript

   npm i -g typescript

3. 创建一个ts文件，使用tsc对ts文件进行编译
4. 进入命令行
5. 进入ts文件所在目录
6. 执行命令：tsc xxx.ts

二、基本类型

2.1 类型声明

• 类型声明是TS非常重要的一个特点
• 通过类型声明可以指定TS中变量（参数、形参）的类型
• 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错
• 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值

• 语法：

  let 变量: 类型;
  
  let 变量: 类型 = 值;
  
  function fn(参数: 类型, 参数: 类型): 类型{
    ...
  }

  2.2 自动类型判断

• TS拥有自动的类型判断机制
• 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型

• 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明

  2.3 类型

  类型	例子	描述
  number	1, -33, 2.5	任意数字
  string	'hi', "hi", hi	任意字符串
  boolean	true、false	布尔值true或false
  字面量	其本身	限制变量的值就是该字面量的值
  any	*	任意类型
  unknown	*	类型安全的any
  void	空值（undefined）	没有值（或undefined）
  never	没有值	不能是任何值
  object	{name:'孙悟空'}	任意的JS对象
  array	[1,2,3]	任意JS数组
  tuple	[4,5]	元祖，TS新增类型，固定长度数组
  enum	enum{A, B}	枚举，TS中新增类型

  number

  let decimal: number = 6;
  let hex: number = 0xf00d;
  let binary: number = 0b1010;
  let octal: number = 0o744;
  let big: bigint = 100n;

  boolean

  let isDone: boolean = false;

  string

  let color: string = "blue";
  color = 'red';
  
  let fullName: string = `Bob Bobbington`;
  let age: number = 37;
  let sentence: string = `Hello, my name is ${fullName}.
  
  I'll be ${age + 1} years old next month.`;

  字面量

• 也可以使用字面量去指定变量的类型，通过字面量可以确定变量的取值范围

• 可以使用 | 来连接多个类型（联合类型）

  let color: 'red' | 'blue' | 'black';
  let num: 1 | 2 | 3 | 4 | 5;

  any

• any 表示的是任意类型，一个变量设置类型为any后相当于对该变量关闭了TS的类型检测

• 使用TS时，不建议使用any类型

  let d: any = 4;
  d = 'hello';
  d = true;

• 声明变量如果不指定类型，则TS解析器会自动判断变量的类型为any （隐式的any）

  let d;
  d = 10;
  d = 'hello';
  d = true;

  unknown

• unknown 表示未知类型的值
• unknown 实际上就是一个类型安全的any

• unknown 类型的变量，不能直接赋值给其他变量

  let notSure: unknown = 4;
  notSure = 'hello';

  void

• void 用来表示空，以函数为例，就表示没有返回值的函数

  let unusable: void = undefined;
  function fn(): void{
  }

  never

• never 表示永远不会返回结果

  function error(message: string): never {
  throw new Error(message);
  }

  object

• object 表示一个js对象

  // {} 用来指定对象中可以包含哪些属性
  // 语法：{属性名:属性值,属性名:属性值}
  // 在属性名后边加上?，表示属性是可选的
  let b: {name: string, age?: number};
  b = {name: '孙悟空', age: 18};
  
  // [propName: string]: any 表示任意类型的属性
  let c: {name: string, [propName: string]: any};
  c = {name: '猪八戒', age: 18, gender: '男'};
  
  let obj: object = {};

  array

/*
*   数组的类型声明：
*       类型[]
*       Array<类型>
* */
// string[] 表示字符串数组
let e: string[];
e = ['a', 'b', 'c'];

// number[] 表示数值数值
let f: number[];

let g: Array<number>;
g = [1, 2, 3];

let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];

tuple

• 元组，元组就是固定长度的数组

/*
*   元组，元组就是固定长度的数组
*       语法：[类型, 类型, 类型]
* */
let x: [string, number];
x = ["hello", 10]; 

enum 枚举

enum Color {
  Red,
  Green,
  Blue,
}
let c: Color = Color.Green;

enum Color {
  Red = 1,
  Green,
  Blue,
}
let c: Color = Color.Green;

enum Color {
  Red = 1,
  Green = 2,
  Blue = 4,
}
let c: Color = Color.Green;

// &表示同时
let j: { name: string } & { age: number };
j = {name: '孙悟空', age: 18};

类型断言

• 有些情况下，变量的类型对于我们来说是很明确，但是TS编译器却并不清楚，此时，可以通过类型断言来告诉编译器变量的类型，断言有两种形式：

/*
 - 语法：
 -   变量 as 类型
 -   <类型>变量
 - */
s = e as string;
s = <string>e;

• 第一种

let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length;

• 第二种

  let someValue: unknown = "this is a string";
  let strLength: number = (<string>someValue).length;

类型的别名

type myType = 1 | 2 | 3 | 4 | 5;
let k: myType;
let l: myType;
let m: myType;

k = 2;

三、面向对象

3.1 类（class）

举例来说：可以通过Person类来创建人的对象，通过Dog类创建狗的对象，通过Car类来创建汽车的对象，不同的类可以用来创建不同的对象。

定义类：

class 类名 {
    属性名: 类型;
    
    constructor(参数: 类型){
        this.属性名 = 参数;
    }
    
    方法名(){
        ....
    }
}

示例：

定义类

class Person{
    name: string;
    age: number;

    constructor(name: string, age: number){
        this.name = name;
        this.age = age;
    }

    sayHello(){
        console.log(`大家好，我是${this.name}`);
    }
}

使用类

const p = new Person('孙悟空', 18);
p.sayHello();

3.2 面向对象特点

3.2.1 关键字

1. 封装
2. 对象实质上就是属性和方法的容器，它的主要作用就是存储属性和方法，这就是所谓的封装
3. 默认情况下，对象的属性是可以任意的修改的，为了确保数据的安全性，在TS中可以对属性的权限进行设置
4. 只读属性（readonly）：
   如果在声明属性时添加一个readonly，则属性便成了只读属性无法修改
5. TS中属性具有三种修饰符：
   1.public（默认值），可以在类、子类和对象中修改
   2.protected ，可以在类、子类中修改
   3.private ，可以在类中修改
6. 示例：

7. public

   class Person{
    public name: string; // 写或什么都不写都是public
    public age: number;
   
    constructor(name: string, age: number){
        this.name = name; // 可以在类中修改
        this.age = age;
    }
   
    sayHello(){
        console.log(`大家好，我是${this.name}`);
    }
   }
   
   class Employee extends Person{
    constructor(name: string, age: number){
        super(name, age);
        this.name = name; //子类中可以修改
    }
   }
   
   const p = new Person('孙悟空', 18);
   p.name = '猪八戒';// 可以通过对象修改

8. protected

   class Person{
    protected name: string;
    protected age: number;
   
    constructor(name: string, age: number){
        this.name = name; // 可以修改
        this.age = age;
    }
   
    sayHello(){
        console.log(`大家好，我是${this.name}`);
    }
   }
   
   class Employee extends Person{
   
    constructor(name: string, age: number){
        super(name, age);
        this.name = name; //子类中可以修改
    }
   }
   
   const p = new Person('孙悟空', 18);
   p.name = '猪八戒';// 不能修改

9. private

   class Person{
    private name: string;
    private age: number;
   
    constructor(name: string, age: number){
        this.name = name; // 可以修改
        this.age = age;
    }
   
    sayHello(){
        console.log(`大家好，我是${this.name}`);
    }
   }
   
   class Employee extends Person{
    constructor(name: string, age: number){
        super(name, age);
        this.name = name; //子类中不能修改
    }
   }
   
   const p = new Person('孙悟空', 18);
   p.name = '猪八戒';// 不能修改

   属性存取器

10. 对于一些不希望被任意修改的属性，可以将其设置为private
11. 直接将其设置为private将导致无法再通过对象修改其中的属性
12. 我们可以在类中定义一组读取、设置属性的方法，这种对属性读取或设置的属性被称为属性的存取器
13. 读取属性的方法叫做setter方法，设置属性的方法叫做getter方法

14. 示例：

    class Person{
     private _name: string;
    
     constructor(name: string){
         this._name = name;
     }
    
     get name(){
         return this._name;
     }
    
     set name(name: string){
         this._name = name;
     }
    
    }
    
    const p1 = new Person('孙悟空');
    console.log(p1.name); // 通过getter读取name属性
    p1.name = '猪八戒'; // 通过setter修改name属性

    静态属性

15. 静态属性（方法），也称为类属性。使用静态属性无需创建实例，通过类即可直接使用
16. 静态属性（方法）使用static开头

17. 示例：

    class Tools{
     static PI = 3.1415926;
     
     static sum(num1: number, num2: number){
         return num1 + num2
     }
    }
    
    console.log(Tools.PI);
    console.log(Tools.sum(123, 456));

    this

    在类中，使用this表示当前对象

3.2.2 构造函数

• constructor 被称为构造函数

• 构造函数会在对象创建时调用

  class Dog{
    name: string;
    age: number;
  
    // constructor 被称为构造函数
    //  构造函数会在对象创建时调用
    constructor(name: string, age: number) {
        // 在实例方法中，this就表示当前当前的实例
        // 在构造函数中当前对象就是当前新建的那个对象
        // 可以通过this向新建的对象中添加属性
        this.name = name;
        this.age = age;
    }
  
    bark(){
        // alert('汪汪汪！');
        // 在方法中可以通过this来表示当前调用方法的对象
        console.log(this.name);
    }
  }
  
  const dog = new Dog('小黑', 4);
  const dog2 = new Dog('小白', 2);
  
  // console.log(dog);
  // console.log(dog2);
  
  dog2.bark();

  3.2.3 继承extends

  (function (){
  
    // 定义一个Animal类
    class Animal{
        name: string;
        age: number;
  
        constructor(name: string, age: number) {
            this.name = name;
            this.age = age;
        }
  
        sayHello(){
            console.log('动物在叫~');
        }
    }
  
    /*
    * Dog extends Animal
    *   - 此时，Animal被称为父类，Dog被称为子类
    *   - 使用继承后，子类将会拥有父类所有的方法和属性
    *   - 通过继承可以将多个类中共有的代码写在一个父类中，
    *       这样只需要写一次即可让所有的子类都同时拥有父类中的属性和方法
    *       如果希望在子类中添加一些父类中没有的属性或方法直接加就行
    *   - 如果在子类中添加了和父类相同的方法，则子类方法会覆盖掉父类的方法
    *       这种子类覆盖掉父类方法的形式，我们称为方法重写
    *
    * */
    // 定义一个表示狗的类
    // 使Dog类继承Animal类
    class Dog extends Animal{
  
        run(){
            console.log(`${this.name}在跑~~~`);
        }
  
        sayHello() {
            console.log('汪汪汪汪！');
        }
  
    }
  
    // 定义一个表示猫的类
    // 使Cat类继承Animal类
    class Cat extends Animal{
        sayHello() {
            console.log('喵喵喵喵！');
        }
    }
  
    const dog = new Dog('旺财', 5);
    const cat = new Cat('咪咪', 3);
    console.log(dog);
    dog.sayHello();
    dog.run();
    console.log(cat);
    cat.sayHello();
  
  
  })();

  3.2.4 super关键字

  (function () {
    class Animal {
        name: string;
  
        constructor(name: string) {
            this.name = name;
        }
  
        sayHello() {
            console.log('动物在叫~');
        }
    }
  
    class Dog extends Animal{
  
        age: number;
  
        constructor(name: string, age: number) {
            // 如果在子类中写了构造函数，在子类构造函数中必须对父类的构造函数进行调用
            super(name); // 调用父类的构造函数
            this.age = age;
        }
  
        sayHello() {
            // 在类的方法中 super就表示当前类的父类
            //super.sayHello();
  
            console.log('汪汪汪汪！');
        }
  
    }
  
    const dog = new Dog('旺财', 3);
    dog.sayHello();
  })();

  3.2.5 抽象类

• 以abstract开头的类是抽象类

  (function () {
  
    /*
    *   以abstract开头的类是抽象类，
    *       抽象类和其他类区别不大，只是不能用来创建对象
    *       抽象类就是专门用来被继承的类
    *
    *       抽象类中可以添加抽象方法
    * */
    abstract class Animal {
        name: string;
  
        constructor(name: string) {
            this.name = name;
        }
  
        // 定义一个抽象方法
        // 抽象方法使用 abstract开头，没有方法体
        // 抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写
        abstract sayHello():void;
    }
  
    class Dog extends Animal{
  
        sayHello() {
            console.log('汪汪汪汪！');
        }
  
    }
  
    class Cat extends Animal{
        sayHello() {
            console.log('喵喵喵喵！');
        }
  
    }
  
    const dog = new Dog('旺财');
    dog.sayHello();
  
  })();

  3.2.6 属性的封装

  (function (){
    // 定义一个表示人的类
    class Person{
        // TS可以在属性前添加属性的修饰符
        /*
        *   public 修饰的属性可以在任意位置访问（修改） 默认值
        *   private 私有属性，私有属性只能在类内部进行访问（修改）
        *       - 通过在类中添加方法使得私有属性可以被外部访问
        *   protected 受包含的属性，只能在当前类和当前类的子类中访问（修改）
        *
        * */
        private _name: string;
        private _age: number;
  
        constructor(name: string, age: number) {
            this._name = name;
            this._age = age;
        }
  
        /*
        *   getter方法用来读取属性
        *   setter方法用来设置属性
        *       - 它们被称为属性的存取器
        * */
  
        // 定义方法，用来获取name属性
        // getName(){
        //     return this._name;
        // }
        //
        // // 定义方法，用来设置name属性
        // setName(value: string){
        //     this._name = value;
        // }
        //
        // getAge(){
        //     return this._age;
        // }
        //
        // setAge(value: number){
        //     // 判断年龄是否合法
        //     if(value >= 0){
        //         this._age = value;
        //     }
        // }
  
        // TS中设置getter方法的方式
        get name(){
            // console.log('get name()执行了！！');
            return this._name;
        }
  
        set name(value){
            this._name = value;
        }
  
        get age(){
            return this._age;
        }
  
        set age(value){
            if(value >= 0){
                this._age = value
            }
        }
    }
  
    const per = new Person('孙悟空', 18);
  
    /*
    * 现在属性是在对象中设置的，属性可以任意的被修改,
    *   属性可以任意被修改将会导致对象中的数据变得非常不安全
    * */
  
    // per.setName('猪八戒');
    // per.setAge(-33);
  
    per.name = '猪八戒';
    per.age = -33;
  
    // console.log(per);
  
  
    class A{
        protected num: number;
  
        constructor(num: number) {
            this.num = num;
        }
    }
  
    class B extends A{
  
        test(){
            console.log(this.num);
        }
  
    }
  
    const b = new B(123);
    // b.num = 33;
  
  
   /* class C{
  
        name: string;
        age: number
  
        // 可以直接将属性定义在构造函数中
        constructor(name: string, age: number) {
            this.name = name;
             this.age = age;
        }
  
    }*/
  
    class C{
  
        // 可以直接将属性定义在构造函数中
        constructor(public name: string, public age: number) {
        }
  
    }
  
    const c = new C('xxx', 111);
  
    console.log(c);
  
  })();

  3.3 接口（Interface）

  接口的作用类似于抽象类，不同点在于接口中的所有方法和属性都是没有实值的，换句话说接口中的所有方法都是抽象方法。接口主要负责定义一个类的结构，接口可以去限制一个对象的接口，对象只有包含接口中定义的所有属性和方法时才能匹配接口。同时，可以让一个类去实现接口，实现接口时类中要保护接口中的所有属性。

  示例（检查对象类型）：

  interface Person{
    name: string;
    sayHello():void;
  }
  
  function fn(per: Person){
    per.sayHello();
  }
  
  fn({name:'孙悟空', sayHello() {console.log(`Hello, 我是 ${this.name}`)}});

  示例（实现）

  interface Person{
    name: string;
    sayHello():void;
  }
  
  class Student implements Person{
    constructor(public name: string) {
    }
  
    sayHello() {
        console.log('大家好，我是'+this.name);
    }
  }

  例子：

(function () {

    // 描述一个对象的类型
    type myType = {
        name: string,
        age: number
    };

    /*
    *   接口用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法
    *       同时接口也可以当成类型声明去使用
    * */
    interface myInterface {
        name: string;
        age: number;
    }

    interface myInterface {
        gender: string;
    }

    // const obj: myInterface = {
    //     name: 'sss',
    //     age: 111,
    //     gender: '男'
    // };

    /*
    * 接口可以在定义类的时候去限制类的结构，
    *   接口中的所有的属性都不能有实际的值
    *   接口只定义对象的结构，而不考虑实际值
    *       在接口中所有的方法都是抽象方法
    *
    * */
    interface myInter{
        name: string;

        sayHello():void;
    }

    /*
    * 定义类时，可以使类去实现一个接口,
    *   实现接口就是使类满足接口的要求
    * */
    class MyClass implements myInter{
        name: string;

        constructor(name: string) {
            this.name = name;
        }

        sayHello(){
            console.log('大家好~~');
        }

    }

})();

3.4 泛型（Generic）

定义一个函数或类时，有些情况下无法确定其中要使用的具体类型（返回值、参数、属性的类型不能确定），此时泛型便能够发挥作用。

举个例子：

该例中，test函数有一个参数类型不确定，但是能确定的时其返回值的类型和参数的类型是相同的，由于类型不确定所以参数和返回值均使用了any，但是很明显这样做是不合适的，首先使用any会关闭TS的类型检查，其次这样设置也不能体现出参数和返回值是相同的类型

function test(arg: any): any{
    return arg;
}

使用泛型：这里的<T>就是泛型，T是我们给这个类型起的名字（不一定非叫T），设置泛型后即可在函数中使用T来表示该类型。所以泛型其实很好理解，就表示某个类型。

function test<T>(arg: T): T{
    return arg;
}

那么如何使用上边的函数呢？

1. 方式一（直接使用）：

   使用时可以直接传递参数使用，类型会由TS自动推断出来，但有时编译器无法自动推断时还需要使用下面的方式

   test(10)

2. 方式二（指定类型）：

   也可以在函数后手动指定泛型

   test<number>(10)

   可以同时指定多个泛型，泛型间使用逗号隔开：

   使用泛型时，完全可以将泛型当成是一个普通的类去使用

   function test<T, K>(a: T, b: K): K{
    return b;
   }
   
   test<number, string>(10, "hello");

   除此之外，也可以对泛型的范围进行约束

   使用T extends MyInter表示泛型T必须是MyInter的子类，不一定非要使用接口类和抽象类同样适用。

   interface MyInter{
    length: number;
   }
   
   function test<T extends MyInter>(arg: T): number{
    return arg.length;
   }

   例子：

/*
function fn(a: any): any{
    return a;
}*/

/*
*   在定义函数或是类时，如果遇到类型不明确就可以使用泛型
*
* */

function fn<T>(a: T): T{
    return a;
}

// 可以直接调用具有泛型的函数
let result = fn(10); // 不指定泛型，TS可以自动对类型进行推断
let result2 = fn<string>('hello'); // 指定泛型

// 泛型可以同时指定多个
function fn2<T, K>(a: T, b: K):T{
    console.log(b);
    return a;
}
fn2<number, string>(123, 'hello');

interface Inter{
    length: number;
}

// T extends Inter 表示泛型T必须时Inter实现类（子类）
function fn3<T extends Inter>(a: T): number{
    return a.length;
}

class MyClass<T>{
    name: T;
    constructor(name: T) {
        this.name = name;
    }
}

const mc = new MyClass<string>('孙悟空');

总结

以上就是ts的一些基础使用方法，个人感觉ts主要就是限定类型用，从项目开始可以规避一些bug，和后台方法比较像，就是写接口限定类型，然后最后给大家推荐一个vscode设置中文错误提示，需要打开设置页面，搜索“typescript local”，然后设置中文就行了，大家如果感觉还可以的话，麻烦点个赞呀，谢谢~