red润
red润

Typescript第六章 类型进阶(类型之间的关系，全面性检查，对象类型进阶，函数类型进阶，条件类型等)

文章目录

  • 第六章 类型进阶
    • 6.1 类型之间的关系
      • 6.1.1 子类型和超类型
      • 6.1.2 型变
        • 结构和数组型变
        • 函数型变
      • 6.1.3 可赋值性
      • 6.1.4 类型拓宽
        • const类型
        • 多余属性检查
      • 6.1.5 细化
        • 辨别并集类型
    • 6.2 全面性检查
    • 6.3对象类型进阶
      • 6.3.1 对象类型的类型运算符
        • “键入”运算符
        • keyof运算符
      • 6.3.2 Record类型
      • 6.3.3 映射类型
        • 内置的映射类型
          • `Record`
          • `Partial`
          • `Required`
          • `Readonly`
          • `Pick`
          • 6.3.4 伴生对象模式
          • 6.4 函数类型进阶
            • 6.4.1 改善元组的类型推导
            • 6.4.2 用户定义的类型防护措施
          • 6.5 条件类型
            • 6.5.1 条件分配
            • 6.5.2 infer关键字
            • 6.5.3 内置的条件类型
              • Exclude
              • Extract
              • NonNullable
              • ReturnType
              • InstanceType
              • Exclude
          • 6.6 解决方法
            • 6.6.1 类型断言
            • 6.6.2 非空断言
            • 6.6.3 明确赋值断言
          • 6,7 模拟名义类型（隐含类型（opaque type））
          • 6.8 安全的扩展原型

            • 第六章 类型进阶

            Typescript一流的类型系统支持强大的类型层面编程特性，Typescript的类型系统不仅具有极强的表现力，易于使用个，而且可通过简介明了的方式声明类型约束和关系，并且多数时候能够自动为我们推导。

            本节首先讨论Typescript中的子类型，可赋值性，型变和类型拓展，加深你对前几章的认识。然后，深入说明Typescript基于控制流的类型检查特性，包括类型细化和全面性检查。

            接下来讨论类型层面的一些高级编程特性：“键入”和映射对象类型，使用条件类型，自定义类型防护措施，以及类型断言和明确赋值断言等。

            最后，介绍一些高级模式，尽量提升类型的安全性：伴生对象模式，改善元组的类型推导，模拟名义类型，以及安全扩展原型的方式。

            6.1 类型之间的关系

            首先讨论Typescript中的类型关系

            6.1.1 子类型和超类型

            3.1节讲过可赋值性。我们已经了解了Typescript提供的多数类型，现在可以深挖一些细节。

            子类型：给定两个类型A和B，假设B是A的子类型，那么在需要A的地方都可以放心使用B

            • Array是Object的子类型
            • Tuple是Array的子类型
            • 所有类型都是any的子类型
            • never是所有类型的子类型
            • 如果Bird类扩展自Animal类，那么Bird是Animal的子类型

            超类型正好和子类型相反

            6.1.2 型变

            多数时候，很容易判断A类型是不是B类型的子类型。例如：对number，string等类型来说，（number包含在并集类型number|string中，那么number必定是他的子类型）

            但是对**参数化类型（泛型）**和其他较为复杂的类型来说，情况不那么明晰。

            • 什么情况下Array是Array的子类型
            • 什么情况下结构A是结构B的子类型
            • 什么情况下函数(a:A)=>B是函数(c:C)=>D的子类型

            如果一个类型中包含其他类型（即带有类型参数的类型，如Array;带有字段的结构，如{a:number};或者函数，如(a:A)=>B）,使用上述规则很难判断谁是子类型。

            为了便于理解，本书作者引入了一套句法，以便使用简介且准确的语言讨论类型。这套句法不是有效的Typescript代码，只是为了使用一套语言讨论类型。

            • A<:B指 “A类型是B类型的子类型，或者为同类类型”
            • A>:B指“A类型是B类型的超类型，或者为同类类型”

            结构和数组型变

            type ExistingUser = {
    id:number
    name:string
}
type NewUser = {
    name:string
}
// 假设我们写了一个这样的代码
function deleteUser(user:{id?:number,name:string}){
    delete user.id
}
let existingUser:ExistingUser = {
    id:12345,
    name:"red润"
}
let newUser:NewUser = {
    name:"redrun"
}
deleteUser(existingUser)
existingUser.id //类型(property) id: number (值为undefined)

            deleteUser接受一个对象，类型为{id?:number,name:string}，我们传入的existingUser对象是{id:number,name:string}类型，注意，id属性的类型（number）是预期类型（number|undefined）的子类型。因此，{id:number,name:string}作为一个整体是{id?:number,name:string}的子类型，所以Typescript不会报错。

            这里有个安全问题：把ExistingUser类型的值传给deleteUser函数之后，Typescript不知道用户的id已经被删除，所以调用deleteUser(existingUser)把该属性删除之后再读取existingUser.id,Typescript认为existingUser.id是number类型。

            显然，在预期某个类型的超类型的地方使用该类型(子类型)是不安全的。由于破坏性更新（例如删除一个属性）在实际中很少见，所以Typescript放宽了要求，允许我们在预期某类型的超类型的地方使用那个类型。

            那么反过来，能不能子啊预期某类型的子类型的地方使用那个类型呢？

            添加一个旧用户，然后删除

            type ExistingUser = {
    id:number
    name:string
}
type NewUser = {
    name:string
}
type LegacyUser = {
    id?:number|string
    name:string
}
// 假设我们写了一个这样的代码
function deleteUser(user:{id?:number,name:string}){
    delete user.id
}
let existingUser:ExistingUser = {
    id:12345,
    name:"red润"
}
let newUser:NewUser = {
    name:"redrun"
}
let legacyUser:LegacyUser = {
    id:4567,
    name:"oldrun"
}
deleteUser(existingUser)

existingUser.id //(property) id: number

deleteUser(legacyUser)// 报错

            我们传入的结构中有一个属性的类型是预期类型的超类型，Typescript报错了，这是因为id的类型是string|number|undefined,而deleteUser函数只处理了number|undefined的情况。

            Typescript的行为是这样的:对预期的结构，还可以使用属性的类型<:预期类型的结构，但是不能传入属性的类型是预期类型的超类型的结构。

            在类型上，我们说Typescript对结构（对象和类）的属性类型进行了 协变（covariant）。

            也就是说，如果想保证A对象可赋值给B对象，那么A对象的每个成员都必须<:B对象的对应属性。

            其实，协变只是型变的四种方式之一：

            • 不变
              • 只能T
            • 协变
              • 可以是<:T
            • 逆变
              • 可以是>:T
            • 双变
              • 可以是<:T或>:T

            在Typescript中，每个复杂类型的成员都会进行协变，包括对象，类，数组，和函数的返回类型。不过有个例外：函数的参数类型进行逆变

            设计Typescript时，设计人员在易用性和安全行做出了权衡，不允许型变对象的属性类型。例如

            // Obj的类型undefined|string|number
