函数

typeScript的函数是在es6的函数特性的基础上加了一些后端的概念：泛型、参数类型声明、返回值类型声明、重载等特性

js 中声明一个函数如下:

// 函数声明
function log(msg) {
  return msg
}
// 函数表达式
const log = function (msg) {
  return msg
}
// 箭头函数
const log = msg => msg

上面的函数在 typescript 表现如下:

// 声明一个函数一定需要加入类型校验
// 函数声明
function log(msg: string): string {
  return msg
}
// 函数表达式
const log: (msg: string) => string = function (msg: string): string {
  return msg
}
// 箭头函数 
const log: (msg: string) => string = (msg: string): string => msg
or
const log: { (msg: string): string } = (msg: string): string => msg

不同于 js 的是 typescript 定义类型后一定要严格的按照约定传入参数数量及类型, 否则编译器会抛出异常

function log(msg: string): string {
  return msg
}
log(1)   // 类型“number”的参数不能赋给类型“string”的参数。ts(2345)
log('hello world')  // good

可选参数, 默认参数和剩余参数

js中如果函数定义了两个参数,但是在调用时只传入一个参数(未传的参数当做 undefined 解析), 函数依旧会被正常调用, 但是在 ts 中却是不行的, 如果想这么做, 需要将属性置为可选属性

// 可选参数通过属性前加上?实现
// 需要注意的是   必选参数不能位于可选参数后。js 是可以的
function fullName(firstName: string, lastName?: string): string {
  return firstName + lastName
}
// 默认参数, 默认参数会当做可选参数处理
function fullName(firstName: string, lastName = 'world'): string {
  return firstName + lastName
}
// 需要注意的是, 可选参数 同 js 表现一样 一定是 undefined 才会生效
fullName('hello') // hello world
fullName('hello', null) // hellonull
// 剩余参数同 es6, 剩余参数必须位于参数最后, es6解构也是如此
function total(defaultValue: number, ...list: number[]) {
  return list.reduce((pre, cur) => pre + cur, defaultValue)
}

函数重载

不同于 js, ts支持重载, 所谓重载是名称相同并且参数数量类型不同创建多个方法的能力

function greetNane (name:string) :string;
function greetNane (name:number) :number;
function greetNane (name:boolean) :boolean;
// 下面参入的类型一定要包含上面所有的情况
function greetNane (name: string|number|boolean): string|number|boolean{
  return name
}

虽然 typeScript 支持 函数重载, 但是就个人理解而言,使用泛型接口来实现可能更好一点