分类 学习 下的文章 - 浮川的小窝

初窥typescript 目录概览列表项目TS中的一些符号! 断言操作符?. 链判断运算符TS中的一些关键词typeinterfacetypeofkeyofinTS中的一些内置类型Partial 将类型的属性变成可选Required将类型的属性变成必选Pick 从某个类型中挑出一些属性出来RecordMutable 将类型的属性变成可修改Readonly 类型的属性变成只读ReturnType 用来得到一个函数的返回值类型[card-default width="100%" label="! 断言操作符"]! 的作用是断言某个变量不会是 null/undefined，告诉编辑器停止报错。const obj = const a = obj!.name;// 假设 obj是你从后端获取的获取确定 obj.name 一定是存在的且不是null/undefined，使用! 只是消除编辑器报错，不会对运行有任何影响。属性或者参数中使用 !，表示强制解析（告诉 typescript 编译器，这里一定有值）;变量后使用 !: 表示类型推荐排除 null/undefined。[/card-default][card-default width="100%" label="?. 链判断运算符"]const orderId = response.result.data.orderId;上面这种写法，很容易出现这种问题 orderId is undefined，稍微有些经验的我们立马就能想到，肯定是代码中 response.result.data 为 null 或者 undefined ，这样，你肯定获取不到 orderId。所以经验丰富的我们在遇到获取层级比较多的对象的时候，一般都是像下面这样写。正确的写法const orderId = (response && response.result && response.result.data && response.result.data.orderId) || ''我们可以使用 ?. 来简化上面的代码。const orderId = response?.result?.data?.orderId || ''上面代码使用了?.运算符，直接在链式调用的时候判断，左侧的对象是否为null或undefined。如果是的，就不再往下运算，而是返回undefined。?. 支持如下语法obj?.prop // 对象属性obj?.[expr] // 对象属性arr?.[index] // 获取数据中 index 下标对应的值func?.(...args) // 函数或对象方法的调用[/card-default][card-default width="100%" label="type 类型别名用来给一个类型起个新名字"]type类型声明:type SetUser = (name: string, age: number) =>void;类型别名常用于联合类型（联合类型表示取值可以为多种类型中的一种），比如常见的如下写法type UploadType = 'drag' | 'select';interface 和 type 的用法其实差不多，interface 也是用来定义类型的interface SetUser = type和interface的区别都支持拓展，但是语法不同interface Name interface User extends Name type Name = type User = Name & ;typeof 可以获取一个变量的声明类型在 JavaScript 中， typeof 可以判断一个变量的基础数据类型， 在 TS 中，它还可以获取一个变量的声明类型const obj = ;type Foo = typeof obj;type Foo = type Obj = type Foo = keyof obj;//keyof可以获取一个对象接口的所有key 等同于 type Foo = 'a' | 'b';in 可以遍历枚举类型type Keys = 'a' | 'b' | 'c';type Obj = // in 遍历 Keys，并为每个值赋予 string 类型type Obj = 官方文档：https://www.typescriptlang.org/docs/handbook/utility-types.html#partialt用到了上面提到的一些关键词[/card-default][card-default width="100%" label="Partial 将类型的属性变成可选"]功能是将类型的属性变成可选，注意这是浅Partialtype Partial<T> = ;举例说明interface UserInfo // error：Property 'id' is missing in type '' but required in type 'UserInfo'const xiaoming: UserInfo = 可以修改为interface UserInfo 使用 Partialtype NewUserInfo = Partial<UserInfo>; const xiaoming: NewUserInfo = 这个 NewUserInfo 就相当于interface NewUserInfo 但是 Partial 有个局限性，就是只支持处理第一层的属性，如果我的接口定义是这样的interface UserInfo {id: string; name: string; fruits: } type NewUserInfo = Partial<UserInfo>; // Property 'appleNumber' is missing in type '' but required in type ''. const xiaoming: NewUserInfo = }可以看到，第二层以后就不会处理了，如果要处理多层，就可以自己通过 Conditional Types[2]DeepPartialtype DeepPartial<T> = { // 如果是 object，则递归类型 [U in keyof T]?: T[U] extends object ? DeepPartial<T[U]> : T[U] }; type PartialedWindow = DeepPartial<Window>; // 现在window 上所有属性都变成了可选啦Required将类型的属性变成必选type Required<T> = ; 其中 -? 是代表移除 ? 这个 modifier 的标识。再拓展一下，除了可以应用于 ? 这个 modifiers ，还有应用在 readonly ，比如 Readonly 这个类型type Readonly<T> = Pick 从某个类型中挑出一些属性出来type Pick<T, K extends keyof T> = ; interface UserInfo ; type NewUserInfo = Pick<UserInfo, 'name'>; // 可以看到 NewUserInfo 中就只有个 name 的属性了。 // 其中 K extends keyof T中的keyof T 拿到的是UserInfo的'id'｜'name' 这样就限制住了K(我理解的就叫它参数范型吧)是 UserInfo中的属性名 进而执行下一步Record可以获得根据 K 中所有可能值来设置 key 以及 value 的类型interface UserInfo ; type Record<K extends keyof any, T> = ; // 举个例子 type CurRecord = Record<'a' | 'b' | 'c', UserInfo>; // Mutable 将类型的属性变成可修改功能是将类型的属性变成可修改，这里的 -指的是去除。-readonly 意思就是去除只读，也就是可修改啦。type Mutable<T> = ;Readonly 类型的属性变成只读type Readonly<T> = ;ReturnType 用来得到一个函数的返回值类型type ReturnType<T extends (...args: any[]) => any> = T extends ( ...args: any[]) => infer R ? R : any;infer在这里用于提取函数类型的返回值类型。ReturnType 只是将 infer R 从参数位置移动到返回值位置，因此此时 R 即是表示待推断的返回值类型。下面的示例用ReturnType获取到 Func 的返回值类型为 string，所以，foo 也就只能被赋值为字符串了。type Func = (value: number) => string; const foo: ReturnType<Func> = "1";[/card-default]一些ts的实例增加认识

