前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
AI 面试
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
AI 面试
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

# 函数(Function)

函数是 JavaScript 应用程序的基础,它帮助你实现抽象层、模拟类、信息隐藏和模块。

在 TypeScript 里,虽然已经支持类、命名空间和模块,但函数仍然是主要的定义行为的地方,TypeScript 为 JavaScript 函数添加了额外的功能,让我们可以更容易地使用。

# 定义函数类型

我们在 TypeScript 中的函数并不需要刻意去定义,比如我们实现一个加法函数:

const add = (a: number, b: number) => a + b
@前端进阶之旅: 代码已经复制到剪贴板

实际上我们只定义了函数的两个参数类型,这个时候整个函数虽然没有被显式定义,但是实际上 TypeScript 编译器是能『感知』到这个函数的类型的:

2019-06-25-10-43-43

我们通过 VS Code 的类型提示看到,TypeScript 已经推断出了整个函数的类型,虽然我们并没有显式定义出来,这就是所谓的『类型推断』。

那么我应该如何显式定义一个函数的类型呢?

2019-06-25-10-47-16

括号里的 (a: number, b: number) 为参数类型,而通过 => 来连接参数与返回值, 最后则是返回值的类型。

# 函数的参数详解

# 可选参数

一个函数的参数可能是不存在的,这就需要我们使\用可选参数来定义.

我们只需要在参数后面加上 ? 即代表参数可能不存在。

const add = (a: number, b?: number) => a + (b ? b : 0)
@前端进阶之旅: 代码已经复制到剪贴板

参数b有number与undefined两种可能。

2019-06-25-10-53-47

# 默认参数

默认参数在 JavaScript 同样存在,即在参数后赋值即可。

const add = (a: number, b = 10) => a + b
@前端进阶之旅: 代码已经复制到剪贴板

# 剩余参数

剩余参数与JavaScript种的语法类似,需要用 ... 来表示剩余参数,而剩余参数 rest 则是一个由number组成的数组,在本函数中用 reduce 进行了累加求和。

const add = (a: number, ...rest: number[]) => rest.reduce(((a, b) => a + b), a)
@前端进阶之旅: 代码已经复制到剪贴板

# 重载(Overload)

重载这个概念在很多传统编译语言中都存在,如果你有类似 Java 的经验静很容易理解。

那么在 TypeScript 中它的作用是什么呢?

先看一下例子:

function assigned (a: number, b?: number, c?: number, d?: any) {
    if (b === undefined && c === undefined && d === undefined) {
      b = c = d = a
    } else if (c === undefined && d === undefined) {
      c = 
fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
AI 面试
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