目录
在 TypeScript 中，函数是一种类型，用于封装可重用的代码块。与 JavaScript 一样，TypeScript 中的函数可以接受参数和返回值，也可以作为变量进行赋值和传递。
可以指定参数类型和返回值类型：在函数参数和返回值前加上类型注解，TypeScript 将使用这些注解来推断和验证函数参数和返回值的类型，这样可以在编译时就捕获类型错误。
可以使用可选参数和默认参数：可选参数使用问号???表示，表示该参数可以省略；默认参数使用赋值语法?=?表示，表示该参数在未传递时使用默认值。
可以使用剩余参数：剩余参数使用三个点?...?表示，表示该参数是一个数组，包含函数调用时所有传递进来的多余参数。
可以使用函数表达式：函数表达式是一个值，并且可以赋值给一个变量，方便进行传递和复用。
可以使用箭头函数：箭头函数是由箭头?=>?隔开的参数部分和函数体部分组成，并且它的 this 值为定义时所在的上下文。
封装代码块：将一些常用的代码块封装为函数，可以避免代码重复，提高代码的可维护性和可重用性。
接受参数和返回值：函数可以接受参数和返回值，这可以让函数能够处理不同的输入和输出，实现具体的业务逻辑。
进行模块化编程：函数可以作为模块中的一部分，提高代码的组织性和可读性，可以降低代码复杂度。
回调函数：函数可以作为回调函数，用于处理异步操作返回的结果，这在 Web 开发中经常使用，如处理服务器请求和数据处理等。
创建类方法：在 TypeScript 类中，可以定义类方法，方法本质上就是一个函数，通过类方法可以对对象进行操作。
// 函数声明
function fn(a: string): string {};
// 函数表达式
let fn: (a: string) => string = function(a) {};
// 通过type定义
type cb = (a: string) => string;
// 通过interface定义
interface IcallBack {
(a: string): string;
}
let fn:cb = function(a) {};
let fn:ICallBack = function(a) {}在 TypeScript 中，标注（Annotation）指的是为变量、函数参数、函数返回值或对象属性等添加类型信息的过程。通过标注，可以明确指定或声明变量、函数或属性的数据类型，让 TypeScript 编译器可以进行类型检查和推断，从而提高代码的可靠性和可维护性。
在 TypeScript 中，函数的类型标注分为两种：参数类型标注和返回值类型标注。它们使用冒号?:?符号来表示，将类型标注放置在参数名称或函数声明语句之后。
通过标注，可以使代码更具可读性、可维护性和可靠性，同时也提供了更好的代码提示和自动补全功能。此外，标注还可以用于接口、类、泛型等场景，让 TypeScript 可以对更复杂的数据结构进行类型检查和推断。
一个函数的标注包含 ： 参数 ?返回值
function greet(name: string, age: number): string {
return `Hello, ${name}. You are ${age} years old.`;
}在这个示例中，greet?函数接受两个参数，分别为?name?和?age。参数的类型标注使用了冒号?:?分隔符，分别指定了这两个参数的类型。
在后面的箭头符号?=>?和返回值类型标注?string?之间，也使用了冒号?:，来表示这个函数会返回一个字符串类型的值。
通过参数名后面添加`?`来标注该参数是可选的
const div = document.querySelector('div');
function css(el: HTMLElement, attr: string, val?:any) {}
// 设置
div && css(div, 'width', '100px');
// 获取
div && css(div, 'width')我们还可以给参数设置默认值
function sort(items: number[], order = 'desc') {}
sort([123])
// 也可以通过联合类型来限制获取的值
function sort(items: number[], order: 'desc' | 'asc' = 'desc') {}剩余参数是一个数组，所以标注的时候一定要注意
interface IObj {
[key: string]: any;
}
function merge(...args:IObj[]):IObj {
return args.reduce((prev, item) => Object.assign(prev, item), {})
}
let newObj = merge({ x: 1 }, { y: 2 }, { z: 3 })interface T {
a: number;
fn: (x: number) => void;
}
let obj: T = {
a: 1,
// 这里的this只是类型标注，是不占据参数位置的
fn(this: T, x: number) {
// (<T>this).b
}
}interface T {
a: number;
fn: (x: number) => void;
}
let obj: T = {
a: 1,
// 这里的this只是类型标注，是不占据参数位置的
fn(this: T, x: number) {
return () => {
obj.a
}
}
}函数重载（Function Overloading）是一种在编程语言中定义多个具有相同函数名但具有不同参数列表和不同返回类型的函数的方式。通过函数重载，在调用函数时可以根据传递的参数类型或个数的不同来自动选择调用哪个函数。
函数重载在 TypeScript 和其他一些静态类型语言中被广泛使用，以提供更灵活的函数调用方式，并增强代码的可读性和可维护性。通过函数重载，可以根据不同的情况提供更具体的行为和返回类型，而无需为不同的函数定义不同的函数名称。
函数重载（Function Overloading）可以提高代码的灵活性和可用性，使函数的使用更加方便、直观和明确。主要有以下几个原因：
1. 增强函数的表现能力：通过函数重载，可以定义多个版本的同名函数，以适应不同的输入或输出需求，对用户提供更加灵活和具有表现力的函数调用方式。
2. 提高代码的可读性和可维护性：函数重载可以使代码更加简洁、直观和易于理解，同时也可以提高代码的可维护性和可重用性。
3. 强制类型检查：使用函数重载时，编译器可以根据函数参数的数量和类型来自动选择调用适当的函数重载，从而增强代码的类型安全性，减少运行时错误。
4. 易于维护和扩展：使用函数重载时，添加新的功能或修改旧的功能时，可以更加轻松地实现，并且不需要更改现有代码的调用方式。
总之，通过使用函数重载，可以使代码的使用更加方便、清晰和可维护，并且可以提高代码的可读性和类型安全性。
function getValue(input: number): string;
function getValue(input: string): number;
function getValue(input: any): any {
if (typeof input === 'number') {
return `String Value: ${input}`;
} else if (typeof input === 'string') {
return parseInt(input);
}
}interface PlainObject {
[key: string]: string | number;
}
function css(ele: HTMLElement, attr: PlainObject):void;
function css(ele: HTMLElement, att: string, value: string | number):void;
function css(ele: HTMLElement, attr: any, value?: any) {
if (typeof attr === 'string' && value) {
ele.style[attr] = value;
}
if(typeof attr === 'object') {
for(let key in attr) {
ele.style[key] = attr[key]
}
}
}
const div = document.querySelector('div');
if(div) {
css(div, 'width', '100px');
css(div, { width: '100px' });
// 报错
// css(div, 'width')
}