interface Obj {
 name?:string|number
}
//实现Obj只能设置一个类型，不能多不能少！！！（这就是对象的属性类型不允许协变）
let obj:Obj = {
 name:undefined
}

            但是会导致类型系统用起来很繁琐，而且会禁止实际安全的操作（假如deleteUser没有删除id，完全可以传入预期类型的超类型，比如我们给id传入一个字符串类型，但是Typescript不支持）

            函数型变

            如果函数A的参数数量小于或等于函数B的参数数量，而且满足下面条件，那么函数A是函数B的子类型：

            1. 函数A的this类型未指定，或者>:函数B的this类型
            2. 函数A的各个参数的类型>:函数B的相应参数。
            3. 函数A的返回类型<:函数B的返回类型
            class Animal{}
class Bird extends Animal{
    chirp(){}
}
class Crow extends Bird {
    caw(){}
}

function chirp(bird:Bird):Bird{
    bird.chirp()
    return bird
}
chirp(new Animal)// 报错 函数参数类型逆变
chirp(new Bird)
chirp(new Crow)

            函数返回类型的协变指一个函数是另一个函数的子类型，即一个函数的返回类<:另一个函数的返回类型。

            那么参数的类型呢

            function clone(f:(b:Bird)=>Bird):void{
    let parent = new Bird
    let babyBird = f(parent)
    babyBird.chirp()
}
function animaToBird(a:Animal):Bird{
    // 
    return new Bird
}
function crowTBird(c:Crow):Bird{
    return new Bird
}
clone(animaToBird)
clone(crowTBird)//报错

            为了保证一个函数可赋值给另一个函数，该函数的参数类型（包括this）都要>:另一个函数相应参数的类型。

            函数不对参数和this的类型做型变。一个函数是另一个函数的子类型，必须保证该函数的参数和this的类型>:另一个函数相应参数的类型。

            我们不用记诵这些规则，代码编辑器能够很好的提示。

            6.1.3 可赋值性

            子类型和超类型关系是静态类型语言的核心概念，对理解可赋值性也十分重要（可赋值性指在判断需要B类型的地方可否使用A类型时才用的规则）。

            1. 如果A是B的子类型，那么需要B的地方也可以使用A
            2. A是any

            6.1.4 类型拓宽

            类型扩宽（type widening）是理解Typescript类型推导机制的关键。一般来说，Typescript在推导类型时会方宽要求，故意推导一个更宽泛的类型，而不限定为某个具体的类型。

            声明变量时如果允许以后修改变量的值（let，var），变量的类型将拓宽，从字面值放大到包含该字面量的基类型

            let a = "x" // string

var c = ture // boolean

// 不可变不一样
const a = 'x' // 'x'
const b = 3 // 3

            我们可以显示注解类型，防止类型被拓宽：

            let a:'x' = 'x' // 'x'
// b重新为a拓宽
const a = 'x'
let b = a // string

// 不让重新扩展
const c:'x' = 'x'
let d = c // 'x'

            初始化null或undefined的变量扩展为any:

            let a = null // any
a = 3 // any

            const类型

            const类型可以防止类型拓宽。这个类型用作类型断言（6.6.1节）：

            let a = {x:3}// {x:number}
let c = {x:3} as const // {readonly x:3}

            const不仅能组织拓宽类型，还将递归把成员设为readonly，不管数据结构的嵌套层级有多深：

            let d = [1,{x:2}] // (number|{x:number})
let e = [1,{x:2}] as const // readonly [1,readonly x:2]

            如果想让Typescript推导的类型尽量窄一些，请使用 as const

            多余属性检查

            Typescript检查一个对象是否可赋值给另一个对象类型时，也涉及到类型拓宽。

            type Options = {
    baseUrl:string
    cacheSize?:number
    tier?:'prod'|'dev'
}
class API {
	constructor(private options:Options){}
}
new API({
    baseURL:"xxxx",
    tier:"prod"
})
// 如果有一个参数拼错了
new API({
    baseURL:"xxx"
    tierr:"prod"
})// 直接报错

            这是编写JavaScript代码经常遇到的问题，Typescript能够捕获这种问题。可是，对象类型的成员会做协变，Typescript是如何捕获这种问题的呢？

            过程是这样

            • 预期的类型{baseURL:string,cacheSize?:number,tier?:’prod’|‘dev’}/
            • 传入的类型{baseURL:string,tierr:string}
            • 传入的类型是预期类型的子类型，可是不知为何，Typescript知道要报告错误。

            Typescript之所以能够捕获这样的问题，是因为他会做多余属性检查，具体过程是：尝试把一个新鲜对象字面量类型（fresh object literal type）T赋值给另一个类型U时，如果T有不在U中的属性，Typescript将报错。

            新鲜对象字面量类型指的是Typescript从对象字面量中推导出来的类型。

            如果对象字面量有类型断言（6.6.1节），或者把对象字面量赋值给变量，那么新鲜字面量类型将扩宽为常规的对象类型，也就不能称其为新鲜对象字面量类型。

            6.1.5 细化

            Typescript才用的基于流的类型推导，这是一种符号执行，类型检查器子啊检查代码过程中利用流程语句（if，？，||和switch）和类型查询（如typeof，instanceof和in）细化类型。这是一个极其便利的特性，但是很少有语言支持。

            type Unit = 'cm'|'px'|'%'

let units:Unit[] = ['cm','px','%']

