TypeScript学习笔记

目录

TypeScript简介

第一章：基本类型

1.1 类型声明 

1.2 自动类型判断

1.3 案例 

1.4 类型

第二章：面向对象

2.1 类（class）

2.2 面向对象的特点

2.3 接口（Interface）

2.4 泛型（Generic）

---

TypeScript简介

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。

第一章：基本类型

1.1 类型声明 

• 类型声明是TS非常重要的一个特点

• 通过类型声明可以指定TS中变量（参数、形参）的类型

• 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错

• 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值

•  语法：  

let 变量: 类型;

let 变量: 类型 = 值;

function fn(参数: 类型, 参数: 类型): 类型{
    ...
}

1.2 自动类型判断

• TS拥有自动的类型判断机制

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

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

1.3 案例 

 下面是个案例，从下面这段代码可以得出下面几点结论：

1. 如果给一个变量设置的类型，在使用的过程中只能使用这个类型，如下面的a变量，指定类型为number，赋值为'hello'，会报错
2. 下面的c变量，声明完直接赋值
3. d变量的声明和赋值同时进行，TS可以自动对变量进行类型检测，后面修改成其它类型会报错
4. JS中的函数是不考虑参数的类型和个数的，但是TS可以指定函数的参数的类型、参数的个数以及参数的返回值，如下面的sum函数，调用它的第一个返回值res1会报错，因为第二个参数是字符串；第二个返回值res2也会报错，因为参数有三个；第三个返回值没有问题

// 声明一个变量a，同时指定它的类型为nunber
let a: number

// a的值设置为了number，在以后使用过程中a的值只能是数字
a = 10
a = 99
// a = 'hello' // 此代码会报错，因为变量a的类型是number，不能赋值字符串

let b: string
b = 'hello'
// b = 123

// 声明完变量直接赋值
// let c: boolean = false

// 如果变量的声明和赋值是同时进行的，TS可以自动对变量进行类型检测
let d = false
d = true
// d = 123

// JS中的函数是不考虑参数的类型和个数的
// function sum(a, b){
//   return a + b
// }

// console.log(sum(123, 456)) // 579
// console.log(sum(123, '456')) // "123456"

function sum(a: number, b: number): number {
  return a + b
}

let res1 = sum(123, "456")
let res2 = sum(123, 456, 789)
let res3 = sum(123, 456)

1.4 类型

类型	例子	描述
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中新增类型

代码案例1：从下面这段代码得出下面几点结论

1. 用字面量进行类型声明，则这个变量只能是指定的那个值或那个类型，可以使用“ | ”来连接多个类型（联合类型）
2. any 表示的是任意类型，一个变量设置类型为any后相当于对该变量关闭了TS的类型检测，但是最好尽量不要使用any，如果把一个any变量复制给有指定类型的变量，会报错
3. unknown 表示未知类型的值，实际上就是一个类型安全的any，不能直接赋值给其它变量
4. 类型断言，语法: 变量 as 类型    或    <类型>变量，表示将这个变量当成指定的类型
5. void 用来表示空,以函数为例,就表示没有返回值的函数，也可以是返回undefined，可以省略
6. never  表示永远不会返回结果

// 可以直接使用字面量进行类型声明
var a: 10
a = 10
// a = 11

// 也可以使用 | 来连接多个类型（联合类型）
let b: 'male' | 'female'
b = 'male'
b = 'female'

let c: boolean | string
c = true
c = 'abc'

// any 表示的是任意类型，一个变量设置类型为any后相当于对该变量关闭了TS的类型检测
// 使用TS时，不建议使用any类型
// let d: any

// 声明变量如果不指定类型，则TS解析器会自动判断变量的类型为any（隐式的any）
let d
d = 1
d = 'abc'
d = true

// unknown 表示未知类型的值
let e: unknown
e = 1
e = 'abc'
e = true

let f: string

// d的类型是any，它可以赋值给任意变量
f = d

e = 'string'

// unknown 实际上就是一个类型安全的any
// unknown类型的变量,不能直接赋值给其它变量
if(typeof e === 'string'){
  f = e
}

