Learning TypeScript 0x2 使用函数

最新推荐文章于 2020-04-21 09:48:27 发布

cellinlab

最新推荐文章于 2020-04-21 09:48:27 发布

阅读量163

点赞数

分类专栏： TypeScript 文章标签： typescript 前端 node.js

本文链接：https://blog.csdn.net/funkstill/article/details/104303304

版权

TypeScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

函数声明和函数表达式

console.log(greetNamed('John'))
console.log(greetUnnamed('John')) // 此处会报异常，greetUnnamed未被赋值
// 函数声明
function greetNamed(name: string) : string {
    if(name) {
        return `hi！${name}`
    }
}
// 函数表达式
var greetUnnamed = function(name: string) : string {
    if(name) {
        return 'Hi！${name}'
    }
}

函数类型

上面例子中只有参数和返回值的类型，有时还需要定义函数本身的类型

// 声明greetUnnamed变量及其类型
// 其类型是一个只包含一个名为name的string类型参数、在调用后会返回类型为string的函数
var greetUnnamed : (name : string) => string 
// 给其赋值一个完全符合变量类型的函数
greetUnnamed = function (name : string) : string {
    if (name) {
        return `Hi! ${name}`
    }
}

简写

var str : string = 'hello'

var greetUnnamed : (name : string) => string = function (name : string) : string {
    if (name) {
        return `Hi! ${name}`
    }
}

有可选参数的函数

与JS不同，TS调用函数时传的参数的数量或类型不符合会报错，在特殊场景调用函数且不提供所有参数，可使用可选参数

function add(foo : number, bar : number, foobar? : number) : number {
    var result = foo + bar
    if (foobar !== undefined) {
        result += foobar
    }
    return result
}

有默认参数的函数

可选参数需要在函数内进行判断，可通过设置默认值代替标记可选参数

function add(foo : number, bar : number, foobar : number = 0) : number {
    return foo + bar + foobar
}

TS编译器会在JS输出结果中生成一个if结构，在foobar参数没有传递给函数时设置为默认值

function add(foo, bar, foobar) {
    if (foobar === void 0) foobar = 0
    return foo + bar + foobar
}

void 0是TS编译器检测一个变量是否为undefined的用法（开发者用undefined，编译器用void 0）.

和可选参数一样，默认参数必须位于所有必选参数列表的后面。

有剩余参数的函数

function add(...foo : number[]) : number {
    var result = 0
    for(var i = 0; i < foo.length; i++){
        result += foo[i]
    }
    return result
}

实际工作原理是利用js的arguments

function add() {
    var foo= []
    for(var _i = 0; _i < arguments.length; i++) {
        foo[_i -0] = arguments[_i]
    }
    var result = 0
    for(var i = 0; i < foo.length; i++){
        result += foo[i]
    }
    return result
}

如果担心对参数的遍历会带来性能上的影响，可以直接传入数组

function add(foo : number[]) : number {
    var result = 0
    for(var i = 0; i < foo.length; i++) {
        result += foo[i]
    }
    return result
}

函数重载

.函数重载是使用相同名称和不同参数数量或者参数类型创建多个方法的一种能力。通过声明一个函数所有的函数签名，然后再将一个签名作为实现。