// 检查各个单位，如果没有匹配返回null
function parseUnit(value:string):Unit|null{
    for(let i=0;i

            我们可以使用parseUnit函数解析用户传入的宽度值。width的值可能是一个数字（此时假定单位为像素），可能是一个带单位的字符串，也可能是null或undefined。

            下述代码对象类型做了多次细化

            type Unit = 'cm'|'px'|'%'

let units:Unit[] = ['cm','px','%']

// 检查各个单位，如果没有匹配返回null
function parseUnit(value:string):Unit|null{
    for(let i=0;i
            1. 与null做不严格相等的等值检查便能在遇到JavaScript值null和undefined返回true。width的类型变成string|number
            2. typeof运算符查询值的类型。width的类型变成string
            3. if如果为真表示有单位，否则必为null
            4. 返回null。

            JavaScript有七个假值，null,undefined,NaN,0,-0,””和false。其他均为真值

            辨别并集类型

            Typescript能跟随你的脚步细化类型

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

type UserEvent = UserTextEvent|UserMouseEvent

function handle(event:UserEvent){
    if(typeof event.value === 'string'){
        event.value // string
        // do something
        return
    }
    event.value // [number,number]

}

            Typescript知道，在if中event.value肯定是一个字符串（因为使用typeof做了检查）。这意味着，在if块后面，event.value肯定是[number,number]的元组类型，因为if后有return。

            如果事情变得复杂起来

            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.value // string
        event.target // HTMLInputElement | HTMLElement!!!
        // do something
        return
    }
    event.value // [number,number]
    event.target //  HTMLInputElement | HTMLElement!!!
}

            event.value的类型可以细化，但是event.value却不可以。handle函数的参数是UserEvent类型，可能传入UserTextEvent|UserMouseEvent类型的值。由于并集类型的成员有可能重复，因此Typescript需要一种更加可靠的方式，明确并集类型的具体情况。

            为此，要使用一个字面量类型标记并集类型的各种情况。一个好的标记要满足一下情况：

            • 在并集类型个组成部分的相同位置上。如果是对象类型的并集，使用相同的字段；如果是元组类型的并集，使用相同的索引。实际使用中，带标记的并集类型通常为对象类型。
            • 使用字面量类型（字符串，数字，布尔值等字面量）。可以混用不同的字面量类型，不过最好使用 同一种类型。通常，使用字符串字面量类型。
            • 不要使用泛型。标记不应该有任何泛型参数
            • 要互斥（即在并集类型中是独一无二的）

            更新代码

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

type UserEvent = UserTextEvent|UserMouseEvent

function handle(event:UserEvent){
    if(event.type === 'TextEvent'){
        event.value // string
        event.target // HTMLInputElement
        // do something
        return
    }
    event.value // [number,number]
    event.target //  HTMLElement!!!
}

            现在，根据标记字段（event.type)的值细化event,Typescript知道，在if分支中event必为UserTextEvent类型。由于标记是独一无二的，所以Typescript知道二者时互斥的。

            如果函数要处理并集类型的不同情况，应该使用标记。例如：在处理Flux动作，Redux规约器或React的useReducer时，其作用十分巨大。

            6.2 全面性检查

            全面性检查（也称穷尽性检查）是类型检查器所做的一项检查，为的是确保所有情况被覆盖了。这个概念源自模式匹配的语言，例如Haskell,OCaml等。

            tsconfig.json noImplictReturns将提示没有return

            Typescript在很多情况下，都会做全面性检查，如果发现缺少某种情况会提醒你，例如

            type Weekday = 'Mon'|'Tue'|'Wed'|'Thu'|'Fri'
type Day = Weekday | 'Sat' | 'Sun'

function getNextDay(w:Weekday):Day{// 报错
    switch(w){
        case "Mon": return "Tue"
    }
}

            很明显，这里遗漏了好多天。Typescript能捕获这个错误。

            错误提示我们可能遗留了某些情况，应该在最后加上一个兜底return语句，返回‘Sat’等值，也可能预示我们要调整函数的返回类型，改为Day|undefined。为每一天都加上case语句之后，这个错误将消失。由于我们注解了函数的返回类型，而没有分支能保证返回该类型的值，所以Typescript发出提醒。

            function isBig(n:number){// Not all code paths return a value.
    if(n>=100){
        return true
    }

}

            6.3对象类型进阶

            对象是JavaScript的核心，为了以安全的方式描述和处理对象，Typescript提供了一系列方式。

            6.3.1 对象类型的类型运算符

            还记得“并集类型和交集类型”一节介绍的|和&类型运算符。Typescript不只这两个。下面再介绍几个处理对象结构的类型运算符。

            “键入”运算符

            假设有个复杂的嵌套类型，描述从社交媒体API中得到的GraphQL API相应

            type APIResponse = {
    user:{
        userId:string
        friendList:{
            count:number
            friends:{
                firstName:string
                lastName:string
            }[]
        }
    }
}
function getAPIResponse():Promise{
    return Promise.resolve({
        user:{
            userId:"",
            friendList:{
                count:12,
                friends:[{firstName:"red",lastName:"run"}]
            }
        }
    })
}
type FriendList = APIResponse['user']['friendList']

function renderFriendList(friendList:FriendList){
    
}

            任何结构（对象，类构造方法或类的实例）和数组都可以“键入”，例如。单个好友的类型可以这样声明：

            type Friend = FriendList['friends'][number]

            number是“键入”数组类型的方式，若是元组，使用0,1或其他数字字面量类型表示想“键入”的索引。

            “键入”的句法与JavaScript在对象中查找字段的句法类似，这是故意为之。既然能在对象中查找值，那么也能在结构中查找类型。但是要注意，通过“键入”查找属性的类时，只能使用括号表示法，不能使用点号表示法

            keyof运算符

            keyof运算符获取对象所有键的类型，合并为一个字符串字面量类型。

            type ResponseKeys = keyof APIResponse // user{}
type UserKyes = keyof APIResponse['user'] //"friendList" | "userId"
type FriendListKeys = keyof APIResponse['user']['friendList'] // "friends" | "count"

            把“键入”和keyof运算符结合起来，可以实现对类型安全的读值函数，读取对象中指定键的值：

            function get(o: O, k: K): O[K] {// 3.
    return o[k]
}
console.log(get({ name: "red润",age:17,ok:true }, "name"));// red润
            1. 函数的参数为一个对象O和一个键K
            2. keyof O是一个字符串字面量类型并集，表示o对象所有键。K类扩展这个并集（是该并集的子类型。
            3. O[K]的类型为在O中查找K得到的具体类型。接着2.说，如果K是‘name’那么在编译时get返回一个字符串；如果K是’age‘|’ok‘，那么get返回number|boolean.

            这两个类型运算符强大在于，可以准确安全的描述结构类型。。

            type ActiveityLog = {
    lastEvent: Date
    events: {
        id: string
        timestamp: Date
        type: 'Read' | 'Write'
    }[]
}

let activeityLog: ActiveityLog = {
    lastEvent: new Date(),
    events: [
        { id: "123", timestamp: new Date(), type: 'Read' },
        { id: "456", timestamp: new Date(), type: 'Write' }
    ]
}

type Get = {
    (o: O, k1: K1): O[K1]
    (o: O, k1: K1, k2: K2): O[K1][K2]
    (o: O, k1: K1, k2: K2, k3: K3): O[K1][K2][K3]
}

let get: Get = (object: any, ...keys: string[]) => {
    let result = object
    keys.forEach(k => result = result[k])
    return result
}

console.log(get(activeityLog, 'events'));
console.log(get(activeityLog, 'events', 0));
console.log(get(activeityLog, 'events', 0, 'id'));
// [
//     { id: '123', timestamp: 2023-07 - 30T11: 55: 54.349Z, type: 'Read' },
//     { id: '456', timestamp: 2023-07 - 30T11: 55: 54.349Z, type: 'Write' }
// ]

// { id: '123', timestamp: 2023-07 - 30T11: 55: 54.349Z, type: 'Read' }

// 123

            6.3.2 Record类型

            Typescript内置的Record类型用于描述有映射关系的对象。

            type Obj = {
    name:string,
    age:number,
    gender:boolean
}
let a:keyof Obj = 'name'
console.log(a);

let b:Record = {
    name:'ddd',
    age:15,
    gender:"false"
}
console.log(b);// { name: 'ddd', age: 15, gender: 'false' }
let c:keyof typeof b = "name"
console.log(c);// name

            与常规的对象索引签名相比，Record提供了更多的便利：使用常规的索引签名可以约束对象中值的类型，不过键只能用string，number，或symbol类型；使用Record还可以约束对象的键为string和number的子类型。

            6.3.3 映射类型

            Typescript还提供了一种更强大的方式，即映射类型（mapped type)，使用这种方式声明更安全。

            type Weekday = 'Mon'|'Tue'|'Wed'|'Thu'|'Fri'
