TypeScript入门(一) | 青训营

68 阅读2分钟

简要说明

TypeScript(TS)旨在增加 JavaScript 的可靠性和可维护性。其主要特点为:强类型、面向对象

  1. 静态类型检查: 允许开发者在代码中显式地声明变量、函数和对象的类型,并进行静态类型检查。这种静态类型检查可以帮助发现潜在的类型错误和提前捕获bug,从而提高代码质量和可靠性。
  2. 类和接口:支持面向对象编程,提供了类和接口的概念。可以定义类和接口,并利用继承、封装和多态等面向对象的特性来组织和结构化代码。

变量声明

以下为TS的变量声明示例:

let a: number = 111
let a:any = 111 //任何类型
let a: number | string ="123" //联合类型
//枚举
enum color {
  red,
  blue=2
}
let color:Color=color.blue//0:红色,2:蓝色
typeof a //类型

let names: string[]=["哈哈","嘿嘿","嘻嘻"]
for(let tmp of names){
  //遍历数组值
}
for(let index in names){
  //遍历索引 
}

function func(num1:number,num2:number):string //返回值为string(可以不写,会自动推断)
{}
let add2 = function(){  }  
let add3 = () =>{}

类和继承

TS支持类和继承。 如下所示,我们声明一个person类,其中包含name和age两个属性,des一个静态属性(即属于类而不属于对象),我们定义了构造函数、成员函数以及静态函数(同样只属于类而不属于对象)。

class Person{
    //成员属性
    name:string = "默认"
    age:number = 0
    static des:string="这是一个人类" 
    

    //构造函数
    constructor(name:string,age:number){
        this.name=name;
        this.age=age;
    }
    say() {
        document.write("我叫"+this.name);
    }//成员函数
    static test(){}    
  }

而后我们声明一个子类Scholar继承于person类: 子类的同名成员函数默认覆盖父类,写上super.成员函数名则先调用父类的同名成员函数。

    class Scholar extends Person{
        num: number = 0;
        score: number = 0;
       
        say(){
            super.say();
            document.write("这是一个学者,其名为"+this.name)
        }
    }

然后我们将类实例化:

let a =new Person("Alhaitham",23)
  a.say()
  Person.des="a"
  Person.test()

对于静态成员函数test,我们只能用类来调用。 下面是一个抽象类,其本身不能实例化,其创造出来就是为了被继承。

 //抽象类,
  abstract class Person1{
    name:string="";
    run(){}
    abstract say();//必须在子类中手动式实现
    
  }
  class Scholar1 extends Person1{
    //手动实现父类的抽象方法
    say(){}
  }
//父类指针可以指向子类对象
let a1:Person1 = new Scholar1()
a1.say()

接口和属性寄存器

我们将_hp定义为私有属性,只能在类内部访问。其他人要访问只能通过get和set,即属性寄存器。

class Person{
    private _hp: number = 100;

    //属性寄存器
    get hp(){
      return this._hp
    }
    set hp(value){ 
      if(value<0){ this._hp=0}
      else{this._hp = value;}
    }
}

在下面的例子中,this.hp相当于调用了get hp来访问你私有属性_hp;a.hp = -180;相当于调用了set hp来访问你私有属性_hp。

//接口,只定义方法
interface Iwolf{
    attack();
}
interface IDog{
    eat();
}

class WolfMan extends Person implements Iwolf,IDog{
    //必须实现接口的方法
  
    attack(){}
    eat(){}
      this.hp
}
let a = new Person();
a.hp = -180;

泛型

泛型(Generics)是一种参数化类型的机制,可以增加代码的重用性和灵活性。它允许我们定义一种不具体指定类型的函数、类或接口,而是使用一个占位符来表示。

通过使用泛型,我们可以编写更通用的代码,使代码能够适应多种类型的数据,而不局限于特定的数据类型。这样就可以提高代码的可复用性,并且能够在编译时进行类型检查,确保类型的一致性。

示例如下:

回调

回调(Callback)是一种常见的编程模式,用于处理异步操作的结果。回调是指将一个函数作为参数传递给另一个函数,在后者完成任务后调用前者来处理结果。

在异步操作中,由于操作需要一定的时间才能完成,因此无法立即获得结果。在这种情况下,我们可以将一个回调函数传递给异步操作函数,使得异步操作完成后可以通过回调函数来处理结果。

示例如下:

//回调方法1
function func(value:Function){
  value("Alhaitham");
}
fuction test(name){}
func(test)
//回调方法2
func(function(name){
  
})
//回调方法3
func((name)=>{

})