前端开发TS ts

ts是js的超集，js是一种弱类型动态语言

类型声明：

// 类型断言 用来告诉解析器 变量的实际类型
s=a as string 
// 复合类型 
let b:number | boolean 
// 表示空 没有返回值
function fn():void{
}
// 永远不会返回结果
function fn2():never{
}
// 枚举
enum Gender = {
    male=0,female=1,name,age
}
let i:Gender
// 类型的别名 声明一个某类型的字段
type myType = 1|2|3
let k:myType
// 数组
let arr:number[] = [1,2,3]
let arr:Array<string> = ['a','s','d']
// 元组
let t1:[number,string,number?] = [1,'a']

面向对象
类：对象的模型，程序中可以根据类创建指定类型的对象，

class 类名{
	属性名：类型;
}

// 例子：
class Person{
    // 实例属性
    name:string='124'
    // 静态属性 可以不创建实例直接访问类
    static age:number=18
    // 只读属性
    readonly id:string='1111'
    // 可以在任意位置访问（修改）
    public _name:string
    // 私有属性 只能在类内部进行访问  可以通过在类中添加方法使得私有属性可以被外部访问
    private _name:string
    // 受包含的属性 只能在当前类和当前类的子类中使用
    protected _name:string
    // 定义方法
    sayHollow(){ 
    }
    // 构造函数 会在对象创建时调用
  	constructor(name:string,age:number){
        // 给属性赋值
        console.log(this,'this表示当前的实例，可以通过this向新建的对象中添加属性')
        this.name= name
        this.age = age
    }
}
// 创建实例对象
const per = new Person()
const per = new Person(name:'shanshan',age:12)
console.log(per.name)
console.log(Person.age)
per.sayHollow() // 调用方法

继承：

子类将会拥有父类所有的方法和属性，可以将多个类中共有的代码写在一个父类中，

如果想在子类中加一些自己的方法也可以直接加

class Cat extends Person{
    // 子类自己的方法
    run(){}
    // 子类也可以重写从父类继承过来的方法
    sayHollow(){}
    // 使用super
    myMethod(){
        // super就表示当前类的父类
        super.sayHollow()
    }
    // 如果在子类中也写了构造函数，必须要再掉一次父类的构造函数
    constructor(name:string,age:number){
        super(name)
        this.age = age
    }
    
}

抽象类:专门用来被子类继承 被子类继承时 子类不能创建实例对象 constructor

可以添加抽象方法，

abstract class Animal{
    name:string
    constructor(name:string,age:number){
        this.name= name
    }
    // 定义抽象方法 子类必须对抽象方法进行重写
    abstract sayHollow():void
}

class Cat extends Animal{
    sayHollow(){
        // 必须要实现
    }
}

let cat = new Cat(name:'shanshan')
cat.sayHollow()

接口：

// 用来定义一个类结构
// 接口可以在定义类的时候去限制类的结构
// 接口中的所有属性都不能有实际的值
// 接口只定义对象的结构 不考虑实际值
// 在接口中所有的方法都是抽象方法
interface myInter{
    name:string;
    sayHellow():void;
}
const obj:myInter={
    name:'sansan',
}
// 定义类时，可以使类去实现一个接口，实现接口就是使类满足接口的要求
class MyClass implements myInter {
    name:string;
    constructor(name:string){
        this.name=name
    }
    sayHellow(){
        console.log(1)
    }
}

interface TableItem {
    id: number;
    name: string;
    age: string;
    sex: string;
}
const tableData = ref<TableItem[]>([]);
const getData = () => {	
    // 获取到表格数据之后
    tableData.value = [{
        id: 1,
        name: '小明',
        age: '10',
        sex: '男',}]
}
getData();

泛型：

// 在定义函数或是类的时候，如果遇到类行不明确就可以使用泛型
function fn<T>(a:T):T{
    return a
}
// 使用
fn(a:10) // 不指定泛型
fn<number>(a:1) // 指定泛型
fn<string>(a:'123') // 指定泛型
// 声明接口
interface Inter {
    b:number
}
// T extends Inter表示泛型T必须是Inter 实现类（子类）
function fn3<T extends Inter>(a:T):number{
    return a.b
}
class Myclass<T>{
    name:T
}
const mc = new Myclass<string>(name:'shanshan')