type Day = Weekday | 'Sat' | 'Sun'

let nextDay:{[K in Weekday]:Day} = {
    Mon:"Tue",
    Tue:"Wed",
    Wed:"Thu",
    Thu:"Fri",
    Fri:"Sat",
}

            映射类型使用独特的句法。与索引签名相同，一个对象最多有一个映射类型：

            type MyMappedType = {
    [key in UnionType]:ValueType
}

            其实Typescript内置的Record类型也是使用映射类型实现的：

            type Record = {
    [P in K]:T
}

            映射类型的功能比Record强大，在指定对象的键和值的类型以外，如果结合”键入“类型，还能约束特定键和值是什么类型。

            下面举几个例子说明使用映射类型可以做哪些事：

            type Account = {
    id:number
    isEmployee:boolean
    notes:string[]
}
// 所有字段都是可选的
type OptionalAccount = {
    [K in keyof Account]?:Account[K]// 1.
}
// 所有字段都也为null
type NullableAccount = {
    [K in keyof Account]:Account[K]|null // 2.
}
// 所有字段都是只读的
type ReadonlyAccount = {
    readonly [K in keyof Account]:Account[K]// 3.
}
// 所有字段都是可写的（等同于Account)
type Account2 = {
    -readonly[K in keyof ReadonlyAccount]:Account[K] // 4.
}
// 所有字段都是必须得（等同于Account)
type Account3 = {
    [K in keyof OptionalAccount]-?:Account[K]// 5.
}
            1. 新建对象类型OptionalAccount,与Account建立映射，在此过程中把各个字段标记为可选的。
            2. 新建对象类型NullableAccount,与Account建立映射，在此过程中为每个字段增加可选值null。
            3. 新建对象类型ReadonlyAccount，与Account建立映射，把各字段标记为只读（即可读不可写）
            4. 字段可以标记为可选（？）或只读（readonly），也可以把这个约束去掉。使用减号（-）运算符（一个特殊的运算符，只对映射类型可用）可以把？和readonly撤销，分别把字段还原为必须得和可写的。这里新建一个对象类型Account2,与ReadonlyAccount建立映射，使用减号(-)运算符把readonly修饰符去掉，最终得到的类型等同于Account.
            5. 新建对象类型Account3,与OptionalAccount建立映射，使用减号（-）运算符可以把可选（？）运算符去掉，最终得到的类型等同于Account.

            减号（-）运算符有个对应的（+）运算符。一般不直接使用加好运算符，因为它通常蕴含在其他运算符中。在映射类型中，readonly等效于+readonly，？等效于+？、+的存在只是为了确保整体协调。

            内置的映射类型

            前一节讨论的映射类型非常有用，Typescript内置了一些

            Record

            键的类型为Keys，值的类型为Values的对象。

            Partial

            把Object中的每个字段都标记为可选的

            Required

            把Object中的每个字段都标记为必须得

            Readonly

            把Object中的每个字段都标记为只读的

            Pick

            返回Object的子类型，只含指定的Keys

            6.3.4 伴生对象模式

            伴生对象源自Scala，目的是把同名的对象和类配对在一起。在Typescript中也有类似的模式，而且作用相似，即把类型和对象配对在一起，我们也称之为伴生对象模式

            伴生对象模式是下面这样的：

            type Currency = {
    unit: "EUR" | "GBP" | "JPY" | "USD",
    value: number
}
let Currency:any = {
    DEFAULT: "USD",
    from(value:number,unit = Currency.DEFAULT):Currency{
        return {unit,value}
    }
}
console.log(Currency.DEFAULT);
console.log(Currency.from(123));


type Demo = {
    name:string
    test(name:string):boolean
}
let Demo = {
    name:"demo",
    test(name:Demo["name"]):boolean {
        return false
    },
}
Demo.test('a')

            Typescript中的类型和值分别在不同的命名空间中。10.4节将深入说明。这意味着，在同一个作用域中，可以有同名（这里的Currency)的类型和值。伴生对象模式在彼此独立的命名空间中两次声明相同的名称，一个是类型，另一个是值。

            这种模式有几个不错的性质。首先，可以把语义上归属为同一名称的类型和值放在一起。其次，使用方可以一次性导入二者。

            import {Currency} from './Currency'

let amountDue:Currency ={// 1.
    unit:'JPY',
    value:23344
}
let otherAmountDue = Currency.from(330,"EUR")// 2.
            1. 使用的类型是Currency
            2. 使用的是值Currency

            如果一个类型和一个对象在语义上 有关联，就可以使用伴生对象模式，由对象提供操作类型的使用方法。

            6.4 函数类型进阶

            本节讲述函数类型常用的几种高级技术。

            6.4.1 改善元组的类型推导

            Typescript在推导元组的类型时会放宽要求，推导的结果尽量宽泛，不在乎元组的长度和各位置的类型。

            let a = [1,true] //(number|boolean)[]

            然而，有时候我们希望推导的结果更严格一些，把上例中的a试作固定长度的元组，而不是数组。当然，我们可以使用类型断言把元组转换成元组类型（6.6.1节）,也可以使用as const断言（const类型）把元组标记为只读的，尽量收窄推导出的元组类型。

            我们可以利用剩余参数的类型方式，收窄推导结果，并标记为只读。

            function tuple(...ts:T//3.):T{//4.
    return ts//5.
}
let a = tuple(1,true) // [number, boolean]
            1. 声明tuple函数，用于构建元组类型（代替内置的[]语法）
            2. 声明一个类型参数T，他是unknown[]的子类型（表明T是任意类型的数组）
            3. tuple函数接受不定数量的参数ts.由于T描述的是剩余参数，因此Typescript导出的一个元组类型。
            4. tuple函数的返回类型与ts的推导结果相同
            5. 这个函数返回传入的参数。神奇之处全在类型中。

            6.4.2 用户定义的类型防护措施

            在某些情况下，比如函数的返回值，只说函数返回boolean还不够

            function isString(a:unknown):boolean{
    return typeof a === 'string'
}
let b = isString('a')// true
let c = isString(false)// false
console.log(b,c);

            看起来没问题，那么，在实际使用中，isString函数的效果如何

            function isString(a:unknown):boolean{
    return typeof a === 'string'
}
let b = isString('a')// true
let c = isString(false)// false
console.log(b,c);

