TypeScript 中你可能会忽略的细节

let a: string = 'hello ts' // 显示注解声明let b = 'hello ts' // ts自动推导type A = string // 类型别名interface Person { // 接口    name: string    age: number    count: number    friends: {        name: string        age: number        address: string    }[]}interface Shinji extends Person {    Auto: string}enum Weekday { // 枚举    Mon,    Tue,    Wed,    ....}let tuple:[number, string] = [1, '2'] // 元组
interface Nerv {    attack(target: string): void}class EVA implements Nerv { // 类与接口实现implements    private readonly RobotType: string = 'Zero'    attact(target: string) {        console.log(target)    }}

let a = true // booleanconst 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.Chineselet 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.Chineselet 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) // trueset.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 被绑定为 numberfilter([1, 2, 3], _ => _ > 2)// 范型 T 被绑定为 stringfilter(['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 此函数返回的是一个 数字或者 nullfunction returnNumOrNull(x: number) {    if (number < 10) return x    return null}// never 此函数返回的是 neverfunction 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.tstype 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.tsimport { Currency } from './a.ts'let amount: Currency = {    unit: 'CNY',    value: 79729}const c: Currency = Currency.from(100, 'EUR')

// zip.tsinterface 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 = stringtype OrderId = stringtype UserId = stringtype Id = CompanyId | OrderId | userId
// 这里有个查找用户id 的方法, 我们明确说明了 queryUserId方法需要传入的参数类型为UserIdfunction 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 | UserIdfunction 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}

// 内置Recordtype 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]: Ulet 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]}// 所有字段都为nulltype NullableAccount = {  [K in keyof Account]?: Account[K] | null}// 所有字段都是可读的type ReadonlyAccount = {  readonly [K in keyof Account]: Account[K]}// 所有字段都是可写的 等同于Accounttype WritableAccount = {  -readonly [K in keyof Account]: Account[K]}// 所有字段都是必须的，等同于Accounttype 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 : Ttype 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 声明// 文件的源码