本文已参与「新人创作礼」活动,一起开启掘金创作之路。

内置对象

js里面内置了很多对象，它们可以直接在 TypeScript中当做定义好了的类型。

Dom Bom 以及几种基本数据类型

在浏览器控制台使用 console.dir($0) 看proto类型

console.dir($0)

let body: HTMLElement = document.body;
let allDiv: NodeList = document.querySelectorAll('div');

//读取div 这种需要加类型断言 或者加个判断因为读不到会返回null
let div:HTMLElement = document.querySelector('div') as HTMLDivElement
document.addEventListener('click', function (e: MouseEvent) {
    

定义promise

在js中会使用大量异步操作所以Promise 是最常见的。像是promise 这种ts是很难准确推断出返回值类型的这时候就需要我们手动指定

• 函数定义返回promise 语法规则 :Promise<T> 类型

    play():Promise<number>{
        return new Promise((resolve,reject){
            resolve(1000)
        })
    }

在开发中，使用promise的机会很多这个时候就要靠自己的能力了

类(Class)

在es6中引入了类的概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。在这方面学过java的朋友有天然优势。

• 在TypeScript是不允许直接在constructor 定义变量的 需要在constructor上面先声明,同时可指定类型

    class Animal{
        private name:string
        private age:number
        constructor(name:string,age:number){
            this.name=name
            this.age=age
        }
        play 
    }

修饰符

public private protected

public : 可以让你定义的变量 内部访问 也可以外部访问 如果不写默认就是public

private :使用  private 修饰符 代表定义的变量私有的只能在内部访问 不能在外部访问

protected :使用  protected 修饰符 代表定义的变量私有的只能在内部和继承的子类中访问 不能在外部访问。

补充：ES6 类是自带关键字 static 声名静态成员可以通过类名进行访问

• static 声名的静态成员之间可以通过this互相调用访问

• 普通成员必须通过类名访问

class Person {
  static num = 1
  private name: string
  private age: number
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
  public static play(): void {
    console.log(this.num); //1
    console.log(Person.num); //1

  }
}
Person.play()

使用接口定义类

• 接口中不能使用关键字 private public protected 但可以用readonly
• 使用implements关键字 实现接口
• 如果实现多个接口interface后用逗号隔开 继承还是用extends
• 接口与接口之间可以多继承
• 接口内部不可以写抽象方法

interface AnimalClass {
  play(): void
}
interface TiggerClass {
  run(): void
}

class Person implements AnimalClass,TiggerClass {
  static num = 1
  private name: string
  private age: number
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
  play(): void {
    console.log("我是play");
  }
  run(){
      console.log("我是run")
  }
}

抽象类

如果某个方法的具体实现不确定我们可以把他定义为抽象类，让实现类去重写该方法

abstract class A {
  private name: string
  private age: number
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
  abstract eat(): void
}
class Person extends A implements AnimalClass {
  static num = 1
  constructor(name: string, age: number) {
    super(name, age)
  }
  play(): void {
    console.log("我是实现类");
  }
  eat(): void {
    console.log("eat");

  }
}
let obj: A = new Person("张三", 18);
console.log(obj); //{ name: '张三', age: 18 }

• 定义的抽象方法必须在派生类实现
• 类只能继承一个直接父类但可以实现多个接口
• 可以在内部写方法体