（自用）TS学习笔记之四：类、接口、继承、封装、泛型、readonly、问号运算符、立刻执行函数

类(含属性的封装、构造方法)

class Person
{
    private Age:number;//定义Age变量为私有
    constructor(age:number) {//构造方法，直接用关键字constructor修饰
        this.Age=age;
    }
    
    get age(){//JS原生的get方法，相当于java的getter方法
        console.log("getage方法执行了！");
        return this.Age;
    }

    set age(a:number)//JS原生的set方法，相当于java的setter方法
    {
        console.log("setage方法执行了！");
        this.Age=a;
    }

}

const p=new Person(19);
console.log(p.age);//看似是直接访问的属性，但实际上是执行的getage方法。
p.age=20;//看似是直接修改的属性，但实际上是执行的setage方法。
console.log(p.age);

 

抽象类

抽象类前用关键字abstract修饰，里面可以有抽象方法（函数体为空)，也可以有普通方法（函数体可以不为空），但是它不可以用来创建对象。

继承

如果在子类中自己定义了构造函数，就必须调用父类的构造函数。如果子类中不写构造函数，则编译器会默认调用父类的构造函数。

子类必须重写父类的抽象方法。

接口

ts允许在同一作用域中存在多个同名的接口，当这些接口被实现时，相当于实现了多个接口的集合。接口中的所有属性和方法都不能有实际实现。接口可以同时被当作类型使用，如以下的代码。

interface a{
    name:string;
    age:number;
}
interface a{
    gender:string;
}

const obj:a ={
    name:"shan",
    age:111,
    gender:"女" //如果去掉了任何一个属性，都会报错。
}

泛型

多个参数的泛型

function fn(a:T, b:K):T
{ 
console.log(b);
return a;}

fn(10,"hello");//自动推断类型
fn(10,"hello");//指定泛型

interface Inter{
    length: number;
}

实现接口的泛型
表示T必须是Inter的一个实现类。所以T里面必须得有length这个属性

function fn2(a:T):number
{
    return a.length;
}

fn2("123");//字符串自带length属性
fn2({});//报错，因为对象是空的，里面无任何属性
fn2({length:2});//自己为对象指定了length属性
fn2(());//报错
fn2([]);//数组自带length属性
fn2([123]);//数组自带length属性

类的泛型

class Per
{
    name:T;
    constructor(name:T) {
        this.name=name;
    }
}

const pp=new Per("shanshan");//指定了T
const ppp=new Per("zhengzheng");//自动推断

其他

readonly

readonly name:string = "孙悟空”

其中readonly表示只读。

问号运算符(ES6新增)

let box = document.getElementById("box1");
//表示从浏览器中找到Id为Box1的元素并赋值给box1

box?.addEventListener('click',function(){
//但不一定能找到这样的元素，所以用问好判断box1是否存在
    alert("hello")//如果存在才执行点击事件。
})

立即执行函数

JS立即执行函数模式是一种语法，可以让你的函数在定义后立即被执行，这种模式本质上就是函数表达式（命名的或者匿名的），在创建后立即执行。一般也可用来提供函数的局部作用域，避免起同名函数或变量而报错。

(function (test) {    
//使用()运算符,输出123
console.log(test); })(123);  
(function (test) {    
//使用()运算符,输出123
console.log(test); }(123));
!function (test) {    
//使用!运算符,输出123
console.log(test); }(123); 
var fn = function (test) {  
//使用=运算符,输出123
console.log(test); }(123);