TypeScript学习笔记

196 阅读2分钟

数据类型

  • 数字类型 number

  • 字符串类型 string

  • 布尔类型 boolean

  • 数组类型 array

    两种定义方式:

const arr:number[] = [1,2,3]
const arr:Array\<number> = [1,2,3]
  • 元组类型 tuple

    * 元组类型属于数组类型的一种

const arr:[string, number, boolean] = ['咖喱', 123, true]
  • 枚举类型 enum
enum Flag {
    success = 1,
    error = -1
}

* 未赋值时打印的是索引值,赋值了的元素的下一个元素未赋值时该元素打印的值为上一个元素的值+1

 enum Color {
    red, blue, green=5, yellow
 }
 console.log(Color.blue, Color.yellow) // 1 6
  • 任意类型 any

    * 一般dom元素用any类型

  • null 和 undefined

  • 没有任何类型 void

    * 一般用于定义方法的时候方法没有返回值

  • 其他类型 never

    * 从不会出现的值

函数

  • 类的定义
class Person {
    name: string;
    constructor(name: string){
        this.name = name;
    }
    getName():string {
        return this.name
    }
}
const p = new Person('咖喱');
p.getName();
  • 继承

    * 注意需要extends 和 super

class Programmer extends Person {
    constructor(name:string) {
        super(name);
    }
}
const programmer = new Programmer('哈哈');
programmer.getName();
  • 类的修饰符

    public 公有 --- 在类里面、子类和类外面都可以访问

    protected 保护类型 --- 在类里面、子类可以访问,类外面无法访问

    private 私有 --- 在类里面可以访问,子类和类外面无法访问

  • 多态

    * 多态属于继承

    * 父类定义一个方法,让继承它的子类去实现,每一个子类有不同的表现

接口

  • 属性接口

    * 属性加? 代表是可选参数

interface Info {
    name: string;
    age: number;
    variety?: string;
}
function getInfo(info: Info):void {
    console.log(`名字:${info.name}, 年龄:${info.age}`)
}
getInfo({name: '咖喱',age: 6}) // 名字:咖喱, 年龄:6
  • 函数类型接口

    * 对方法传入的参数以及方法返回值进行约束

interface getInfo {
    (name:string, age:number):string;
}
const getInfo:getInfo = function(name:string, age:number):string{
    return `名字:${info.name}, 年龄:${info.age}`
}
console.log(getInfo('咖喱',6)) // 名字:咖喱, 年龄:6
  • 可索引接口
// 对数组的约束
interface UserArr {
    [index:number]: string
}
const arr: UserArr = ['咖喱', '暹罗猫']
// 对对象的约束
interface UserObj {
    [key:string]: string
}
const obj: UserObj = { name: '咖喱', variety: '暹罗猫‘ }
  • 类类型接口
// 对类的约束
interface Animal {
    name: string;
    eat(name: string): void;
}
// implements 实现接口
class Cat implements Animal {
    public name: string;
    constructor(name:string) {
        this.name = name
    }
    eat() {
        console.log(`${this.name}吃猫粮`)
    }
}
const c = new Cat('咖喱');
c.eat() // 咖喱吃猫粮
  • 接口的继承
interface Catamount extends Animal {
    play(): void
}
class Cat implements Catamount {
    public name:string;
    constructor(name: string) {
        this.name = name
    }
    eat() {
        console.log(`${this.name}吃猫粮`)
    }
    // 没有定义play方法会报错 因为Catamount接口约束了play方法
    play() {
        console.log(`${this.name}玩逗猫棒`)
    }
}
const c = new Cat('咖喱');
c.play(); // 咖喱玩逗猫棒

// 扩展 类继承 + 类实现接口
class LazyCat {
    name: string;
    constructor(name:string) {
        this.name = name
    }
    sleep() {
        console.log(`${this.name}爱睡觉`)
    }
}
class Cat extends LazyCat implements Catamount {
    constructor(name:string) {
        super(name)
    }
    eat() {
        console.log(`${this.name}吃猫粮`)
    }
    play() {
        console.log(`${this.name}玩逗猫棒`)
    }
}
const c = new Cat('咖喱');
c.sleep(); // 咖喱爱睡觉

泛型

* 泛型解决类、接口、方法的复用性,以及对不特定数据类型的支持

* 将类型都换成泛型(T),调用时即可传入数字也可传入字符串等其他类型,传入数字时返回数字类型,传入字符串时返回字符串类型

  • 泛型类
class MinClass<T> {
    public list: T[] = [];
    add(num: T): void{
        this.list.push(num);
    }
    min(): T{
        let minNum = this.list[0];
        for(let i=0; i < this.list.length; i++) {
            if (minNum > this.list[i]) {
                minNum = this.list[i]
            }
        }
        return minNum
    }
}
const num = new MinClass<number>();
num.add(2);
num.add(1);
num.add(3);
console.log(num.min()) // 1

const str = new MinClass<string>();
str.add('b');
str.add('a');
str.add('c');
console.log(str.min()) // 'a'
  • 泛型接口
interface ConfigFn {
    <T>(value: T): T
}
const getData:ConfigFn = function<T>(value: T): T{
    return value;
}
getData<string>('123');
getData<number>(123);