function test(name: string) : string
function test(age: number) : string
function test(single: boolean) : string
function test(value: (string | number | boolean) : string {
    switch(typeof value) {
        case 'string':
            return `My name is ${value}`
        case 'number':
            return `I am ${value} years old`
        case 'boolean':
            return value ? `I am single` : `I am not single`
        default:
            console.log('Invalid Operation!')
    }
}

特定重载签名

可以使用一个特定的签名来创建具有相同名称、参数数量但是有不同返回类型的多个函数。为了创建一个特定签名，必须将函数的参数类型指定为一个字符串。这个字符串被用于定义哪个函数重载被调用。

当编写重载声明时，必须在最后列出非重载签名

interface Document {
    createElement(tagName: 'div'): HTMLDivElement // 特定重载签名
    createElement(tagName: 'span'): HTMLSpanElement // 特定重载签名
    createElement(tagName: 'canvas'): HTMLCanvasElement // 特定重载签名
    createElement(tagName: string): HTMLElement // 非特定重载签名
}

函数作用域

高层抽象的编程语言中，当变量被创建时，内存就已经被分配，并且在他们不再使用时会被回收（垃圾回收器会在变量脱离作用域时清理掉他们）

主要的现代编程语言使用词法作用域，词法作用域往往比动态作用域更容易被人和分析工具理解。

大多数词法作用域编程语言中，变量的作用域为代码块。在TS中，变量的作用域在一个函数中

function foo() :void {
    if(true) {
        var bar : number = 0
    }
    console.log(bar)
}
foo() // 0

实际运行时的代码

function foo() :void {
    var bar : number
    if(true) {
        bar = 0
    }
    console.log(bar)
}

let和const

let允许我们将作用域设置在代码段而不是函数中

function f00() : void {
    if(true) {
        let bar : number = 0 // 只能在if代码块中被访问
        bar = 1
    }
    console.log(bar)
}

立即调用函数

立即调用函数表达式（IIFE）是一种设计模式，使用函数作用域作为一个词法作用域。IIFE可以被用于防止全局作用域中的变量提升导致的污染

var bar = 0
(function() {
    var foo : number = 0// 在函数作用域中
    bar = 1 // 在全局作用域中
    console.log(bar) // 1
    console.log(foo) // 0 
})()
console.log(bar) // 1
console.log(foo) // error

可以给IIFE传递一个变量，以便更好地控制在作用域之外创建的变量

var bar = 0 // 全局的
(function(global) {
    var foo : number = 0 // 在函数作用域中
    bar = 1 // 在全局作用域中
    console.log(global.bar) // 1
    console.log(foo) // 0 
})(this)
console.log(bar) // 1
console.log(foo) // error

IIFE允许我们访问公开方法，隐藏函数内的私有变量

class Counter {
    private _i : number
    constructor() {
        this._i = 0
    }
    get() :number {
        return this._i
    }
    set(val : number) : void {
        this._i = val
    }
    increment() : void {
        this._i++
    }
}
var counter = new Counter()
console.log(counter.get()) // 0
counter.set(2)
console.log(counter.get()) // 2
counter.increment()
console.log(counter.get()) // 3
console.log(counter._i) // error _i 为私有属性

编译生成

var Counter = (function () {
    function Counter() {
        this._i = 0
    }
    Counter.prototype.get = function() {
        return this._i
    }
    Counter.prototype.set = function(val) {
        this._i = val
    }
    Counter.prototype.increment = function() {
        this._i++
    }
    return Counter
})()

注意，如果在浏览器内执行上面代码，创建一个Counter的实例并访问它的_i属性，也不会遇到任何错误，因为TS不会生成运行时的私有属性。

var Counter = (function () {
    var _i : number = 0
    function Counter() {
    }
    Counter.prototype.get = function() {
        return _i
    }
    Counter.prototype.set = function(val) {
        _i = val
    }
    Counter.prototype.increment = function() {
        _i++
    }
    return Counter
})()

这种情况下_i不是Counter的属性，而是在Counter闭包内的变量

范型

class User {
    name : string;
    age : number;
}
function getUsers(cb : (users: User[]) => void) : void {
    $.ajax({
        url: '/api/users',
        method: 'GET',
        success: function(data) {
            cb(data.items)
        },
        error: function(error) {
            cb(null)
        }
    })
}

有时会出现一个功能几乎完全相同的函数

class Order {
    id: number
    total: number
    items: any[]
}
function getOrders(cb : (user: User[]) => void) : void {
    $.ajax({
        url: '/api/orders',
        method: 'GET',
        success: function(data) {
            cb(data.items)
        },
        error: function(error) {
            cb(null)
        }
    })
}

getOrders(function(orders: Orders[]) {
    for(var i; i < orders.length; i++) {
        console.log(orders[i].total)
    }
})

可以使用范型来避免这种代码的重复，这是一种程序语言的风格，它允许程序员在使用后才会定义的类型，并在实例化时作为参数指定这些类型

function getEntities<T>(url: string, cb: (list: T[]) => void) : void {
    $.ajax({
        url: url,
        method: 'GET',
        success: function(data) {
            cb(data.items)
        },
        error: function(error) {
            cb(null)
        }
    })
}
getEntities<User>('/api/users', function(users: Users[]) {
    for(var i; i < users.length; i++) {
        console.log(users[i].name)
    }
})
getEntities<Order>('/api/orders', function(orders: Orders[]) {
    for(var i; i < orders.length; i++) {
        console.log(orders[i].total)
    }
})

tag函数和标签模板

要使用tag函数必须在tag函数后面紧跟着一个模板字符串

一个标签模板必须返回一个字符串，并接受下面参数：第一个参数是一个数组，包含模板字符串中所有的静态字面量（下例中的<h1>和</h1>;剩余的参数是模板字符串中的所有变量）

var html = htmlEscape `<h1>${name} ${surname}</h1>`

即： tag(literals : string[], value : any[]) : string

function htmlEscape(literals, ...placeholders) {
    let result = ''
    for(let i = 0; i < placeholders.length; i++) {
        result += literals[i]
        result += placeholders[i]
                .replace(/$/g, '&amp;')
                .replace(/"/g, '&quot;')
                .repalce(/'/g, '&#39;')
                .repalce(/</g, '&lt;')
                .repalce(/>/g, '&gt;')
    }
    result += literals[literals.length - 1]
    return result
}

上面函数逐字迭代字符串和值来确保所有的HTML代码被正确转义，防止代码注入攻击。

使用tag函数最大的好处是允许我们创建一个自定义的模板字符串处理器

TS中的异步编程

回调和高阶函数

var foo = function() { // 回调
    console.log('foo')
}
function bar(ca : () => void) { // 高阶函数
    console.log('bar')
    cb()
}
bar(foo) // bar foo

接收函数为参数或返回另一个函数的函数称高阶函数

箭头函数

箭头函数是function表达式的缩写，并且这种词法会在其作用域内绑定this操作符

在TS中，this操作符行为与其他语言有点不一样。在TS定义一个类时，可以使用this指向这个类自身的属性

class Person {
    name : string
    constructor(name : string) {
        this.name = name
    }
    greet() {
        console.log(`hi my name is ${this.name}`)
    }
}
var remo = new Person('Remo')
remo.greet() // hi my name is Remo

必须谨慎使用this操作符，一些场景下会指向错误的值

class Person {
    name : string
    constructor(name : string) {
        this.name = name
    }
    greet() {
        console.log(`hi my name is ${this.name}`)
    }
    greetDelay(time : number) {
        setTimeout(function() {
            // 此处的this会指向该匿名函数
            console.log(`hi my name is ${this.name}`)
        }, time)
    }
}
var remo = new Person('Remo')
remo.greet() // hi my name is Remo
remo.greetDelay(1000) // hi my name is

箭头函数表达式的词法会绑定this操作符

class Person {
    name : string
    constructor(name : string) {
        this.name = name
    }
    greet() {
        console.log(`hi my name is ${this.name}`)
    }
    greetDelay(time : number) {
        setTimeout(() => {
            // 此处的this会指向Person实例
            console.log(`hi my name is ${this.name}`)
        }, time)
    }
}
var remo = new Person('Remo')
remo.greet() // hi my name is Remo
remo.greetDelay(1000) // hi my name is Remo

箭头函数实际编译结果

Person.prototype.greetDelay = function(time) {
    var _this = this
    setTimeout(function(){
        // 此处的this会指向Person实例
        console.log(`hi my name is ${_this.name}`)
    }, time)
}

回调地狱

Promise

function foo() {
    return new Promise((fulfill, reject) => {
        try{
            //do something
            fulfill(val)
        } catch(e) {
            reject(reason)
        }
    })
}
foo().then(function(val){
    console.log(val)
}).catch(function(e){
    console.log(e)
})

异步流程控制：

并行
串行
瀑布流（一组任务串行，每一个任务会将结果传到下一个任务中）
混合（并行、串行、瀑布流的任意组合）

生成器

在函数执行过程中将这个函数暂停一次或多次，并在随后恢复它的运行，而且可以让其他代码在暂停的过程中运行。

一个生成器代表了一个值的序列。生产器对象的接口只是一个迭代器，可以调用next()函数使他产出结果

function *foo() {
    yield 1
    yield 2
    yield 3
    yield 4
    return 5
}
var bar = foo()
bar.next() // Object{ value: 1, done: false }
bar.next() // Object{ value: 2, done: false }
bar.next() // Object{ value: 3, done: false }
bar.next() // Object{ value: 4, done: false }
bar.next() // Object{ value: 5, done: true }
bar.next() // Object{ done: true}

在function关键词后面跟着一个*定义一个生成器的构造函数。yield关键字被用来暂停函数的执行并返回一个值。

可以使用无限循环而不会导致栈溢出