分类：Typescript

2022
03-14

vue中使用TypeScript的方法

引言近几年前端对TypeScript的呼声越来越高，Typescript也成为了前端必备的技能。TypeScript是JS类型的超集，并支持了泛型、类型、命名空间、枚举等特性，弥补了JS在大型应用开发中的不足。在单独学习TypeScript时，你会感觉很多概念还是比较好理解的，但是和一些框架结合使用的话坑还是比较多的，例如使用React、Vue这些框架的时候与TypeScript的结合会成为一大障碍，需要去查看框架提供的.d.ts的声明文件中一些复杂类... 继续阅读 >

2021
09-22

深入理解typescript中的infer关键字的使用

目录infer案例：加深理解参考infer这个关键字，整理记录一下，避免后面忘记了。有点难以理解呢。inferinfer是在typescript2.8中新增的关键字。infer可以在extends条件类型的字句中，在真实分支中引用此推断类型变量，推断待推断的类型。例如：用infer推断函数的返回值类型typeReturnType<T>=Textends(...args:any[])=>inferR?R:any;typefn=()=>numbertypefnReturnType=ReturnType<fn>//number在... 继续阅读 >

2021
09-18

为什么TypeScript的Enum会出现问题

目录发生了什么呢？什么时候用控制枚举的数字Bit值控制索引非数字枚举结论TypeScript引入了很多静态编译语言的特性，比如class（现在是JavaScript的一部分了），interface,generics和uniontypes等。但是今天有一个类型需要着重讨论下，这就是enum。对于很多的静态语言来说，枚举是一个很非常常见的语言特性。比如，c，c#，java和swift。枚举就是你在代码里可以用的一组常量。我们用TypeScript来新建一个enum来代表一周的几天：en... 继续阅读 >

2021
06-04

详解TypeScript中的类型保护

