TypeScript学习笔记02

联合类型|类型断言|交叉类型

1. 联合类型 "|"

let phone:number | string=155236585
phone=16126126
phone="023-15151"

let fn = function(type:number | boolean):boolean{
    return !!type
}

2. 类型断言 "as"

// 方式1
let fn=function (num:number | string):void{
    // console.log(num.length)  错误
    console.log((num as string).length)
}

fn("5555")
// 方式2
interface A{
    aa:string
}
interface B{
    bb:string
}
let fnn=(type: A | B ):void=>{
    // console.log(type.aa) 报错
    console.log(<A>type.aa)
}

3. 交叉类型 "&"

interface Peple{
    name:string
    age:number
}

interface Man{
    sex:number
}
// 类似extend类型继承
const XX=(man:peple & man):viod=>{
    console.log(man)
}

内置对象

// 1. 通过new操作符new出来的数据的类型
let num:Number=new Number(55)
let boolean:Boolean=new Boolean(false)
.....

// 2.dom元素
// Element、 HTMLElement、 HTML(元素名称)Element
// let div=documnet.querSelector('.header') as Element
let div=documnet.querSelector('.header')

// 3.浏览器对象
let loc:Storage=localStorage
let l:Locatiuon=loaction
let promise:Promise<number>=new Promise(r=>r())
let ck:string=document.cookie

class

1. class 的基本用法

/* 初始一个DOM类 */

interface Vnode {
    tag: string
    text?: string
    children?: Vnode[]
}

// 虚拟dom
class DOM {
    // 实现一个创建dom元素的方法
    createdElement(el: string) {
        return document.createElement(el)
    }
    // 实现一个填充内容的方法
    setText(el: HTMLElement, text: string | null) {
        el.textContent = text
    }
    // 实现一个渲染函数
    render(data: Vnode) {
        // 先获取根节点
        let root = this.createdElement(data.tag)
        if (data.children && Array.isArray(data.children)) {
            data.children.forEach(item => {
                // 递归遍历子元素
                let child = this.render(item)
                root.appendChild(child)
            })
        } else {
            // 填充元素
            this.setText(root, data.text)
        }
        return root
    }
}


/* 初始Vue */

import { text } from "stream/consumers";

// 约定options的类型
interface Options {
    el: string | HTMLElement;
}

// 约定class的类型
interface VueClass {
    options: Options
    init(): void
}

// 创建一个class类
// 1. 通过implements对类进行约束
// 2. 通过extends 对类进行继承
class Vue extends DOM implements VueClass {
    // 自有options
    options: Options;
    constructor(options: Options) {
        // 初始化父类
        super()
        this.options = options
    }
    // 定义一个初始化的方法
    // 需要在初始化init方法之中对虚拟dom解析
    // 成真实dom并进行渲染
    init(): void {
        // 虚拟元素
        let data: Vnode = {
            tag: "div",
            text: "父元素",
            children: [
                {
                    tag: "span",
                    text: "子元素001"
                }, {
                    tag: "span",
                    text: "子元素002"
                }
            ]
        }
        // 解析元素并且渲染，通过继承找DOM类进行处理
        let app = typeof this.options.el === "string" ? document.querySelector(this.options.el) : this.options.el
        app.appendChild(this.render(data))
    }
}


new Vue({
    el: "#app"
})

2. 修饰符

// 1. readonly 只读不可修改

// 2. private 私有的，只能在自己内部使用

// 3. protected 只能给内部或者子类进行使用

// 4. public 公开的 

3. super() 的原理

// 子类调用父类的方法之前需要在constructor之中先调用super()
super() // 父类的prototype.constructor.call
super.父类的方法() // 也可以通过super调用

4. 静态方法

// 静态方法之中的this只能指向自身，不能访问外部的属性和方法噶
static add():void{}

5. get set

// get set 存取器属性
class Ref(){
    _value:any
    constructor(value:any){
        this._value=value
    }
    get value(){
        return value + "获取"
    }
    set value(){
        this._value=value + "设置"
    }
}

抽象类

1. 基类，抽象类

// abstract 所定义的叫抽象类
// abstract 所定义的方法，都只能描述不能进行实现
// abstract 抽象类不能进行实例化
abstract class Vue{
    name:string
    constructor(name?:string){
        this.name=name
    }
    getName():string{
        return this.name
    }
    // 只能描述不能实现，只能定义不能调用和处理
    abstract init(name:string):void
}

// new Vue({name:"hahhaha"}) 报错

// 派生类
// 派生类如果继承抽象类,需要把抽象类里面的abstract定义的方法进行实现
class Nvue extends Vue{
    constructor(){}
    init(name:string):void{
        return "init"
    }
}

元组类型

1. 元组,就是数组的变种(数量固定)

let arr:=[1,false]
// 1.被推断为联合类型
let arr1:[number,false]=[5,true]

// 2.修饰符 只读
let arr2:readonly [number,false]=[87878,true]
// arr2.push(63) 报错


// 3.别名 进行判断
let arr3:readonly [x:number,y?:false]=[87878,true]

枚举类型

1. 数字枚举

// 1. 默认
enum Color{
    red,
    green,
    bule
}
console.log(Color.red);   // 0
console.log(Color.green); // 1
console.log(Color.bule);  // 2

// 2. 增长/自定义
enum Color{
    red = 2,
    green,
    bule
}
console.log(Color.red);   // 2
console.log(Color.green); // 3
console.log(Color.bule);  // 4

2. 字符串枚举

// 1. 默认
enum Color{
    red = "red",
}
console.log(Color.red);   // red

3. 异构枚举 (混合使用)
4. 接口枚举
5. const枚举
6. 反向映射

类型推论 | 类型别名

1. 类型别名

type S = string
let str:S = "6666"

type T = string | number & null

//  extends 包含的意思
// 左边的值会作为右边的类型的子类型
type num = 1 extends number ? 1 : 0

never类型

// 1. 推断
type A = string & number 

// A:never

// 2. 函数的应用
function A():never{
    throw new Error('error')
}

function B():never{
    while(true){}
}