传递参数 const cats = { "Coding Cat": "https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif", "Compiling Cat": "https://media.giphy.com/media/mlvseq9yvZhba/giphy.gif", "Testing Cat": "https://media.giphy…

TypeScript keyof typeof All In one keyof typeof refs https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html https://www.typescriptlang.org/docs/handbook/advanced-types.html xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问…

假设这样一个场景,目前业务上仅对接了三方支付 'Alipay', 'Wxpay', 'PayPal', 实际业务 getPaymentMode 会根据不同支付方式进行不同的付款/结算流程. const PAYMENT_MODE = ['Alipay', 'Wxpay', 'PayPal']; function getPaymentMode(paymode: string) { return PAYMENT_MODE.find(thirdPay => thirdPay === paymode) }…

闲聊 前段时间小颖在B站找了个学习vue3+TS的视频,自己尝试着搭建了一些基础代码,在实现功能的过程中遇到了一些问题,为了防止自己遗忘,写个随笔记录一下嘻嘻 项目代码 git地址:vue3.x-ts-element-plus--demo 踩坑集合: 1.根据 element-plus 官网提示 按需引入 组件后,遇到:ElLoading.ElMessage.ElNotification.ElMessageBox  样式丢失 起因是小颖在封装  axios 时,发现引入的  ElNotifica…

目录 准备工作 搭建项目 vue 中 ts 语法 项目代理及 webpack 性能优化 其他 忙里偷闲,整理了一下关于如何借助 vue-cli3 搭建 ts + 装饰器 的脚手架,并如何自定义 webpack 配置,优化. 准备工作 @vue/cli@4.1.1 vue 2.6 node v12.13.0 安装 node 安装 node 全局安装 nrm,npm 的镜像源管理工具. npm i nrm -g // 安装 nrm ls // 查看可用源,及当前源,带*的是当前使用的源 nrm us…

使用TypeScript已经有了一段时间,这的确是一个好东西,虽说在使用的过程中也发现了一些bug,不过都是些小问题,所以整体体验还是很不错的. TypeScript之所以叫Type,和它的强类型是分不开的,这也是区别于JavaScript最关键的一点,类型的声明可以直接写在代码中,也可以单独写一个用来表示类型的描述文件*.d.ts. 常用方式 首先在d.ts中是不会存在有一些简单的基本类型定义的(因为这些都是写在表达式.变量后边的,在这里定义没有任何意义),声明文件中定义的往往都是一些复杂结构…

1 extend的用法 const x = extend({ a: 'hello' }, { b: 42 }); 2只有在d.ts,你才可以使用  export as 这样子的语法.而且必须有namespace. export const aaa = 132; export const bbb = 132; export as namespace ccc; 3 至今也不知道 安装了@types/sizzle后. export = Sizzle; 4 class _BB {} // 命名空间声明,…

项目背景 在项目的初始阶段,我们需要建立自己的design system,我们spike了一些方案,tailwind-rn就是其中一种,如果有用到或者即将用到tailwind-rn的,可以进来看一看,避免踩坑. 后来觉得项目比较简单,tailwind对新上项目小伙伴确实不太友好,所以我们最终没有采用. 简介 GitHub - vadimdemedes/tailwind-rn: Use Tailwind CSS in React Native projects Tailwind 提倡了原子型的CS…

目录 TypeScript学习第一章:TypeScript初识 1.1 TypeScript学习初见 1.2 TypeScript介绍 1.3 JS .TS 和 ES之间的关系 1.4 TS的竞争者有哪些? 1. ESLint 2. TSlint 3. CoffeeScript 4.Flow TypeScript学习第二章:为什么使用TypeScript? 2.1 发现问题 2.2 静态类型检查 2.3 非异常故障 2.4 使用工具 2.5 优化编译 2.6 显式类型 2.7 降级编译 2.8…

首先,下载这段js文件,命名为esri.symbol.MultiLineTextSymbol.js require(["esri/layers/LabelLayer"], function(ll) { if( typeof esri.layers.LabelLayer.prototype._addLabel == 'function' ) { esri.layers.LabelLayer.prototype._addLabel2 = esri.layers.LabelLayer.pro…

概述 vue-property-decorator是基于vue组织里vue-class-component所做的拓展,先来了解一下vue-class-component Vue-Class-Component vue-class-component是一个Class Decorator,也就是类的装饰器,但目前装饰器在vue中只属于草案阶段. 原理简述 vue2.x只有Object一种声明组件的方式, 比如这样: const App = Vue.extend({ // data data() {…

前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类的介绍,还有就是在线例子:esri 官网在线例子,这个也是学习 arcgis api 3.x 的好素材. 内容概览 arcgis api 3.x for js 解决 textSymbol 文本换行显示 源代码 demo 下载 arcgis api 3.x for js 默认加载 textsymbol…

枚举 // 数值型枚举 enum Direction { Up = 1, Down, Left, Right, } // Up=0 enum Direction { Up, Down, Left, Right, } // 使用枚举 enum Response { No = 0, Yes = 1, } function respond(recipient: string, message: Response): void { // ... } respond("Princess Caroline&…

前言 很早以前就尝试过使用 TypeScript 来进行日常编码,但自己对静态类型语言的了解并不深入,再加上 TypeScript 的类型系统有着一定的复杂度,因此感觉自己并没有发挥好这门语言的优势,使代码变得更具可读性与可维护性.于是这几天便想着好好研究下这门语言,希望能够总结出一些特别的语言特性与实用技巧. 操作符 typeof - 获取变量的类型 const colors = {  red: 'red',  blue: 'blue'} // type res = { red: string…

思想 时间切片的核心思想是:如果任务不能在50毫秒内执行完,那么为了不阻塞主线程,这个任务应该让出主线程的控制权,使浏览器可以处理其他任务.让出控制权意味着停止执行当前任务,让浏览器去执行其他任务,随后再回来继续执行没有执行完的任务. 所以时间切片的目的是不阻塞主线程,而实现目的的技术手段是将一个长任务拆分成很多个不超过50ms的小任务分散在宏任务队列中执行. 基本的基于生成器的 ts函数 function ts (gen) { if (typeof gen === 'function') ge…

电子物流中的EDI 应用 背景 EDI 全称是Electronic data interchange, 即电子数据交换.在传统企业里,很多流程上的操作或者通信一般是由纸质媒介完成的,比如说采购订单.发票.订单同步之类的.但由于纸质媒介一切传播全靠人手,就会带来很多不可避免的缺点,比如说操作及同步信息慢.人力及物力资源消耗大等等.EDI 的出现就是为了解决纸质交互带来的缺点.它可以极大地提高业务效率.更快地同步各种状态及信息.减少纠错流程.接近实时地访问信息,最重要的是它可以省钱.有研究表明平均来…

React + Typescript领域初学者的常见问题和技巧 创建一个联合类型的常量 Key const NAME = { HOGE: "hoge", FUGA: "fuga" } as const; keyof typeof NAME // => "HOGE" | "FUGA" 创建常量值的联合类型 typeof NAME[keyof typeof NAME] // => "hoge" |…

说在前面 本文难度偏中下,涉及到的点大多为如何在项目中合理应用ts,小部分会涉及一些原理,受众面较广,有无TS基础均可放心食用. **>>>> 阅完本文,您可能会收获到<<<<** 若您还不熟悉 TS,那本文可帮助您完成 TS 应用部分的学习,伴随众多 Demo 例来引导业务应用: 若您比较熟悉 TS,那本文可当作复习文,带您回顾知识,希望能在某些点引发您新发现和思考: 针对于 class 组件的 IState 和 IProps,类比 Hook 组件的部分写…

版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 介绍 当使用外部JavaScript库或新的宿主API时,你需要一个声明文件(.d.ts)定义程序库的shape. 这个手册包含了写.d.ts文件的高级概念,并带有一些例子,告诉你怎么去写一个声明文件. 指导与说明 流程 最好从程序库的文档开始写.d.ts文件,而不是代码. 这样保证不会被具体实现所干扰,而且相比于JS代码更易读. 下面的例子会假设你正在参照文档写声明文件. 命名空间…

功能 像C#中DateTime的ToString的格式化输出一样,在js/ts中输出格式化的日期字符串 网上很多正则的,不加分隔符就不行了,和C#的格式也不一样 刚接触js/ts没两月,可能会有问题. 效果 实现 /** * 对日期进行格式化, 和C#大致一致 默认yyyy-MM-dd HH:mm:ss * 可不带参数 一个日期参数 或一个格式化参数 * @param date 要格式化的日期 * @param format 进行格式化的模式字符串 * 支持的模式字母有: * y:年, * M:…

当使用扩展的JavaScript库或者插件API的时候,将需要使用声明文件(.d.ts)来描述库的类型.本文内容将包括如何编写声明文件相关的一些高级概念,然后用一些例子来展示如何将各式各样的概念与声明文件的描述相匹配. 流程 写.d.ts最好是从库的说明文档开始,而不是代码.从说明文档开始可以保证思维不受实现细节的影响,并且比阅读JS代码容易理解.下面的例子假设是根据说明文档写的,并且提供调用代码. 命名空间 当定义接口(例如"options"对象)的时候,你可以选择是否将这些类型放入…

在 <从 JavaScript 到 TypeScript 系列> 文章我们已经学习了 TypeScript 相关的知识. TypeScript 的核心在于静态类型,我们在编写 TS 的时候会定义很多的类型,但是主流的库都是 JavaScript 编写的,并不支持类型系统.那么如何让这些第三方库也可以进行类型推导呢? 这篇文章我们来讲解 JavaScript 和 TypeScript 的静态类型交叉口 -- 类型定义文件. 这篇文章首发于我的个人博客 <听说>. 前端开发 QQ 群:…

这篇文章我们来看一下TS里面的函数 函数声明 在 JavaScript 中,有两种常见的定义函数的方式——函数声明(Function Declaration)和函数表达式(Function Expression): // 函数声明(Function Declaration) function sum(x, y) { return x + y; } // 函数表达式(Function Expression) let mySum = function (x, y) { return x + y; }…

注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? TypeScript的设计目的应该是解决JavaScript的“痛点”:弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. typescript不仅可以约束我们的编码习惯,还能起到注释的作用,当我们看到一函数后我们立马就能知道这…

//typeof 用来判断变量类型 var s: string = 'egret'; var isString: boolean = typeof s === 'string'; console.log(typeof s === 'string'); console.log(typeof s === 'number'); console.log(typeof s === 'any'); console.log(typeof s === 'array'); //instanceof 用来判断方法或…

typescript 简洁使用 *做最简洁核心的记录,可以节约时间.再是提炼概括,理解归纳.便于日后查阅联想* > typescript原则之一: 对值所具有的结构进行类型检查 #### 基础类型 * boolean     `let isDone: boolean = false;`      * number     `let hexLiteral: umber = 7`      * string          `let name: string = 'bob'`      * anr…

写了一段时间ts,在从头学习一遍,温故而之新 ts的一些技巧 1.巧用注释 通过/** */形式的注释可以给 TS 类型做标记,编辑器会有更好的提示: /** A cool guy. */ interface Person { /** A cool name. */ name: string, } 2.巧用注释 进阶 注释有很多规范的字段,基本和 JSDOC 一致.但不用着急翻文档,在 /** */ 里输入 @ 就可以看到丰富的选择 3.巧用 typeof 我们一般先写类型,再使用: inter…

一. 前言 由于node以及绝大多数前端库都是用JavaScript(以下简称JS)语言实现,而Angular是用TypeScript(以下简称TS)实现,虽然TS是JS的超集,但是由于TS和JS对于数据类型检验处理的异同,使得JS库并不能直接在TS环境直接使用,必须要使用一定格式发布并且有类型声明文件,才能在TS环境使用. 二. JS模块化规范 JS库通常有全局模式和模块模式,由于大型项目通常会用到很多各种插件,导致命名冲突的可能较大,因此现在绝大多数JS库都是用模块封装发布. 模块化规范有A…

具体错误 ERROR in ./src/index.tsx Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError (2:1) Unknown word var content = require("!!./index.tsx"); if(typeof content === 'string') content = [[module.id, content, '']] webpac…

动机 以前写ts或者es6,都是用在脚手架搭建的项目中,比如vue和react,当时当我识图写一个ts的demo的,我还要创建一个完整的vue或者react项目?明显不合适,那就要研究一下如何手动搭建一套编译调试环境 源代码src/index.ts /*因为编译后的代码包含es6新增api,比如下边的includes,有浏览器可能不支持,故而需要引入垫片 这里可以选择core-js,也可以ts-polyfill,目的都是一样的*/ import 'core-js'; //具体目标 class U…