分类：TS

2022
05-24

Vue3+script setup+ts+Vite+Volar搭建项目

目录使用Vite创建vue+ts项目Vue3的三种语法OptionAPICompositionAPIscriptsetup（CompositionAPI的语法糖）安装Volar结尾好久没有写了，最近看到Vue3.2发布了，害，又要开始卷了么。其实我自己本身还没有使用过Vue3做过实际的项目开发，然鹅又出新东西了……，新时代农民工真的是左手工作，右手游戏，还要用jio去学习呢。什么？你说谈对象？xswl，我特么一个农民工也配谈对象？不卷不行啊，我踏马再看看自己盆友... 继续阅读 >

2021
12-09

react+ts实现简单jira项目的最佳实践记录

练手的一套项目react+ts虽然内容较少，但是干货挺多，尤其是对hooks的封装，ts的泛型的理解，使用更上一层楼项目代码：https://gitee.com/fine509/react_jiar效果图这是三个主要页面，还有一些小细节等等一些值得注意的地方（只是讲大概的功能，没有具体的详解怎么用）使用错误边界处理，getDerivedStateFromError来处理当某个页面某处地方有报错的时候显示报错组件而不是挂掉。useSearchParams的使用这个api可以获取和设置我们这... 继续阅读 >

2021
09-18

vite+vue3.0+ts+element-plus快速搭建项目的实现

目录vite作用使用的环境搭建项目配置vite.config.tstsconfig.jsonApp.vueViewsroutermain.tsvite出了2.x版本，抱着学一学的心态决定出个简单的项目，结合element-plus，以及将会成为每位前端必会的typescript，实现了如下内容。vite是一个由原生ESM驱动的Web开发构建工具。在开发环境下基于浏览器原生ESimports开发，在生产环境下基于Rollup打包。vite作用快速的冷启动：不需要等待打包操作；即时的热模块... 继续阅读 >

2021
06-19

详解TypeScript映射类型和更好的字面量类型推断