编程语言中的 DUCK TYPING 前端工程师基本都是duck typing，因为JavaScript没有type。 --这话是我说的如果一只动物走起来像鸭子、游泳起来像鸭子、叫起来也像鸭子，那么这只动物就可以被称为鸭子。许多编程语言都支持 Duck Typing ，通常 Duck Typing 是动态编程语言用来实现多态的一种方式。在理解 Duck Typing 前，先看一张图片，这是曾经一度很火的大黄鸭先问一个比较考三观的问题：图片中的大黄鸭，它是不是一只鸭子呢？这个问题，得看你从哪个角度去看，如果从人们常识的认知中的角度去看，它显然不是一只鸭子，因为它连最基本的生命都没有。但是从 Duck Typing 的角度来看，它就是一只鸭子！Duck Typing 的原话是走起来像鸭子、游泳起来像鸭子、叫起来也像鸭子，那么它就是一只鸭子。这个原话是可以灵活理解的，就看我们怎么定义鸭子的行为，我们可以说，能浮在水上游的，黄色的，可爱的就是鸭子，那么，图片中的大黄鸭，它就是一只鸭子！[line]这就是所谓的 Duck Typing，它只关心事物的外部行为而非内部结构。它并不关心你这只鸭子是长肉的还是充气的。[/line]转自 https://segmentfault.com/a/1190000019607240

python 遇到的问题 1.解决pip安装三方库不成功pip安装三方库不成功:WARNING: You are using pip version 20.2.3; however,version 20.2.4 is available. You should consider upgrading via the‘c:\users\lenovo\appdata\local\programs\python\python37\python.exe -mpip install --upgrade pip’ command.原因：pip版本过低导致安装第三方库失败解决方法: 在cmd中输入： python -m pip install --upgrade pip request发送请求后，返回的是个resonpse对象，具体对象分为两部分1，返回头部信息，获取头部信息，直接用对象.头部信息2，返回体，用json()或者text()获取，是字典类型返回体包含三部分1）code 状态码状态码中，主要注意，200,500的状态码200 代表接口通了，运行正常500 是接口运行代码的结果2) msg：状态码代表中文含义3) 返回的数据pip install XXX 安装失败参考文章：https://blog.csdn.net/sandalphon4869/article/details/107693774记录Linux中安装软件遇到的问题pip install XXX1报错解决办法：python -m pip install XXX1同理：pip3 install XXX1改为：python3 -m pip install XXXpython打包Pyinstaller -F py_word.py 打包exePyinstaller -F -w py_word.py 不带控制台的打包Pyinstaller -F -w -i chengzi.ico py_word.py 打包指定exe图标打包以上三个是比较常用的参数，其他参数详见下表Pyinstaller参数大全icon在线地址https://app.xunjiepdf.com/img2icon/