function parseInput(input:string|number){
    let formattedInput:string
    if(isString(input)){
        formattedInput = input.toUpperCase()// 报错
    }
}

            细化类型时可以使用的typeof运算符（6.1.5节），在这里怎么不起作用了。

            类型细化的能力是有限的，只能细化当前作用域中变量的类型，一旦离开这个作用域，类型细化能力不会随之转移到新作用域中。

            isString函数返回一个布尔值，但是我们要让类型检查器知道，当返回的布尔值是true时，表明我们传给isString函数的是一个字符串。为此，我们要使用用户定义的类型防护措施：

            function isString(a:unknown):a is string{
    return typeof a === 'string'
}
let b = isString('a')// true
let c = isString(false)// false
console.log(b,c);

function parseInput(input:string|number){
    let formattedInput:string
    if(isString(input)){
        formattedInput = input.toUpperCase()
        console.log(formattedInput);
    }
}
parseInput("red润")

            类型防护措施是Typescript内置的特性，是typeof和instancecof细化类型的背后机制。可是有时我们需要自定义类型防护措施的能力，is运算符就起这个作用。如果函数细化了参数的类型，而且返回一个布尔值，我们可以使用用户定义的类型防护措施确保类型的细化能在作用域之间转移，在使用该函数的任何地方都起作用。

            用户定义的类型防护措施只限于一个参数，但是不限于简单的类型：

            type LegacyDialog = //