概述TypeScript2.1引入了映射类型，这是对类型系统的一个强大的补充。本质上，映射类型允许w咱们通过映射属性类型从现有类型创建新类型。根据咱们指定的规则转换现有类型的每个属性。转换后的属性组成新的类型。使用映射类型，可以捕获类型系统中类似Object.freeze()等方法的效果。冻结对象后，就不能再添加、更改或删除其中的属性。来看看如何在不使用映射类型的情况下在类型系统中对其进行编码：interfacePoint{x:number;... 继续阅读 >

2021
06-13

浅谈TypeScript3.7中值得注意的3个新特性

前言距typescript3.7正式发布已经有一段时间了，这段时间正在对手上的项目进行typescript的迁移工作，所以会特别留意每一次的release。对于3.7中包含的新特性，其实相比较之前几次release来说，算是一个比较小的发布版本，但是其中包含的几个特性对代码质量本身，会带来显著地提升。OptionalChaining首先第一个特性是对于optionalchaining操作符的支持，翻译过来应该可以叫做可选链操作符，当然我还是觉得这样翻译有点怪怪的，... 继续阅读 >

2021
06-13

详解TypeScript2.0标记联合类型

使用标记的联合类型构建付款方式假设咱们为系统用户可以选择的以下支付方式建模Cash(现金)PayPal与给定的电子邮件地址Creditcard带有给定卡号和安全码对于这些支付方法，咱们可以创建一个TypeScript接口interfaceCash{kind:"cash";}interfacePayPal{kind:"paypal",email:string;}interfaceCreditCard{kind:"credit";cardNumber:string;securityCode:string;}注意，除了必需的信息外，每... 继续阅读 >

2021
06-12

详解TS数字分隔符和更严格的类属性检查

概述TypeScript2.4为标识符实现了拼写纠正机制。即使咱们稍微拼错了一个变量、属性或函数名，TypeScript在很多情况下都可以提示正确的拼写。TypeScript2.7支持ECMAScript的数字分隔符提案。这个特性允许用户在数字之间使用下划线（_）来对数字分组（就像使用逗号和点来对数字分组那样）。constworldPopulationIn2017=7_600_000_000;constleastSignificantByteMask=0b1111_1111;constpapayawhipColorHexCode=0xFF_... 继续阅读 >

2021
06-12

详解TS对象扩展运算符和rest运算符

概述TypeScript2.1增加了对对象扩展运算和rest属性提案的支持，该提案在ES2018中标准化。可以以类型安全的方式使用rest和spread属性。对象rest属性假设已经定义了一个具有三个属性的简单字面量对象constmarius={name:"MariusSchulz",website:"https://mariusschulz.com/",twitterHandle:"@mariusschulz"};使用ES6解构语法，可以创建几个局部变量来保存相应属性的值。TypeScript将正确地推断每个变量... 继续阅读 >

2021
06-11

如何通俗的解释TypeScript 泛型

概述在TypeScript中我们会使用泛型来对函数的相关类型进行约束。这里的函数，同时包含class的构造函数，因此，一个类的声明部分，也可以使用泛型。那么，究竟什么是泛型？如果通俗的理解泛型呢？什么是泛型泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。通俗的解释，泛型是类型系统中的“参数”，主要作用是为了类型的重用。从上面定义可以看出，它只会用在函... 继续阅读 >

2021
06-11

7个好用的TypeScript新功能

1.可选链从v3.7可用这是当你尝试访问嵌套数据时的一个痛点，嵌套数据越多，代码就会变得越繁琐。在下面的例子中，要访问address，你必须遍历data.customer.address，而且data或customer有可能是undefined，所以通常使用&&运算符或类似例子中的技巧遍历检查每个层次的定义。现在你可以用.?运算符来选择性地对数据访问。通过这种方式，如果存在尚未定义的父级对象，则会在链中的任何位置返回未定义，而不是在运行时崩溃。//v... 继续阅读 >

2021
06-08

TypeScript泛型参数默认类型和新的strict编译选项

概述TypeScript2.3增加了对声明泛型参数默认类型的支持，允许为泛型类型中的类型参数指定默认类型。接下来看看如何通过泛型参数默认将以下react组件从js(和jsX)迁移到TypeScript(和TSX):classGreetingextendsreact.Component{render(){return<span>Hello,{this.props.name}!</span>;}}为组件类创建类型定义咱们先从为Component类创建类型定义开始。每个基于类的React组件都有两个属性:props和state，类型定义... 继续阅读 >

2021
06-05

详解JavaScript私有类字段和TypeScript私有修饰符

JavaScript私有类字段和隐私需求在过去，JavaScript没有保护变量不受访问的原生机制，当然除非是典型闭包。闭包是JavaScript中许多类似于私有模式（如流行的模块模式）的基础。但是，近年来ECMAScript2015类被使用后，开发人员感到需要对类成员的隐私进行更多控制。类字段提案（在撰写本文时处于第3阶段）试图通过引入私有类字段来解决问题。让我们看看它们是什么样子的。一个JavaScript私有类字段的例子这是一个带有私... 继续阅读 >

2021
06-05

JS装饰者模式和TypeScript装饰器

装饰者模式介绍装饰者模式（DecoratorPattern）也称为装饰器模式，在不改变对象自身的基础上，动态增加额外的职责。属于结构型模式的一种。使用装饰者模式的优点：把对象核心职责和要装饰的功能分开了。非侵入式的行为修改。举个例子来说，原本长相一般的女孩，借助美颜功能，也能拍出逆天的颜值。只要善于运用辅助的装饰功能，开启瘦脸，增大眼睛，来点磨皮后，咔嚓一拍，惊艳无比。经过这一系列叠加的装饰，你还是你，长相不增... 继续阅读 >

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.... 继续阅读 >

2020
11-10

Vue + ts实现轮播插件的示例

背景最近在学习ts，打算用ts写一个练手项目，参照的网站内容是wanandroid，这个接触过android开发的同学可能更i了解一些，其实一开始是打算后台全部都自己写的，不过奈何一个懒字，所以现在的打算就是自己实现登录注册简单的逻辑。这些都不重要，一开始实现轮播是打算在vue中引入轮播图swiper.js，后来想想还是自己写算了。也当作熟悉ts。先上效果图(这里没有动态图片，各位同学可以自己实现)代码已经上传git，进度比较慢... 继续阅读 >