概述在TypeScript中使用联合类型时，往往会碰到这种尴尬的情况：interfaceBird{//独有方法fly();//共有方法layEggs();}interfaceFish{//独有方法swim();//共有方法layEggs();}functiongetSmallPet():Fish|Bird{//...}letpet=getSmallPet();pet.layEggs();//正常pet.swim();//ts报错如上所示，getSmallPet函数中，既可以返回Fish类型的对象，又可以返回Bird类型的... 继续阅读 >

2021
05-20

TypeScript在React项目中的使用实践总结

序言本文会侧重于TypeScript（以下简称TS）在项目中与React的结合使用情况，而非TS的基本概念。关于TS的类型查看可以使用在线TS工具👉TypeScript游乐场React元素相关React元素相关的类型主要包括ReactNode、ReactElement、JSX.Element。ReactNode。表示任意类型的React节点，这是个联合类型，包含情况众多；ReactElement/JSX。从使用表现上来看，可以认为这两者是一致的，属于ReactNode的子集，表示“原生的DOM组件... 继续阅读 >

2021
05-02

CocosCreator入门教程之用TS制作第一个游戏

前提无论学什么技术知识，官方文档都应该是你第一个教程，所以请先至少阅读新手上路这一节http://docs.cocos.com/creator/manual/zh/getting-started/再来看这篇文章。这里假设你已经安装成功了CocosCreator。TypeScriptVSJavaScript这里当然只会讲优点：1.ts是js的超集，所有js的语法ts都支持。2.ts支持接近完美的代码提示，js代码提示接近于没有。3.ts有类型定义，编译时就可以排除很多无意义的错误。4.... 继续阅读 >

2021
03-19

TypeScript 安装使用及基本数据类型

第一步全局安装TypeScript使用npm安装npminstall-gtypescript使用cnpm安装cnpminstall-gtypescript使用yarn安装yarnglobaladdtypescript第二步初始化TypeScript在vscode里面终端>>运行生成任务>>tsc:监视tsconfig.json接下来就可以开始我们的typescript旅程了~TypeScript的基本数据类型//布尔类型boolean数字类型number字符串类型string数组类型array元组类型tuple枚举类型enum任意类型anyvoi... 继续阅读 >

2021
02-23

详解Vue3.0 + TypeScript + Vite初体验

项目创建npm:$npminitvite-app<project-name>$cd<project-name>$npminstall$npmrundevoryarn:$yarncreatevite-app<project-name>$cd<project-name>$yarn$yarndev项目结构main.js在个人想法上，我觉得createApp()是vue应用的实例，createApp支持链式调用App.vue：这是兼容vue2.0的语法，下面是vue3.0rfc写法（还处于实验性阶段）。rfc官方说明setupdatasetup是结合了vue2.0的created生命周期函数和data还有me... 继续阅读 >

2021
01-17

JavaScript/TypeScript 实现并发请求控制的示例代码

场景假设有10个请求，但是最大的并发数目是5个，并且要求拿到请求结果，这样就是一个简单的并发请求控制模拟利用setTimeout实行简单模仿一个请求letstartTime=Date.now();consttimeout=(timeout:number,ret:number)=>{return(idx?:any)=>newPromise((resolve)=>{setTimeout(()=>{constcompare=Date.now()-startTime;console.log(`At${Math.floor(compare/100)}00return`,ret);re... 继续阅读 >

2021
01-09

详解Typescript里的This的使用方法

this可以说是Javascript里最难理解的特性之一了，Typescript里的this似乎更加复杂了，Typescript里的this有三中场景，不同的场景都有不同意思。this参数:限制调用函数时的this类型this类型:用于支持链式调用，尤其支持class继承的链式调用ThisType:用于构造复杂的factory函数this参数由于javascript支持灵活的函数调用方式，不同的调用场景，this的指向也有所不同作为对象的方法调用作为普通函数调用... 继续阅读 >

2020
12-10

使用typescript快速开发一个cli的实现示例

cli的全称command-lineinterface（命令行界面），也就是前端同学常用的脚手架，比如yo、vuecli、reactcli等。cli可以方便我们快速创建项目，下图是引用vuecli的介绍：创建项目运行下面的命令，创建一个项目：npminit执行命令完成后，可以看到项目根目录只有一个package.json文件。在package.json文件增加bin对象，并指定入口文件dist/index.js。在命令行运行需要在入口文件的第一行增加#!/usr/bin/envnode，... 继续阅读 >

2020
10-30

利用vue3+ts实现管理后台（增删改查）

 简单的管理后台基本上就是数据的增删改查。主要就是列表+form表单。每个页面的逻辑基本上都相同。不同的地方就是每个页面需要调用的具体API及参数。以前vue2的时候最简单的做法是写出来一个页面的逻辑，然后直接copy到各个页面中，修改API及参数即可。高级一点的是利用mixin函数，将可复用逻辑抽离，每个页面引入mixin。vue3之后新增了compositionAPI。本文就是利用compositionAPI，将可复用的逻辑抽离到c... 继续阅读 >

2020
10-30

使用TS来编写express服务器的方法步骤

1.前言作为前端开发人员而言，ts已经成为了一项必不可少的技能，类型检查可以帮助我们再开发时避免一些不必要的bug，而且ts支持的类和装饰器等语法也更逼近后端语言，更适合服务器的开发。本文将从零开始，搭建一个集成ts和eslint语法检查的express服务器。2.初始化express框架我们可以使用官方提供的express生成器来快速生成express框架。当然，express的初始化内容并不复杂，你也可以从一个app.js开始搭建自己喜欢的框架模式。... 继续阅读 >

2020
10-30

TypeScript魔法堂之枚举的超实用手册

前言也许前端的同学会问JavaScript从诞生至今都没有枚举类型，我们不是都活得挺好的吗？为什么TypeScript需要引入枚举类型呢？也许被迫写前端的后端同学会问，TypeScript的枚举类型是和Java/.NET的一样吗？下面我们来一起探讨和尝试解答吧！前端一直都需要枚举我敢保证，前端的同学都会万分肯定地告诉大家：我们从来没有写过枚举。那是因为虽然ECMAScript将enum作为保留字，但至ES2020为止还没有提出枚举的实现规范。语言没有提供... 继续阅读 >

2020
10-28

vue3+typescript实现图片懒加载插件

github项目地址:github.com/murongg/vue…求star与issues我文采不好，可能写的文章不咋样，有什么问题可以在留言区评论，我会尽力解答本项目已经发布到npm安装：$npmivue3-lazyload#or$yarnaddvue3-lazyload需求分析支持自定义loading图片，图片加载状态时使用此图片支持自定义error图片，图片加载失败后使用此图片支持lifecyclehooks，类似于vue的生命周期，并同时在img标签绑定lazy属性，类似于<img... 继续阅读 >

2020
10-10

TypeScript 运行时类型检查补充工具

TypeScript是静态类型系统，在编译时做类型检查。一般而言，如果项目所用到的所有库、模块都是基于ts的，那么静态类型已经可以避免大部分编程层面的类型问题。不过，在一些场景下来，单纯静态类型是无法解决问题的，部分数据是动态传入到系统中的，主要包含场景如下：第三方数据源（接口API、本地持久化存储、postMessage等）第三方调用者传参全局状态变更当然，还有其他可能，总之，单纯靠静态类型检查，无法解决运行时类型... 继续阅读 >