Typescript基础2

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

这是typescript学习的系列课程，今天开启typescript的第2篇。

不多说废话，直接精简出最精华的部分给大家。

接上一篇Typescript基础一，今天主要讲一下函数的一些基础使用，一共有5条，特别是最后一条最重要。

想要学习typescript知识的一定要看到最后，特别是第5条特别重要。能帮助解工作中的问题。

首先我们来看typescript在函数中的使用。我分别在下面写了5种类型的情况，分别是普通函数、确定返回值类型的函数、自定义类型的函数、定义void的函数以及用于hook函数。

特别是hook的使用场景在工作中用的比较多。

函数的基础使用

// 1. 普通函数
function sum(num1: number, num2: number) {
  return num1 + num2;
}

// 2. 确定返回值类型的函数
function confirmFunx(str1: string, str2: string): string {
  return str1 + str2;
}

// 3. 自定义类型的函数。举例：确认返回值类型的函数
type ILoveType = {
  time: string
  text: string
}
function selfIkunFunc(): ILoveType[]  {
  const lyrics: ILoveType[] = []
  lyrics.push({ time: '2022-12-25 07:35:25', text: "你干嘛；哎哟；啊哈，你好烦" })
  return lyrics
}

// 4. 定义void的函数，一般会用于回调函数或者定义匿名函数使用
type FuncType = (...args: any) => void
function delayExecFn(fn: FuncType) {
  fn("jack", 18)
}


// 5. 使用元组类型定义函数的返回值，常用于hook函数的定义
function useStateHook(initialState: number): [number, (newValue: number) => void] {
  let stateValue = initialState
  function setValue(newValue: number) {
    console.log('5. 使用hook定义最新的值>>>', newValue);
    stateValue = newValue
  }
  return [stateValue, setValue]
}


// 案例一
const resultNum = sum(10, 25);
console.log('1. resultNum>>>>>', resultNum);

// 案例二
const resultStr = confirmFunx('13', '14');
console.log('2. resultStr>>>>>', resultStr);

// 案例三
const iKunVal = selfIkunFunc();
console.log('3. iKunVal>>>>>', iKunVal);

// 案例四
delayExecFn((name, age) => {
  console.log('4. 定义void函数>>>', name, age)
})

// 案例五
const [count, setCount] = useStateHook(10)
setCount(100)

以上的执行结果如下：

ok，以上为今天Typescript的函数的基础内容。

学如逆水行舟，不进则退。学习不求贪多，只求稳步的进步。