对象

1. type
2. interface

   type Person {
       name: string
   }
   interface Student {
       name: string
   }
   

• 判断对象类型
  1. 类型 A 和 类型 B 哪个的范围大？
     • A 范围大于 B 范围

     type A = { name: string }
     type B = { name: string; age: string } 
     

索引签名

Index Signature

多用于泛型

    type Hash = {
        [k: string]: unknown
        length: number
    } 

映射类型

Mapped Type

• 不能再声明其他属性，如下图length

    type Hash = {
        [k in string]: unknown
        // length: number  // 报错，映射的类型可能不声明属性或方法。
    }

可选属性

• 使用?
• InputProps可以不传 defaultValue，属性默认为 string | undefined
• MapProps中必须传defaultValue,

    interface InputProps {
        defaultValue?: string
        value: number
    }
    interface MapProps {
        defaultValue: string | undefined
    }

readonly

• 只读

  interface User {
      readonly id: number
      readonly scores: number[] // scores 不可写，但是可以添加或删除里面的元素
  }
  

函数

声明函数及其类型

1. 先表示类型再赋值

       type F1 = (a:number, b:number) => number
       const f1: F1 = (a, b) => a + b
   

2. 先实现箭头函数，再获取类型

       const f2 = (a:number, b:number): number => {
           return a + b
       }
       type F2 = typeof f2
   

3. 先实现普通函数，再获取类型

   function f3(this:unknown, a: number, b: number): number {
       return a + b
   }
   type F3 = typeof f3
   

4. 先实现匿名普通函数，再获取类型

   const f4 = function (this: unknown, a: number, b: number): number {
       return a + b
   }
   type F4 = typeof f4
   

5.使用构造函数

    const f5 = new Function('a', 'b', 'return a + b')
    type F5 = typeof f5

类型谓词 is

• 使用 is判断类型

  type Person = { name: string }  
  type Animal = {}
  
  function isPerson(x: Person | Animal ): x is Person {
  return 'name' in x
  }
  

函数语法

1. 可选参数

2. 参数默认值

3. 参数是函数

4. 返回值是函数

   // useCapture 可选
   const fn = (type:string, fn: unknown, useCapture?: boolean) => {}
   // 参数 useCapture 为 false
   const fn1 = (type:string, fn: unknown, useCapture = false) => {}
   // 参数为函数
   const fn2 = (type:string, fn: (this: HTMLElement, e: Event) => void, useCapture = false) => {
       const element = {}  as HTMLElement
       const event = {} as Event
       fn.call(element, event)
   }
   // 返回值为函数 (函数柯里化示例)
   const fn3 = (a: number) => (b: number): number => a + b
   

函数重载

重载(over load)

• 同名函数，参数类型、参数个数不同

// 声明函数类型
function createDate(n: number): Date
function createDate(year: number, month: number, date: number): Date
// 实现函数
function (a:number, b?:number, c:number){
    if(a!==undefined && b!==number && c!==undefined) {
        return new Date(a, b, c)
    }else if(a!==undefined){
        return new Date(a)
    }else{
        throw new Error('参数传递错误')
    }
}

this

• 隐式绑定
  • 通过对象调用的形式，object.fn()
• 显示绑定
  • call、apply、bind

  type Person = { name: string }
  // 函数，第一个参数为 this
  function fn(this: Person, word: string) { consoel.log(word) }
  
  // 隐式绑定
  const p: Person & { f: typeof f } = { name: 'lihhh', f: fn}
  p.f('你好')
  // 显示绑定
  f.call(p, 'call')
  f.apply(p, ['apply'])
  const f2 = f.bind(p)
  f2('bink') 
  

参数

剩余参数

展开参数

function sum(type:string, ...arr: number[]) {
    fn(...arr)
    return arr.reduce((result,  n)=>{
        return result + n
    }, 0)
}

function fn(...ar: number[]){
    console.log(arr)
}

as const

const 断言只能用于引用枚举、字符串、数字、布尔值、数组或对象。

推断出它能推断出的最窄的类型

    const a = 'a'  // 自动推导为 const a: 'a'
    let b = 'b' // 自动推导为 let b: string
    // 使用 as const
    let c = 'c' as const  // let c = 'c'

    const array = [1, 'hi'] // 自动推导为 const array: (number | string)[]
    array.push(16)
    // 使用 as const
    // 推导为 const array: readonly [1, "hi"]
    const array = [1, 'hi'] as const 

参数对象解构

type Config = {
    url: string
    method: 'POST' | 'GET' | 'PATCH' | 'DELETE',
    data: unknown
}
// 结构并设置默认值
function ajax( { url, method， ...otherConfig }: Config = { url: '/home', method: 'GET' } ){
    consolelog(url, method)
}

void 返回值

// 以下均成立
function f1(): void{
    return 
}
function f2(): void{
}
function f3(): void{
    return undefined
}
// 报错
function f3(): void{
    return null
}