测试这个typecho这些个案件 也没个提示啥的只能放出来试试 字体加粗字体加粗斜体项目斜体我的博客地址我的博客地址分割线？代码块console.log('我是帅哥')html <div>可以将html换成你需要使用的语法（您需要先在外观设置里开启代码高亮才会显示）</div>需要隐藏的内容 不登陆需要回复才可见[hide]需要隐藏的内容[/hide]dplayer[dplayer src="http://stream4.iqilu.com/ksd/video/2020/02/17/87d03387a05a0e8aa87370fb4c903133.mp4"/] 9.打字机效果 [typing]打字机效果 打字机效果 打字机效果 打字机效果 打字机效果[/typing]点击复制[copy]点击复制[/copy]伸缩展开的内容卡片[card-default width="200px" label="卡片标题"]卡片内容[/card-default]Tab[tabs] [tab-pane label="Tab标题1"]Tab内容1[/tab-pane] [tab-pane label="Tab标题2"]Tab内容2[/tab-pane][/tabs]带线的标题[line]带线的标题[/line]提示[alt type="success"]成功提示的文案[/alt][alt type="info"]消息提示的文案[/alt][alt type="warning"]警告提示的文案[/alt][alt type="error"]错误提示的文案[/alt]按钮[btn href="跳转链接" type="default"]默认按钮[/btn][btn href="跳转链接" type="primary"]主要按钮[/btn][btn href="跳转链接" type="success"]成功按钮[/btn][btn href="跳转链接" type="info"]信息按钮[/btn][btn href="跳转链接" type="warning"]警告按钮[/btn][btn href="跳转链接" type="danger"]危险按钮[/btn]标签[tag type="default"]标签一[/tag][tag type="success"]标签二[/tag][tag type="info"]标签三[/tag][tag type="warning"]标签四[/tag][tag type="danger"]标签五[/tag]网抑云音乐ID[music id="41651638"/]删除线效果 删除线效果 表表头表头表头居左居中居右居左居中居右标题一级标题二级标题三级标题四级标题五级标题六级标题Markdown使用 Markdown1可以效率的书写文档, 直接转换成 HTML2,。最后测试 有问题组件: 时间线 伸缩 相册 视频册Markdown是一种纯文本标记语言 ↩HyperText Markup Language 超文本标记语言 ↩

测试Dayer 视频播放 外链b站视频 Dplayer 在线视频 Dplayer 本地视频(上传本地群晖) Bilibli附上菜到抠脚的代码 因为跨域问题 不能直接改外链iframe的内部样式 只能从外面想办法 没做浏览器兼容 大神忽喷 $(function(){ const WIDTH = document.body.clientWidth const HEIGHT = document.documentElement.clientHeight console.log("document.body",WIDTH,HEIGHT) const dynamicResize = { timeoutId:null, //实际执行的代码 performProcessing:function(){ const scale = { height:document.documentElement.clientHeight / HEIGHT, width:document.body.clientWidth / WIDTH, } console.log("scale",scale) setIframeHeight("iframe_video",scale) }, //函数节流 process:function(){ if(this.timeoutId) clearTimeout(this.timeoutId) const that = this that.timeoutId = setTimeout(function(){ that.performProcessing() },100) } } function setIframeHeight(className,scale){ //console.log("className",className,scale) const iframes = document.getElementsByClassName(className) //console.log("iframes",iframes,iframes.length) if(iframes.length){ for(let i = 0;i < iframes.length;i++){ //console.log(iframes[i]) if(iframes[i]){ if(scale){ const = scale iframes[i].setAttribute('style',`transform:scale($)`) } iframes[i].onload = function(){ try{ iframes[i].height = iframes[i].scrollWidth * 1.4 // iframes[i].scrollWidth * 1.7 iframes[i].width = '100%' }catch(err){ console.log("err",err) } } } } } } setIframeHeight("iframe_video") //使用 当窗口发生改变时调用 window.onresize = function(){ console.log("window.onresize") dynamicResize.process(); } })**将此段代码复制到当前选定的主题文件下 header.php 中</head>节点之前**在富文本编辑器中直接引用b站分享链接复制后加入 class="iframe_video" src 修改视频地址 <iframe class="iframe_video" src="//player.bilibili.com/player.html?aid=1415480&bvid=BV1fx411N7bU&cid=2154848&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"/>