TypeScript 中你可能会忽略的细节

let a = true // boolean
const b = true // => ?

const a = {
    b: 12
}

let a: [number] = [1]
let b : [number, string] = [1, '2']

let c: [number, string?] = [1]

let d: [string, ...string[]] = ['shinji', 'rei', 'asuka']
let e: [number, boolean, ...string[]] = [3, true, 'hello', 'ts']

let a = [1, true] // 没有显示注解声明，猜一下ts会自动推导出来什么？

let a = [1, true] as [number, boolean]

let a = [1, true] as const

function tuple<T extends unknown[]>(...args: T): T {
  return args
}
let a = tuple(1, true)

enum Language {
    Chinese,
    English,
    Spanish
}
enum Language {
    Russian = 3
}
// 两处枚举会自动合并

let langA = Language.Chinese
let langB = Language.Japanese // Error

let langC = Language[0]
let langD = Language[6] // 实际上Language[6]不存在，但是ts居然不报错

const enum Language {
  Chinese,
  English,
  Spanish,
  Russian
}

let langA = Language.Chinese
let langB = Language.Japanese // Error ts 会提示报错

let langC = Language[0] // Error ts 会提示报错
let langD = Language[6] // Error ts 会提示报错
// 以上具体报错类型，请自行在IDE中尝试

// this 不是常规的参数，是保留字，是函数签名的一部分
function fancyDate(this: Date){
    return `${this.getDate()}/${this.getMonth()}/${this.getFullYear()}`
}
// 如果这么调用，ts 将会提示报错
fancyDate()
// 正确的调用方式
fancyDate.call(new Date())

let set = new Set()
set.add(1).add(2)
set.has(2) // true
set.has(3) // false

class SimpleSet {
    // has方法
    has(value: number): boolean {
        // TODO:
    }
    // 还需要一个 add 方法，根据 ES6 原生方法来说 add 可以链式调用，那么 add 方法
    // 返回的一定是一个 Set 类型的数据结构
    add(value: number): Set {
        // TODO:
    }
}

class SonOfSimpleSet extends SimpleSet{
    has(value: number): boolean {}
    add(value: number): SonOfSimpleSet {}
}

class SimpleSet {
    has(value: number): boolen {}
    add(value: number): this {}
}
// 这样的话，我们就可以不用在 SonOfSimpleSet 类中重复定义 add 方法了。在 SimpleSet 
// 中 this 就会指向 SimpleSet，在 SonOfSimpleSet 中 this 就会指向 SonOfSimpleSet

type Filter = {
    <T>(array: T[], f: (item: T) => void): T[]
}
let filter: Filter = (array, f) => //....
// 范型 T 被绑定为 number
filter([1, 2, 3], _ => _ > 2)
// 范型 T 被绑定为 string
filter(['a', 'b'], _ => _ !== 'b')

// 这个例子中，范型 T 被声明在具体的函数调用签名中，那么 ts 将会在 调用 Filter 类型的函数
// 时为范型 T 绑定具体的类型
type Filter = {
    <T>(array: T[], f: (item: T) => void): T[]
}
let filter: Filter = (array, f) => //....

// 如果范型 T的作用域限定在了类型别名 Filter 中，那么 ts 就会要求在使用 Filter 时显示
// 绑定类型
type Filter<T> = {
    (array: T[], f: (item: T) => boolean) : T[]
}
let filter: Filter = (array, f) => //.... Error TS2314: Generic type 'Filter'
                                   // requires 1 type argument(s)  
let filter: Filter<number> = (array, f) => // .... Good!                      

type Filter = {
    <T>(array: T[], f: (item: T) => void): T[]
}

type Filter<T> = {
    (array: T[], f: (item: T) => boolean) : T[]
}

type Filter = <T>(array: T[], f(item: T) => boolan): T[]

type Filter<T> = (array: T[], f(item: T) => boolan): T[]

function filter<T>(array: T[], f(item: T) => boolean): []

class Filter<T, U> {}
// ....

