typescript 基础例子

原文链接: typescript 基础例子

上一篇: webstorm ts学习环境

下一篇: 小米 MIUI 主题制作

ts作为加了类型的js，刚开始觉得使用上和java类似，但后面发现还是有很多不同

fib加上类型后的例子

function fib(n: number): number {
    return n < 2 ? n : fib(n - 1) + fib(n - 2)
}

// 0,1,1,2,3,5,8,13,21,34
console.log([...Array(10)].map((_, k) => fib(k)).join(','))

字面量赋值，变量中可以有多余的属性，但是字面量不行

type Stu = {
    name: String;
    age: Number
}

function f(s: Stu) {
    console.log(s.name, s.age)
}

f({
    name: 'a',
    age: 2,
    score: 60  // 报错，有多于的属性
})

let s = {
    name: 'a',
    age: 2,
    score: 60
}

f(s) // 可以调用成功

闭包计数器

interface Counter {
    (): number

    count: number
}

function getCounter(): Counter {
    const c: Counter = (): number => c.count++
    c.count = 0
    return c
}


let c: Counter = getCounter()
c()
console.log(c.count)
c()
console.log(c.count)
c()
console.log(c.count)

一个细节是这里如果使用let会报错，必须使用const

泛型

function getM<T>(size: number, val: T): T[] {
    return Array(size).fill(val)
}

let m = getM(3, 0)
console.log(m)

泛型约束

function getProp<T, K extends keyof T>(obj: T, k: K) {
    return obj[k]
}

let obj = {
    's': 'abc',
    1: []
}
getProp(obj, 's')
getProp(obj, 1)

布尔对象在与布尔值进行运算时，会永远被转换为true

let a = new Boolean(true)
let b = new Boolean(false)
let c = Boolean(true)
let d = Boolean(false)

console.log(a && b) // [Boolean: false]
console.log(c && d) // false
console.log(b && true) // true
console.log(d && true) // false

普通的内置对象与基本包装类型的主要区别就是 对象的生命期 ， 使用new操作符创建的引用类型的实例，在执行流离开当前作用域之前都一直保存在内存中 ，而 自动创建的基本包装类型的对象，则只是存在于一行代码的执行瞬间，然后立即被立即销毁 。这意味着我们不能再运行时为基本包装类型值添加属性和方法。

let s = "abc"
s.name = 'a'
console.log(s.name) // undefined

使用类型创建实例

class Dog {
    public name: string

    constructor(name: string) {
        this.name = name
    }
}

class Stu {
    public name: string
    private score: number

    constructor(name: string, score: number) {
        this.name = name
        this.score = score
    }
}

function getInstance<T>(c: new(...args: any[]) => T, ...args: any[]): T {
    return new c(...args)
}

let d = getInstance<Dog>(Dog, 'dog')
let s = getInstance<Stu>(Stu, 's', 100)
console.log(d, typeof d, d.name)
console.log(s, typeof s, s.name)
// 访问私有属性报错
console.log(s.score) // Property 'score' is private and only accessible within class 'Stu'.

继承和this的问题

class Calc {
    public num: number

    constructor(num: number = 0) {
        this.num = num
    }

    public add(n: number): Calc {
        this.num += n
        return this
    }

    public sub(n: number): Calc {
        this.num -= n
        return this
    }
}

class PowCalc extends Calc {
    constructor(num: number) {
        super(num);
    }

    pow(n: number): PowCalc {
        this.num **= n
        return this
    }
}

let calc = new PowCalc(0)
console.log(calc.add(1).add(2)) // 3
// 下面会报错，由于sub返回的是calc类型的this，其中没有pow方法
// console.log(calc.sub(1).pow(2))
console.log(calc.pow(2).add(1)) // 10

使用Pick提取对象的部分属性

function pick<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
    let res: any = {}
    for (let k of keys)
        res[k] = obj[k]
    return res
}

let obj = {
    a: 'aa',
    b: 'bb',
    c: 'cc'
}

type Stu = {
    name: string,
    age: number,
    score: number
}

let stu: Stu = {
    name: 'a',
    age: 1,
    score: 60
}

let ss = pick(stu, ['name','score'])
console.log(ss) // { name: 'a', score: 60 }