type Dialog = //
function isLegacyDialog(dialog:LegacyDialog|Dialog):dialog is LegacyDialog{
//}

            用户定义的类型防护措施不太常用，不过使用这个特性可以简化代码，提升代码的可重用性。如果没有这个特性，要在行内使用typeof和instanceof类型防护措施，而构建isLegacyDialog和isString之类的函数做同样的检查可实现更好的封装，提升代码的可读性。

            6.5 条件类型

            在Typescript的众多特性中，条件类型算是最独特的。概括的说，条件类型表达的是，“声明一个依赖类型U和V的类型T，如果U<:V，把T赋值给A否则，把T赋值给B”

            type IsString = T extends string//1.
    ? true// 2.
    : false// 3.
type A = IsString // true
type B = IsString // false
            1. 声明一个函数，有一个泛型T。这个条件类型中的“条件”时T extends string,即“T是不是string的子类型？”
            2. 如果T是string的子类型，得到的类型是true
            3. 否则，得到的类型为false

            注意，这里的句法和值层面的三元表达式差不多，只是现在位于类型层面。和三元表达式相似的是，条件类型可以嵌套。

            条件类型不限于只能在类型别名中使用，可以使用类型的地方几乎都能使用条件类型。包括类型别名，接口，类，参数的类型，以及函数和方法的泛型默认类型。

            6.5.1 条件分配

            这个类型 等价于
            string extends T ? A:B string extends T ?A:B
            `(string number)extends T?A:B`
            `(string number 
            type ToArray = T[]
type A = ToArray // number[]
type B = ToArray // (number|string)[]

type ToArray2 = T extends unknown ? T[]:T[]
type A = ToArray2 // number[]
type B = ToArray2 // (number|string)[]

            这样做有什么作用呢？可以安全地表达一些常见的操作

            我们知道，Typescript内置了计算两个类型交集的&运算符，还内置了计算两个类型并集的|运算符。下面我们来够键Without，计算在T中而不在U中的类型：

            type Without = T extends U ? never : T

type A = Without// number|string

            下面具体分析Typescript是如何实现的：

            1. 先分析输入的类型：type A = Without
            2. 把条件分配到并集中：type A = Without|Without|Without
            3. 带入Without定义，替换T和U:type A = (boolean extends boolean?never:boolean)|(number extends boolean?never:boolean)|(string extends boolean?never:boolean)
            4. 计算条件：type A = never|number|string
            5. 化简：type A = number|string

            如果条件类型没有分配性质，最终的结果将是never

            6.5.2 infer关键字

            条件类型的最后一个特性是可以在条件中声明泛型。在条件类型中声明泛型不使用这个句法，而使用infer关键字。

            下面声明一个条件类型ElementTpe，获取数组中元素的类型：

            // 获取数组中元素的类型： T[number]索引类型
type ElementType = T extends unknown[] ? T[number] : T
type A = ElementType<(number|string)[]> // string|number
type B = ElementType //string

            使用infer关键字可以重写为：

            type ElementType2 = T extends (infer U)[] ? U : T
type B = ElementType2 // number

            这里，ElementType和ElementType2是等价的。注意，infer子句声明了一个新的类型变量U，Typescript将根据传给ElementType2的T推导U的类。

            另外注意，U是在行内声明的，而没有和T一起在前声明。倘若在前面声明，结果如何？

            type ElementUgly = T extends U[] ? U : T;
type C = ElementUgly// 需要两个参数

            更加复杂的例子

            type SecondArg = 
F extends (a: any, b: infer B) => any ? B : never

// 获取Array.slice的类型
type F = typeof Array['prototype']['slice']
type A = SecondArg // number|undefined

            可见，[].slice的第二个参数是number|undefined类型。而且在编译时便可知晓这一点。

            6.5.3 内置的条件类型

            利用条件类型可以在类型层面表达一些强大的操作，Typescript自带了一些全局可用的条件类型

            Exclude

            和前面的Without类型，计算在T中而不在U中的类型：

            type A = number|string
type B = string
type C = Exclude// number

            Extract

            计算T中可赋值给U的类型：

            type A = number|string
type B = string
type C = Extract // string

            NonNullable

            从T中排除null和undefined

            type A = {a?:number|null}
type B = NonNullable// number

            ReturnType

            计算函数的返回类型(注意，不适用于泛型和重载的函数)

            type F = (a:number) = string
type R = ReturnType // string

            InstanceType

            计算类构造方法的实例类型

            type A = {new():B}
type B = {b:number}
type I = InstanceType // {b:number}

            type A = {
    new():{b:number}
}
class B {
    b:number;
    constructor(){
        this.b = 123
    }
}
let b:A = B
let c:B = new B()
console.log(c);

            Exclude

            和前面的Without类型，计算在T中而不在U中的类型：

            type A = number|string
type B = string
type C = Exclude// number

            6.6 解决方法

            有时候，我们没有足够的时间把所有类型都规划好，这时我们希望Typescript能相信我们，即便如此也是安全的。还有我们是从API中获取数据，而暂时还没有生成类型声明。

            Typescript提供了大量的特性，但是要少用。

            6.6.1 类型断言

            给定类型B，如果A<:B<:C,那么我们可以向类型检查器断定，B其实是A或C。注意：我们只能断定一个类型是自身的超类型或子类型，不能断定number是string，因为这两个类型毫无关系。

            Typescript为类型断言提供了两种句法：

            function formatInput(input:string){
    //
}
function getUserInput():string|number{
    return "" 
}
let input = getUserInput()

formatInput(input as string)// 1.
formatInput(input)//2.
            1. 使用断言（as)告诉Typescript，input是字符串，而不是string|number类型。如果想先测试formatInput函数，而且肯定getUserInput函数返回一个字符串，就可以这么做
            2. 类型断言的旧句法使用<>尖括号。这两种句法是相同的作用。

            优先使用as，<>尖括号和react中tsx语法冲突

            有时候，两个类型之间关系不明，无法断定具体类型，可以使用as any，

            显然，类型断言不安全，少用

            6.6.2 非空断言

            可为空的类型，即T|null或T|null|undefined类型，比较特殊，Typescript为此提供了专门的语法，用于断定类型为T，而不是null或undefined。

            type Dialog = {
    id?:string
}
function closeDialog(dialog:Dialog){
    if(!dialog.id){// 1.
        return
    } 
    setTimeout(()=>{// 2.
        removeFromDOM(
            dialog,
            document.getElementById(dialog.id) // 错误
        )
    })
}
function removeFromDOM(dialog:Dialog,element:Element){
    element.parentNode.removeChild(element) // 4.
    delete dialog.id
}
            1. 如果没有id就返回
            2. 在下一次时间循环时，删除对话框
            3. 身处一个箭头函数中，开始一个新作用域，Typescript不知道1.和2.之间的代码修饰了dialog，因此1.中所做的类型细化不起作用。
            4. 类似的，尽管我们知道对话框一定在dom中，而且绝对有父级dom，然而Typescript只知道element.parentNode的类型是Node|null

            Typescript提供特殊的句法！，确定不可能null|undefined

            type Dialog = {
    id?:string
}
function closeDialog(dialog:Dialog){
    if(!dialog.id){// 1.
        return
    } 
    setTimeout(()=>{// 2.
        removeFromDOM(
            dialog,
            document.getElementById(dialog.id!)! // 错误
        )
    })
}
function removeFromDOM(dialog:Dialog,element:Element){
    element.parentNode!.removeChild(element) // 4.
    delete dialog.id
}

            如果频繁使用非空断言，说明代码需要重构。

            type VisibleDialog = { id?: string }
type DestroyDialog = {}
type Dialog = VisibleDialog | DestroyDialog
function closeDialog(dialog: Dialog) {
    if (!("id" in dialog)) {
        return
    }
    setTimeout(() => {
        removeFromDOM(
            dialog,
            document.querySelector("#" + dialog.id)!
        )
    });
}
function removeFromDOM(dialog: VisibleDialog, element: Element) {
    if(element.parentElement){
        element.parentElement.removeChild(element)
        if( dialog.id ){
            delete dialog.id 
        }
    }
}

            确认dialog有id属性之后（表明是VisibleDialog类型），即使在箭头函数中Typescript也知道dialog引用没有变化：箭头函数与外面的dialog相同，因此结果细化随之转移，不会像前例那样不起作用。

            6.6.3 明确赋值断言

            Typescrip为非空断言提供了专门的句法，用于检查有没有明确赋值。

            我们可以使用明确赋值断言告诉Typescript，使用！

            let userId!:string// 表明已经明确赋值
fetchUser()
userId.toUpperCase() // OK
function fetchUser(){
    userId = globalCache.get('userId')
}

            与类型断言和非空断言一样，如果经常使用明确赋值断言，可能表示你的代码有问题。

            6,7 模拟名义类型（隐含类型（opaque type））

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

function queryForUser(id:UserId){
    //
}
let id:CompanyId = "ge3633ghg"
queryForUser(id);//ok!!!

            这时就体现名义类型的作用了。虽然Typescript不支持名义类型，但是我们可以使用类型烙印（type branding）技术模拟实现。使用类型烙印技术之前要稍微设置一下。

            首先，为各个名义类型合成类型烙印：

            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 queryForUser(id:UserId){
    //
}
let companyId = CompanyId("dgge")
let orderId = OrderId("geg8g8eg")
let userId = UserId("dgegeg")

queryForUser(userId)//ok
queryForUser(companyId)// error

            这种方式的优点是，降低了运行时的开销，没构建一个ID只需要调用一个函数，而且JavaScriptVM还有可能把函数放在行内。在运行时，一个ID就是一个字符串，烙印纯粹是一种编译时结构。

            同样，大多时候，没必要使用，烙印可以提高安全性。

            6.8 安全的扩展原型

            构建JavaScript时候，传统的观点是扩展内置的类型的原型不安全。

            虽然过去认为扩展原型不安全，但是有了Typescript提供的静态类型系统，可以放心扩展。

            function tuple<
    T extends unknown[] // 2.
>(...ts:T):T{
    return ts
}
interface Array {//1.
    zip(list: U[]): [T, U][],
}

Array.prototype.zip = function (
    this: T[],//2.
    list: U[]
): [T,U][] {
    return this.map((v, k) => {
        return tuple(v, list[k]) // 3.
    })
};
console.log([1,2,2].map(n=>n*2).zip(['a','b','c']));//[ [ 2, 'a' ], [ 4, 'b' ], [ 4, 'c' ] ]
            1. 首先让Typescript知道我们要为Array添加zip方法。我们利用接口合并特性（5.4.1节）增强全局接口Array,为这个全局定义的接口添加zip方法。这个文件没有显示导出或导入（意味着在脚本模式，10,2,3节），因此可以直接增强全局接口Array。我们声明一个接口，与现有的Array同名，Typescript负责将二者合并。如果文件在模块模式中（需要导入其他代码，便是这种情况），就要把全局扩展放在declare global类型声明中（11.1节），global是一个特殊的命名空间，包含所有全局定义的值（在模块模式中无需导入就能使用任何值，见第十章），可以增强模块模式文件中全局作用域内的名称。
            2. 然后在Array的原型上实现zip方法。这里使用this类型，以便让Typescript正确推导出调用zip方法的数组的类型T
            3. 由于Typescript推导出的映射函数的返回类型是(T|U)[]（Typescript没那么智能，意识不到这个元组的0索引始终是T，1索引始终是U)，所以我们使用tuple函数（6.4.1节）创建一个元组类型，而不使用类型断言。

            注意：我们声明的interface Array是对全局命名空间Array的增强，影响整个Typescript，即使没有导入文件，Typescript看来，[].zip方法也可用，为了增强Array.prototype,我们需要确保用到zip方法的文件都已经加载过了上面代码（zip.ts）,这样才能让Array.prototype上的zip方法生效。

            编辑tsconfig.json，把zip.ts排除在项目之外，这样使用方必须先import导入：

            {
	*exclude*:[
		"./zip.ts"
	]
}

            现在可以使用zip方法了

            import "./zip"
console.log([1,2,2].map(n=>n*2).zip(['a','b','c']));

            你可能感兴趣的:(Typescript学习指南,typescript,javascript,前端)

            • Long类型前后端数据不一致 igotyback 前端
              响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
            • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
              ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
            • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
              加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
            • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
              ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
            • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
              Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
            • node.js学习 小猿L node.jsnode.js学习vim
              node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
            • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
              这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
            • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
              在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
            • 博客网站制作教程 2401_85194651 javamaven
              首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
            • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
              在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
            • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
              最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
            • 补充元象二面 Redstone Monstrosity 前端面试
              1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
            • 微信小程序开发注意事项 jun778895 微信小程序小程序
              微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
            • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
              切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
            • 字节二面 Redstone Monstrosity 前端面试
              1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
            • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
              点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
            • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端vue.jsjavascript
              前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
            • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
              第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
            • 高性能javascript--算法和流程控制 海淀萌狗
              -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
            • 360前端星计划-动画可以这么玩 马小蜗
              动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
            • Vue + Express实现一个表单提交 九旬大爷的梦
              最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
            • vant-element-ts一起使用存在的问题 flynn_ 问题总结vue
              由于vant-ui与element-ui部分组件存在冲突，导致在vue-typescript中出现错误:Subsequentpropertydeclarationsmusthavethesametype.Property'$notify'mustbeoftype'ElNotification',butherehastype'Notify'.方案：一个全局导入，一个按需导入,避免冲突的组件同时使用，
            • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
              我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
            • Nginx从入门到实践(三) 听你讲故事啊
              动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
            • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
              Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
            • 前端知识点 ZhangTao_zata 前端javascriptcss
              下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
            • 第三十一节:Vue路由:前端路由vs后端路由的了解 曹老师
              1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
            • 华雁智科前端面试题 因为奋斗超太帅啦 前端笔试面试问题整理javascript开发语言ecmascript
              1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
            • 如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
              数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
            • 分布式锁和spring事务管理 暴躁的鱼 锁及事务分布式springjava
              最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
            • jquery实现的jsonp掉java后台 知了ing javajsonpjquery
              什么是JSONP？ 先说说JSONP是怎么产生的： 其实网上关于JSONP的讲解有很多，但却千篇一律，而且云里雾里，对于很多刚接触的人来讲理解起来有些困难，小可不才，试着用自己的方式来阐释一下这个问题，看看是否有帮助。 1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准； 2、
            • Struts2学习笔记 caoyong struts2
              SSH : Spring + Struts2 + Hibernate 三层架构(表示层,业务逻辑层,数据访问层) MVC模式 (Model View Controller) 分层原则:单向依赖，接口耦合 1、Struts2  =  Struts  + Webwork 2、搭建struts2开发环境    a>、到www.apac
            • SpringMVC学习之后台往前台传值方法 满城风雨近重阳 springMVC
              springMVC控制器往前台传值的方法有以下几种： 1.ModelAndView    通过往ModelAndView中存放viewName：目标地址和attribute参数来实现传参：      ModelAndView mv=new ModelAndView();  mv.setViewName="success
            • WebService存在的必要性？ 一炮送你回车库 webservice
              做Java的经常在选择Webservice框架上徘徊很久，Axis  Xfire Axis2 CXF ，他们只有一个功能，发布HTTP服务然后用XML做数据传输。 是的，他们就做了两个功能，发布一个http服务让客户端或者浏览器连接，接收xml参数并发送xml结果。 当在不同的平台间传输数据时，就需要一个都能解析的数据格式。 但是为什么要使用xml呢？不能使json或者其他通用数据
            • js年份下拉框 3213213333332132 java web ee
              <div id="divValue">test...</div>测试 //年份 <select id="year"></select> <script type="text/javascript"> window.onload =
            • 简单链式调用的实现技术 归来朝歌 方法调用链式反应编程思想
              在编程中，我们可以经常遇到这样一种场景：一个实例不断调用它自身的方法，像一条链条一样进行调用 这样的调用你可能在Ajax中，在页面中添加标签： $("<p>").append($("<span>").text(list[i].name)).appendTo("#result");   也可能在HQ
            • JAVA调用.net 发布的webservice 接口 darkranger webservice
              /** * @Title: callInvoke * @Description: TODO(调用接口公共方法) * @param @param url 地址 * @param @param method 方法 * @param @param pama 参数 * @param @return * @param @throws BusinessException
            • Javascript模糊查找 | 第一章 循环不能不重视。 aijuans Way
              最近受我的朋友委托用js+HTML做一个像手册一样的程序，里面要有可展开的大纲，模糊查找等功能。我这个人说实在的懒，本来是不愿意的，但想起了父亲以前教我要给朋友搞好关系，再加上这也可以巩固自己的js技术，于是就开始开发这个程序，没想到却出了点小问题，我做的查找只能绝对查找。具体的js代码如下： function search(){ var arr=new Array("my
            • 狼和羊，该怎么抉择 atongyeye 工作
              狼和羊，该怎么抉择 在做一个链家的小项目，只有我和另外一个同事两个人负责，各负责一部分接口，我的接口写完，并全部测联调试通过。所以工作就剩下一下细枝末节的，工作就轻松很多。每天会帮另一个同事测试一些功能点，协助他完成一些业务型不强的工作。 今天早上到公司没多久，领导就在QQ上给我发信息，让我多协助同事测试，让我积极主动些，有点责任心等等，我听了这话，心里面立马凉半截，首先一个领导轻易说
            • 读取android系统的联系人拨号 百合不是茶 androidsqlite数据库内容提供者系统服务的使用
                     联系人的姓名和号码是保存在不同的表中,不要一下子把号码查询来,我开始就是把姓名和电话同时查询出来的,导致系统非常的慢   关键代码:     1, 使用javabean操作存储读取到的数据 package com.example.bean; /** * * @author Admini
            • ORACLE自定义异常 bijian1013 数据库自定义异常
              实例： CREATE OR REPLACE PROCEDURE test_Exception ( ParameterA IN varchar2, ParameterB IN varchar2, ErrorCode OUT varchar2 --返回值,错误编码 ) AS /*以下是一些变量的定义*/ V1 NUMBER; V2 nvarc
            • 查看端号使用情况 征客丶 windows
              一、查看端口 在windows命令行窗口下执行： >netstat -aon|findstr "8080" 显示结果： TCP     127.0.0.1:80         0.0.0.0:0    &
            • 【Spark二十】运行Spark Streaming的NetworkWordCount实例 bit1129 wordcount
              Spark Streaming简介   NetworkWordCount代码   /* * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreements. See the NOTICE file distributed with
            • Struts2 与 SpringMVC的比较 BlueSkator struts2spring mvc
              1. 机制：spring mvc的入口是servlet，而struts2是filter，这样就导致了二者的机制不同。 2. 性能：spring会稍微比struts快。spring mvc是基于方法的设计，而sturts是基于类，每次发一次请求都会实例一个action，每个action都会被注入属性，而spring基于方法，粒度更细，但要小心把握像在servlet控制数据一样。spring
            • Hibernate在更新时，是可以不用session的update方法的(转帖） BreakingBad Hibernateupdate
              地址：http://blog.csdn.net/plpblue/article/details/9304459 public void synDevNameWithItil() {Session session = null;Transaction tr = null;try{session = HibernateUtil.getSession();tr = session.beginTran
            • 读《研磨设计模式》-代码笔记-观察者模式 bylijinnan java设计模式
              声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; import java.util.Observable; import java.util.Observer; /** * “观
            • 重置MySQL密码 chenhbc mysql重置密码忘记密码
              如果你也像我这么健忘，把MySQL的密码搞忘记了，经过下面几个步骤就可以重置了（以Windows为例，Linux/Unix类似）： 1、关闭MySQL服务 2、打开CMD，进入MySQL安装目录的bin目录下，以跳过权限检查的方式启动MySQL mysqld --skip-grant-tables  3、新开一个CMD窗口，进入MySQL mysql -uroot  
            • 再谈系统论，控制论和信息论 comsci 设计模式生物能源企业应用领域模型
                                         再谈系统论，控制论和信息论     偶然看
            • oracle moving window size与 AWR retention period关系 daizj oracle
              转自： http://tomszrp.itpub.net/post/11835/494147 晚上在做11gR1的一个awrrpt报告时,顺便想调整一下AWR snapshot的保留时间,结果遇到了ORA-13541这样的错误.下面是这个问题的发生和解决过程. SQL> select * from v$version; BANNER -------------------
            • Python版B树 dieslrae python
              话说以前的树都用java写的,最近发现python有点生疏了,于是用python写了个B树实现,B树在索引领域用得还是蛮多了,如果没记错mysql的默认索引好像就是B树... 首先是数据实体对象,很简单,只存放key,value class Entity(object): '''数据实体''' def __init__(self,key,value)
            • C语言冒泡排序 dcj3sjt126com 算法
              代码示例： # include <stdio.h> //冒泡排序 void sort(int * a, int len) { int i, j, t; for (i=0; i<len-1; i++) { for (j=0; j<len-1-i; j++) { if (a[j] > a[j+1]) // >表示升序
            • 自定义导航栏样式 dcj3sjt126com 自定义
              -(void)setupAppAppearance { [[UILabel appearance] setFont:[UIFont fontWithName:@"FZLTHK—GBK1-0" size:20]]; [UIButton appearance].titleLabel.font =[UIFont fontWithName:@"FZLTH
            • 11.性能优化-优化-JVM参数总结 frank1234 jvm参数性能优化
              1.堆 -Xms --初始堆大小 -Xmx --最大堆大小 -Xmn --新生代大小 -Xss --线程栈大小 -XX:PermSize  --永久代初始大小 -XX:MaxPermSize  --永久代最大值 -XX:SurvivorRatio --新生代和suvivor比例,默认为8 -XX:TargetSurvivorRatio --survivor可使用
            • nginx日志分割 for linux HarborChung nginxlinux脚本
              nginx日志分割 for linux 默认情况下，nginx是不分割访问日志的，久而久之，网站的日志文件将会越来越大，占用空间不说，如果有问题要查看网站的日志的话，庞大的文件也将很难打开，于是便有了下面的脚本   使用方法，先将以下脚本保存为 cutlog.sh，放在/root 目录下，然后给予此脚本执行的权限   复制代码代码如下: chmo
            • Spring4新特性——泛型限定式依赖注入 jinnianshilongnian springspring4泛型式依赖注入
              Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
            • centOS安装GCC和G++ liuxihope centosgcc
              Centos支持yum安装，安装软件一般格式为yum install .......，注意安装时要先成为root用户。 按照这个思路，我想安装过程如下： 安装gcc：yum install gcc 安装g++： yum install g++ 实际操作过程发现，只能有gcc安装成功，而g++安装失败，提示g++ command not found。上网查了一下，正确安装应该
            • 第13章 Ajax进阶（上） onestopweb Ajax
              index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
            • How to determine BusinessObjects service pack and fix pack blueoxygen BO
              http://bukhantsov.org/2011/08/how-to-determine-businessobjects-service-pack-and-fix-pack/   The table below is helpful. Reference   BOE XI 3.x 12.0.0. y BOE XI 3.0 12.0. x. y BO
            • Oracle里的自增字段设置 tomcat_oracle oracle
              　大家都知道吧，这很坑，尤其是用惯了mysql里的自增字段设置，结果oracle里面没有的。oh，no 　　我用的是12c版本的，它有一个新特性，可以这样设置自增序列，在创建表是，把id设置为自增序列 create table t ( id 　　 　　 number generated by default as identity (start with 1 increment b
            • Spring Security（01）——初体验 yang_winnie springSecurity
              Spring Security（01）——初体验     博客分类： spring Security Spring Security入门安全认证        首先我们为Spring Security专门建立一个Spring的配置文件，该文件就专门用来作为Spring Security的配置