// void 此函数是一个返回 void 的函数
function returnVoid() {
    let a = 1 + 1
    let b = 2 + 2
}
// undefined 此函数是一个返回 undefined 的函数
function returnUndefined() {
    return undefined
}
// null 此函数返回的是一个 数字或者 null
function returnNumOrNull(x: number) {
    if (number < 10) return x
    return null
}
// never 此函数返回的是 never
function returnNever() {
    throw TypeError('always error')
}
// 另一个返回 never 的函数，无限循环
function returnNever2 () {
    while(true) {
        console.log('return never')
    }
}

type MyExclusive<T, U> = (T extends U ? never : T) | (U extends T ? never : U)

// 1. 协变
T <: U
// 2. 不变
T 只能是 T
// 3. 逆变
T >: U
// 4. 双变
T <: U || T >: U // 即两种之一 

// 简写
type Log = (msg: string, userId?: string): void
// 完整型
type Log = {
    (msg: string, userId?: string): void
}

type Reserve = {
  (from: Date, to: Date, destination: string): void
  (from: Date, destination: string): void
}
let reseve: Reserve = (from, to, destination) => {}

let reserve: Reserve = 
    (from: Date, toOrDestination: Date | string, destination?: string) => {}

class Eva {}
let eva: Eva = new Eva() // 这一行代码中 第一个 Eva 指的是Eva类的实例类型，第二个Eva指
// 的是 Eva 这个值。

enum Nerv {
    Zero,
    One
}
let nerv: Nerv = Nerv.Zero // 这里第一个Nerv 指的是 Nerv枚举的类型， 第二 Nerv 指的
// 是 Nerv 这个值

// a.ts
type Currency = {
  unit: 'USD' | 'EUR' | 'JPY' | 'CNY',
  value: number
}

let Currency = {
  DEFAULT: 'USD',
  from: (value: number, unit: Currency['unit']='USD'):Currency =>{
    return {
      unit,
      value
    }
  }
}
export { Currency }
// b.ts
import { Currency } from './a.ts'
let amount: Currency = {
    unit: 'CNY',
    value: 79729
}
const c: Currency = Currency.from(100, 'EUR')

// zip.ts
interface Array<T> {
    zip<U>(list: U[]): [T, U][]
}

Array.prototype.zip = function<U, T>(
    this: T[],
    list: U[]
): [T, U][] {
    return this.map((v, k)=> {
        tuple(v, list[k])
    })
}

function tuple<T extends unknown[]>(...args: T): T {
  return args
}

type Dialog = {
  id?: string
}
// 使用非空断言
function cloneDialog(dialog: Dialog) {
  if (!dialog.id) {
    return
  }
  setTimeout(()=> {
    removeFromDOM(
      dialog,
      document.getElementById(dialog.id)
    )
  }, 10)
}

function removeFromDOM(dialog: Dialog, element: Element) {
  element.parentNode.removeChild(element)
  delete dialog.id
}

// 省略其余部分
function cloneDialog(dialog: Dialog) {
  // ...
  setTimeout(()=> {
    removeFromDOM(
      dialog,
      document.getElementById(dialog.id!)!
    )
  }, 10)
}

function removeFromDOM(dialog: Dialog, element: Element) {
  element.parentNode!.removeChild(element)
  // ....
}

type CompanyId = string
type OrderId = string
type UserId = string
type Id = CompanyId | OrderId | userId

// 这里有个查找用户id 的方法, 我们明确说明了 queryUserId方法需要传入的参数类型为UserId
function queryUserId(id: UserId){
    // TODO:
}
// 但是 我们这么做呢？
let id: CompanyId = '12313'
queryUserId(id) // OK
// WTF代码居然不报错？

type CompanyId = string & {readonly brand: unique symbol}
type OrderId = string & {readonly brand: unique symbol}
type UserId = string & {readonly brand: unique symbol}
type Id = CompanyId | OrderId | UserId
function CompanyId(id: string) {
    return id as CompanyId
}
function OrderId(id: string) {
    return id as OrderId
}
function UserId(id: string) {
    return id as UserId
}
// 来使用一下
function queryUserId(id: UserId) {}
let id = CompanyId('nerv')
queryUserId(id) // Error

type UserTextEvent = { value: string}
type UserMouseEvent = { value: [number, number]}