// 类型断言
// 语法: 变量 as 类型    或    <类型>变量
f = e as string
f = e

// void 用来表示空,以函数为例,就表示没有返回值的函数
function fn(): void{
}

// never  表示永远不会返回结果
function fn1(): never{
  throw new Error('报错了!')
}

代码案例2：从下面这段代码得出下面几点结论

1. 要指定一个对象，并不是要判断是不是对象，而是要指定对象中可以包含哪些属性，属性的类型是什么，如下面的b。如果有不确定对象中是否包含这个属性，可以加上“ ? ”，并且，如果之后可能有其他的属性，可以使用“[propName: string]: any”，表示任意类型的属性
2. 设置函数结构的类型声明: 语法:(形参:类型, 形参:类型......) => 返回值类型，指定了参数的类型以及返回值的类型
3. 数组的类型声明  类型[]  或  Array<类型>
4. 元组, 元组就是固定长度的数组，语法: [类型, 类型, 类型......]
5. enum枚举，在里面添加一些固定的值，可以像下面的m那么使用
6. & 表示同名，同时满足前后两个条件
7. 类型的别名，如果有自己指定的类型，可以给它添加名字，使用会更加简便

// Object 表示一个js对象
let a: Object
a = {}
a = function() {}

// {} 用来指定对象中可以包含哪些属性
// 语法: {属性名:属性值,属性名:属性值}
// 在属性名后面加上?,表示属性时可选的
let b: {name: string, age?: number}
b = {name: 'abc', age: 18}

// [propName: string]: any 表示任意任意类型的属性
let c: {name: string, [propName: string]: any}
c = {name: 'abc', age: 18, gender: 'male'}

// 设置函数结构的类型声明: 语法:(形参:类型, 形参:类型......) => 返回值类型
let d: (a: number, b: number) => number
d = function(param1: number, param2: number): number{
  return 1
}

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

let f: Array
f = ['d', 'e', 'f']

// 元组, 元组就是固定长度的数组
//   语法: [类型, 类型, 类型......]
let g: [string, number]
g = ['abc', 123]

// enum枚举
enum Gender{
  Male,
  Female
}

let h: {name: string, gender: Gender}
h = {name: 'abc', gender: Gender.Male}

// & 表示同名
let m: {name: string} & {age: number}
m = {name: 'abc', age: 18}

// 类型的别名
type myType = 1 | 2 | 3 | 4 | 5
let n: myType
n = 1

第二章：面向对象

面向对象是程序中一个非常重要的思想，它被很多人理解成了一个比较难，比较深奥的问题，其实不然。面向对象很简单，简而言之就是程序之中所有的操作都需要通过对象来完成。

• 举例来说：

  • 操作浏览器要使用window对象

  • 操作网页要使用document对象

  • 操作控制台要使用console对象

一切操作都要通过对象，也就是所谓的面向对象，那么对象到底是什么呢？这就要先说到程序是什么，计算机程序的本质就是对现实事物的抽象，抽象的反义词是具体，比如：照片是对一个具体的人的抽象，汽车模型是对具体汽车的抽象等等。程序也是对事物的抽象，在程序中我们可以表示一个人、一条狗、一把枪、一颗子弹等等所有的事物。一个事物到了程序中就变成了一个对象。

在程序中所有的对象都被分成了两个部分数据和功能，以人为例，人的姓名、性别、年龄、身高、体重等属于数据，人可以说话、走路、吃饭、睡觉这些属于人的功能。数据在对象中被成为属性，而功能就被称为方法。所以简而言之，在程序中一切皆是对象。

2.1 类（class）

要想面向对象，操作对象，首先便要拥有对象，那么下一个问题就是如何创建对象。要创建对象，必须要先定义类，所谓的类可以理解为对象的模型，程序中可以根据类创建指定类型的对象，举例来说：可以通过Person类来创建人的对象，通过Dog类创建狗的对象，通过Car类来创建汽车的对象，不同的类可以用来创建不同的对象。

• 定义类：

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

}

• 示例1

从下面这段代码可以得出下面几点结论：

1.  static表示当前类身上的属性或方法，通过“类.属性  或  类.方法”来调用
2. readonly表示只能读，不能修改，与static连用的时候放在static后面
3. 在类里面函数的声明直接使用  函数名(){}  的方式定义

class Person{
 name: string = '张三'
  static readonly age: number = 18

  static sayHello(){
    console.log('hello');
  }

  sayHi(){
    console.log('hi');
  }
}

const per = new Person()
console.log(per);
console.log(Person.age);

per.name = '李四'
console.log(per);

Person.sayHello()
per.sayHi()

• 示例2

 从下面这段代码可以得出下面几点结论：

1. constructor 被称为构造函数，构造函数会在对象创建时调用
2. 在实例方法中，this就表示当前的实例，在构造函数中当前对象就是当前新建的那个对象，可以通过this向新建的对象中添加属性
3. 在方法中可以通过this来表示当前调用方法的对象

class Dog{
  name: string
  age: number

  // constructor 被称为构造函数
  // 构造函数会在对象创建时调用
  constructor(name: string, age: number){
    // 在实例方法中，this就表示当前的实例
    // 在构造函数中当前对象就是当前新建的那个对象
    // 可以通过this向新建的对象中添加属性
    this.name = name
    this.age = age
  }

  bark(){
    // 在方法中可以通过this来表示当前调用方法的对象
    console.log(this);
  }
}

const dog = new Dog('旺财', 3)
console.log(dog);

2.2 面向对象的特点

1. 封装

• 对象实质上就是属性和方法的容器，它的主要作用就是存储属性和方法，这就是所谓的封装

• 默认情况下，对象的属性是可以任意的修改的，为了确保数据的安全性，在TS中可以对属性的权限进行设置

• 只读属性（readonly）：

  • 如果在声明属性时添加一个readonly，则属性便成了只读属性无法修改

• TS中属性具有三种修饰符：

  • public（默认值），可以在类、子类和对象中修改

  • protected ，可以在类、子类中修改

  • private ，可以在类中修改

属性存取器

• 对于一些不希望被任意修改的属性，可以将其设置为private

• 直接将其设置为private将导致无法再通过对象修改其中的属性

• 我们可以在类中定义一组读取、设置属性的方法，这种对属性读取或设置的属性被称为属性的存取器

• 读取属性的方法叫做setter方法，设置属性的方法叫做getter方法

 

(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
    }

    setName(value: string){
      this._name = value
    }

    getAge(){
      return this._age
    }

    setAge(value: number){
      // 判断年龄是否合法
      if(value > 0){
        this._age = value
      }
    }

    // TS中设置getter和setter方法的方式
    get name(){
      return this._name
    }

    set name(value: string){
      this._name = value
    }

    get age(){
      return this._age
    }

    set age(value: number){
      this._age = value
    }
  }

  const per = new Person('张三', 18)
  console.log(per.getName());
  per.setName('李四')
  per.setAge(10)
  console.log(per);
  
  
})()

2.继承  

• 继承时面向对象中的又一个特性

• 通过继承可以将其他类中的属性和方法引入到当前类中

• 通过继承可以在不修改类的情况下完成对类的扩展

• 发生继承时，如果子类中的方法会替换掉父类中的同名方法，这就称为方法的重写

• 在子类中可以使用super来完成对父类的引用

1. 通过继承可以将多个类中共有的代码写在一个父 类中，这样只需要写一次即可让所有的子类都同时拥有父类中的属性，如果希望在子类中添加一些父类中没有的属性或方法，直接加就可以
2. 如果子类中添加了和父类相同的方法，则子类方法会覆盖掉父类的
3. super表示当前类的父类
4. 如果在子类中写了构造器，在子类构造器中必须对 父类的构造器进行调用，否则会报错 