type UserEvent = UserTextEvent | UserMouseEvent

function handle(event: UserEvent) {
  if (typeof event.value === 'string') {
    event.value // 1
    return
  } 
  event.value // 2
}
// 上面的代码中 注释1的地方 event.value的类型一定为 string，注释2的地方 event.value 的
// 类型一定为元组[number, number]

// 当Event类型变复杂的时候
type UserTextEvent = { value: string, target: HTMLInputElement}
type UserMouseEvent = { value: [number, number], target: HTMLElement}
type UserEvent = UserTextEvent | UserMouseEvent

function handle(event: UserEvent) {
  if (typeof event.value === 'string') {
    event.target // 1
    return
  } 
  event.target // 2
}
// 上面的代码，我们通过if 语句来对类型进行缩窄操作，当 event.value === string的时候，
// 意味着 if 语句块儿中的 event.target的类型 为 HTMLInputElement|HTMLElement
// , 注释2中的 event.target的类型也为 HTMLInputElement|HTMLElement

// 不对啊？ts 明明通过typeof 做了类型细化了，但是event.target的类型为什么是一个并集的类型

type UserTextEvent = 
    {type:'TEXTEVENT', value: string, target: HTMLInputElement}
type UserMouseEvent = 
    { type: 'MOUSEEVENT',value: [number, number], target: HTMLElement}

// 内置Record
type Weekday = 'Mon' | 'Tue' | 'Wed' | 'Thu' | 'Fri' 
type Day = Weekday | 'Sat' | 'Sun'

let nextDady: Record<Weekday, Day> = {
  Mon: 'Tue',
  Tue: 'Mon',
  Wed: 'Mon',
  Thu: 'Mon',
  Fri: 'Mon'
}
// 通过映射类型来实现呢？
// [k in T]: U
let nextDady: {[K in Weekday]: Day} = {
  Mon: 'Tue',
  Tue: 'Mon',
  Wed: 'Mon',
  Thu: 'Mon',
  Fri: 'Mon'
}

type Account = {
  id: number
  isEmployee: boolean
  notes: string[]
}
// 所有 Account 都是可选的
type OptionalAccount = {
  [K in keyof Account]?: Account[K]
}
// 所有字段都为null
type NullableAccount = {
  [K in keyof Account]?: Account[K] | null
}
// 所有字段都是可读的
type ReadonlyAccount = {
  readonly [K in keyof Account]: Account[K]
}
// 所有字段都是可写的 等同于Account
type WritableAccount = {
  -readonly [K in keyof Account]: Account[K]
}
// 所有字段都是必须的，等同于Account
type RequiredAccount = {
  [K in keyof Account]-?: Account[K]
}

// 不使用键入运算符的话 我们申明一个类型
type APIResponse= {
  user: {
    userId: string
    friendList: {
      count: number
      friendList: {
        fristName: string
        lastName: string
      }
    }
  }
}
// 重新声明 friendList的类型我们需要重写

type FriendListType = {
    counst: number
    friendList: {
        firstName: string
        lastName: string
    }
}
// 使用键入运算符的话可以直接取值即可，如下
type FriendList = APIResponse['user']['friendList'] //等同于 FriendListType

// 上面的示例我们可以使用 infer 重写
type ElementType<T> = T extends (infer U)[] ? U : T
type B = ElementType<number[]> // 类型为 number

// infer 子句声明量一个新的类型变量U， ts 将根据传给 ElementType的 T 来推导U的类型。

// 需要注意的是：U 是在行内声明的，没有跟 T 在类型别名中声明。如果在类型别名的地方声明了
// 会怎样呢？
 type ElementType<T, U> = T extends U[] ? U : T
 type B2 = ElementType<number[]> // Error， ...ruquires 2 type argument(s)
 // 错误提示需要两个参数，但是如果传入两个参数的话就违背了ElementType 设计的初衷了

type SecondArgs<F> = F extends (a: any, b: infer R) => any ? R : never

type F = typeof Array['prototype']['slice']

type FA = SecondArgs<F> // number | undefined
// 可以明确知道 [].slice()的第二个参数是 number｜undefined, 不信的话可以去看下ts 声明
// 文件的源码