(() => {
  class Animal{
    name: string
    age: number

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

    sayHello(){
      console.log('动物叫~~~');
    }
  }

  // 通过继承可以将多个类中共有的代码写在一个父类中
  //   这样只需要写一次即可让所有的子类都同时拥有父类中的属性
  //   如果希望在子类中添加一些父类中没有的属性或方法，直接加就可以
  // 如果子类中添加了和父类相同的方法，则子类方法会覆盖掉父类的
  class Dog extends Animal{
    run(){
      console.log('跑步~~');
    }

    sayHello(){
      // super表示当前类的父类
      super.sayHello()
      console.log('汪汪汪');
    }
  }

  class Cat extends Animal{

    // 如果在子类中写了构造函数，在子类构造器中必须对父类的构造器进行调用
    constructor(name: string, age: number){
      super(name, age)
    }

    sayHello(){
      console.log('喵喵喵');
    }
  }

  const dog = new Dog('旺财', 5)
  console.log(dog);
  dog.sayHello()
  
  
  const cat = new Cat('喵喵', 2)
  console.log(cat);
  cat.sayHello()
})()

 

3. 抽象类（abstract class）

1. 以abstract开头的类是抽象类，抽象类和其他类区别不大，只是不能用来创建对象，抽象类就是专门用来被继承的类

2. 抽象类中可以添加抽象方法，抽象方法使用 abstract 开头，没有方法体，抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写，否则会报错

3. 接口用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法，同时接口也可以当成类型声明去使用，接口中的所有属性都不能有实际的值，接口只定义对象的结构，而不考虑实际值，在接口中所有的方法都是抽象方法

4. 定义类时，可以使类去实现一个接口，实现接口就是使类满足接口的要求

(function() {
  /**
   * 以abstract开头的类是抽象类
   *   抽象类和其他类区别不大，只是不能用来创建对象
   *   抽象类就是专门用来被继承的类
   * 抽象类中可以添加抽象方法
   */
  abstract class Animal{
    name: string
    age: number

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

    /**
     * 定义一个抽象方法
     * 抽象方法使用 abstract 开头，没有方法体
     * 抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写
     */
    abstract sayHello()
  }

  class Dog extends Animal{
    sayHello(): void {
      console.log('汪汪汪');
    }
  }

  class Cat extends Animal{
    
  }


})()

 

2.3 接口（Interface）

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

结论：

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

  /**
   * 接口用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法
   *    同时接口也可以当成类型声明去使用
   *    接口中的所有属性都不能有实际的值
   *    接口只定义对象的结构，而不考虑实际值
   *      在接口中所有的方法都是抽象方法
   */
  interface myInterface {
    name: string,
    age: number

    sayHello(): void
  }

  interface myInterface{
    gender: string
  }

  // const obj: myInterface = {
  //   name: '张三',
  //   age: 18,
  //   gender: '男'
  // }

  /**
   * 定义类时，可以使类去实现一个接口
   *    实现接口就是使类满足接口的要求
   */
  class myClass implements myInterface{
    name: string
    age: number
    gender: string

    constructor(name: string, age: number, gender: string){
      this.name  = name
      this.age = age
      this.gender = gender
    }
    
    sayHello(): void {
      console.log('hello');
    }
  }

})()

2.4 泛型（Generic）

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

• 使用泛型：

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

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

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

  • 方式一（直接使用）：

    test(10) 

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

  • 方式二（指定类型）：

    test(10) 

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

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

function test(a: T, b: K): K{    return b; }

​ test(10, "hello");

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

• 类中同样可以使用泛型：

  class MyClass{
      prop: T;
  ​
      constructor(prop: T){
          this.prop = prop;
      }
  }

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

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

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

// 在定义函数或是类时，如果遇到类型不明确就可以使用泛型
function fn(a: K): K{
  return a
}

// 可以直接调用具有泛型的函数
let res1 = fn(10) // 不指定泛型，TS可以自动对类型进行推断
let res2 = fn('abc') // 指定泛型

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

interface Inter{
  length: number
}

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

console.log(fn3('abc'));

class myClass{
  name: T
  constructor(name: T){
    this.name = name
  }
}
const mc = new myClass('张三')