TYPESCRIPT - 技术教程文章
Vue2.5中有关TypeScript的改进之处【图】
类型改进自Vue2.0发布以来，我们一直在收到更好集成TypeScript的请求。从那时起，我们已经为大多数核心库（vue，vue-router，vuex）加入了官方的TypeScript类型声明。然而，当使用开箱即用的Vue API时，目前的集成还是有所欠缺。例如：TypeScript不能轻易的推断出Vue使用的基于对象的默认API中的this类型。想要使我们的Vue代码与TypeScript更好的运作，我们需要使用vue-class-component装饰器，它允许我们使用基于类的语法来写Vue组...
介绍JavaScript和TypeScript的声明类型
从 JavaScript 语法改写为 TypeScript 语法，有两个关键点，一点是类成员变量(Field)需要声明，另一点是要为各种东西(变量、参数、函数/方法等)声明类型。 从 ES6 语法改写为 TypeScript 语法，有两个比较重要的知识点，一个是声明类成员，另一个是声明类型。这两个语法特点在 JavaScript 中都不存在。而这两个点直接引出了两个关键性的问题，有哪些类型？怎样声明？ 类型 在说 TypeScript 的类型之前，我们先复习一下 JavaScript ...
typescript指南详解【图】
typescript指南前言typescript是angularjs2推荐使用的脚本语言。它由微软2012年首次发布。 一. typescript和javascript的区别1.从遵循的规范上的角度: Javascript遵循ECMA5的规范，TypeScript是语法上对ECMA6的实现。2.从功能上说:TypeScript提供了类、模块和接口来帮助构建组件，更方便写面向对象的程序，所以被称为更好的typescript。3.从支持上说:所有的浏览器都支持ES5及之前的javascript，而没有浏览器支持typescript，所...
JavaScript中抽象(demobyES5、ES6、TypeScript)详解
抽象的概念 狭义的抽象，也就是代码里的抽象，就是把一些相关联的业务逻辑分离成属性和方法（行为），这些属性和方法就可以构成一个对象。 这种抽象是为了把难以理解的代码归纳成与现实世界关联的概念，比如小狗这样一个对象：属性可以归纳出“毛色”、“品种”、“年龄”等等；方法（行为）可以归纳出“叫”、“跑”、“啃骨头”等。 注意：这里的抽象不是指抽象类，抽象类我认为放封装一节讲比较合适。类的概念和实现 ...
分享TypeScript的一些小技巧
在C++项目中编译TypeScript（以下简称ts） 编辑ts文件的属性，项类型选择“自定义生产工具”。 命令行输入tsc所在位置与编译参数，我的是"C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.2\tsc" %(Identity) --outFile %(RelativeDir)/%(FileName).js -t es5。有空格的UNC（通用命名惯例）需要用双引号引起来。%(Identity)是被编译文件位置。 --outFile是输出参数，后面紧跟输出位置。 -t(--target)是目...
使用TypeScript重新编写的JavaScript坦克大战游戏代码_基础知识【图】
源码下载 源码我已经上传到 CSDN 了，无需资源分，下载地址：http://download.csdn.net/detail/zgynhqf/8565873。 源码使用 VS 2013 +TypeScript 1.4 进行开发。打开后，显示如下图：JsTankGame 1.0：老的使用 JS 编写的坦克游戏。 JsTankGame 2.0：新的使用 TS 直接翻译过来的游戏。 JsTankGame：在 2.0 的基础上，对类型进行了重构后的新游戏。 重构步骤 由于老的 JS 游戏是采用 MS Ajax Client Library 构建，并且采用了 OOD ...
TypeScript具有的几个不同特质_基础知识
今天要讨论的话题是TypeScript。之前在转载过一篇《The Rise of TypeScript》的文章，今天来谈一下我的感想。 很多朋友应该都了解，TypeScript是微软推出的一个开源语言，用于开发大型JS应用程序。其作者是大名鼎鼎的C#之父Anders Hejlsberg。所以从它发布beta之初，我就持续在关注。 最近发生的一件事情——Angular团队打算使用TypeScript来开发Angular 2版本，促使TJ VanToll提出这样一个疑问（观点）。而对于他的这个观点，我也...
TypeScript学习笔记之基本类型_javascript技巧
在 TypeScript 中一共有 7 种基本类型。 1、boolean代码如下: var isDone: boolean = false;2、number代表 JavaScript 中的数字。在 JavaScript 中，无论是“整数”还是“浮点数”，都是以双精度浮点类型存储的。代码如下: var height: number = 6;3、string代表字符串。跟 JavaScript 一样，可以使用一对双引号（"）或一对单引号（）来表示字符串。代码如下: var name: string = "bob"; name = smith;4、arrayTypeScript 中有两种...
c#程序员对TypeScript的认识过程_javascript技巧
简介 TypeScript一直发展不错，我们公司在开发新功能时，考虑到程序的可维护性，使用了TypeScript编写浏览器上的程序，我们是从零开始使用TypeScript，甚至我连javascript也是半罐子，本文描述了一个c#程序员认识TypeScript的过程。 注：本文编写是基于Typescript0.8版本，而且初用，可能过时，具体规范可以参考http://www.typescriptlang.org 命名空间和类 作为面向对象的开发人员思维，第一个想到的是TypeScript如何定义类，由于...
JavaScript和TypeScript中的void的具体使用
如果你来自传统的强类型语言，可能会很熟悉 void 的概念：一种类型，告诉你函数和方法在调用时不返回任何内容。 void 作为运算符存在于 JavaScript 中，而作为基本类型存在于 TypeScript 中。在这两个世界中，void 的工作机制与大多数人习惯的有点不同。 JavaScript 中的 voidJavaScript 中的 void 是一个运算符，用于计算它旁边的表达式。无论评估哪个表达式，void总是返回undefined。 let i = void 2; // i === undefined我们为什...
浅谈Vue3.0之前你必须知道的TypeScript实战技巧【图】
很多人对TypeScript的使用还停留在基本操作上,其实TypeScript的特性非常强大,我们利用好这些特性可以有效地提高代码质量、加速开发效率，今天就介绍9个非常实用的TypeScript技巧或者特性. 注释的妙用 我们可以通过 /** */ 来注释TypeScript的类型，当我们在使用相关类型的时候就会有注释的提示，这个技巧在多人协作开发的时候十分有用，我们绝大部分情况下不用去花时间翻文档或者跳页去看注释。巧用类型推导 TypeScript 能根据一些...
TypeScript中使用getElementXXX()的示例代码【图】
简述 Angular 1.x版本是用JavaScript编写的，我们在百度Angular经常会搜索到AngularJS，并不是JavaScript的什么衍生版本，就是Angular 1.x。在后续版本中，改用TypeScript来重写了Angular框架。改动较大，所以做了个区分，Angular v1.x就叫AngularJS，v2及后续版本统称为Angular。 查资料和解决方案的时候，经常会搜索到大量的AngularJS内容，注意区分。 在这里提一下Angular的历史，是因为本文是在使用这个框架的时候遇到的，所以...
TypeScript类型声明书写详解
本文总结一下TypeScript类型声明的书写，很多时候写TypeScript不是问题，写类型就特别纠结，我总结下，我在使用TypeScript中遇到的问题。如果你遇到类型声明不会写的时候，多看看lodash的声明，因为lodash对数据进行各种变形操作，所以你能遇到的，都有参考示例。 基本类型 // 变量const num: number = 1;const str: string = str;const bool: boolean = true;const nulls: null = null;const undefine: undefined = undefined;con...
使用typescript构建Vue应用的实现
一、Vue项目初始化-引入typescript使用typescript构建Vue应用和使用js一样，都是通过vue-cli去初始化并创建一个vue项目，只不过使用typescript构建的时候要在脚手架问卷操作的时候勾选上typescript选项。二、typescript Vue项目比较使用typescript构建的Vue项目发生了一些变化: ① main.js变成了main.ts，但是main.ts中的内容和main.js的内容是一模一样的。 ② router.js变成了router.ts，但是router.ts中的内容和router.js中的内容...
websocket4.0+typescript 实现热更新的方法
最近搞了一个webpack4+typescript的开发环境，折腾了很久现在记录一下。。。。本身环境比较好搞，但是热更新是个麻烦事儿本环境是基于webpack-dev-server搭建的output: {publicPath: /dist,path: path.resolve(__dirname, dist),filename: ljax.bundle.js,hotUpdateChunkFilename: hot/hot-update.js,hotUpdateMainFilename: hot/hot-update.json}, publicPath是必须的字段，不添加HRM就没有效果在热更新的时候会出现很多hot-updat...
vue-cli3+typescript新建一个项目的思路分析
最近在用vue搭一个后台管理的单页应用的demo，因为之前只用过vue-cli2+javascript进行开发，而vue-cli3早在去年8月就已经发布，并且对于typescript有了很好地支持。所以为了熟悉新技术，我选择使用vue-cli3+typescript进行新应用的开发。这里是新技术的学习记录。 初始化项目 卸载老版本脚手架，安装新版本脚手架后，开始初始化项目。初始化的命令跟2.x版本的略有不同，以前是 vue init webpack project-name ，而现在是 vue creat...
React+TypeScript+webpack4多入口配置详解
资源 React-16.8.*react-router-dom-4.3.*TypeScript-3.5.*webpack-4.*eslint-5.16.*项目目录├── dist # 打包结果目录 │ ├── demo1 //类别demo1的打包结果 │ │ ├── demo1.himl │ │ ├── demo1.js │ │ └── demo1.css │ └── demo2 ... //类别demo2的打包结果 ├── src # 业务资源文件目录 │ ├── category //项目分类 │ │ ├── demo1 │ │ ├── demo2 │ │ └── ... │ ├─...
详解Vue2.5+迁移至Typescript指南
为什么要迁移至TypescriptJavascript本身是动态弱类型的语言，这样的特点导致了Javascript代码中充斥着很多Uncaught TypeError的报错，给开发调试和线上代码稳定都带来了不小的负面影响。而Typescript提供了静态类型检查，使很多类型错误在编写时就已经发现，不会带到测试阶段。同时，Javascript不定义model就可以使用一个对象，有人喜欢这样的灵活性，的确这样的语法在model不复杂的时候可以快速的开发出需要的功能，但一旦model庞...
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
前言Vue3.x 即将来袭，使用 TypeScirpt 重构，TypeScript 将成为 vue 社区的标配，出于一名程序员的焦虑，决定现在 Vue2.6.x 踩一波坑。vue 官方文档已经简略地对 typescript 的支持进行了介绍，我们使用 Vue Cli3 直接生成项目创建项目 ?为什么使用 Vue Cli3 构建项目官方维护，后续升级减少兼容性问题 使用以下配置进行项目的生成： Babel 对 Ts 进行转译TSLint 对 TS 代码进行规范，后续会使用 prettier 对项目进行编码的统一默...
typescript nodejs 依赖注入实现方法代码详解【图】
依赖注入通常也是我们所说的ioc模式，今天分享的是用typescript语言实现的ioc模式，这边用到的主要组件是 reflect-metadata 这个组件可以获取或者设置元数据信息，它的作用是拿到原数据后进行对象创建类似C#中的反射，先看第一段代码： import "reflect-metadata"; /*** 对象管理器*/ const _partialContainer = new Map<string, any>(); const PARAMTYPES = "design:paramtypes";//需要反射的原数据，有很多种选择，我们这里选择的...
对TypeScript库进行单元测试的方法【图】
原文发布于2017年7月，为保证能正常运行，其中部分命令进行了调整。 当时TypeScript版本为2.x，但依旧具有借鉴意义。单元测试能限制你库中Bug的「生长」。随着编写的库越来越大，你不能总是手工测试每个特性。但你可以使用单元测试来测试每个特性，并且编写起来并不难。下面展示如何在Typescript中设置单元测试! 步骤1：安装用于单元测试的包 单元测试assert(推断)代码中一些属性。例如你有一个方法add(x,y)，其应该正确地将x和y相...
vue + typescript + video.js实现 流媒体播放 视频监控功能【图】
视频才用流媒体，有后台实时返回数据， 要支持flash播放， 所以需安装对应的flash插件。当视频播放时，每间隔3秒向后台发送请求供检测心跳，表明在线收看状态,需要后台持续发送视频数据。 1. yarn add video.js videojs-flash2. 创建videp.js声明文件 3. 创建video_player.vue组件，供外部调用。源码如下<script lang="ts"> import { Component, Emit, Prop, Vue } from vue-property-decorator;import video.js/dist/video-js....
vue + typescript + 极验登录验证的实现方法【图】
此功能基于vue（v2.6.8） + typescript（v3.3.3333）, 引入极验（geetest v3+）（官方api），使用其product: bind模式， 页面挂载后初始化ininGeetest，点击登录按钮后先做表单验证，通过后弹出滑块框，拖动验证成功，执行登录方法。 本项目为前后端分离，所以后端部署部分，请自行参考文档操作后台接口：开始：/public/js目录添加 jquery-1.12.3.min.js文件 和 gt.js（下载）在/public/index.html中引入以上添加的两个文件login.v...
简单了解TypeScript中如何继承 Error 类
前言 在JavaScript 中很多时候都需要自定义错误，尤其是开发 Node.js 应用的时候。 比如一个典型的网站服务器可能需要有 NetworkError, DatabaseError, UnauthorizedError 等。 我们希望这些类都拥有 Error 的特性：有错误消息、有调用栈、有方便打印的 toString 等。 最直观的实现方式便是 继承 Error 类。 但考虑 TypeScript 需要编译到 ES5 兼容性问题会较为复杂， 本文用来帮助理解 TypeScript 中继承 Error 的问题来源以及对应...
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)【图】
1.导语 首先来简单介绍一下webpack：现代 JavaScript 应用程序的 静态模块打包工具 。当 webpack 处理应用程序时，它会在内部构建一个会映射项目所需的每个模块 的依赖图(dependency graph)，并生成一个或多个 bundle 。webpack4.0出现之后，我们可以不用再引入一个配置文件来打包项目，并且它仍然有着很高的可配置性，可以很好满足我们的需求。 在开始正文之前，首先先来看看我们要实现的成果： 支持ES6+JQuery+Less/Scss的单页/多...
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践【图】
前言 阿特伍德定律，指的是any application that can be written in JavaScript, will eventually be written in JavaScript，意即“任何可以用JavaScript来写的应用，最终都将用JavaScript来写”在使用新技术的时候，切忌要一步一步的来，如果当你尝试把两门不熟悉的新技术一起结合使用，你很大概率会被按在地上摩擦，会yarn/npm和React脚手架等技术是前提，后面我会继续写PWA深入和Node.js集群负载均衡Nginx，webpack原理解析等~...
详解Vue3.0 前的 TypeScript 最佳入门实践【图】
前言 我个人对更严格类型限制没有积极的看法，毕竟各类转类型的骚写法写习惯了。 然鹅最近的一个项目中，是 TypeScript + Vue ，毛计喇，学之...…真香！ 注意此篇标题的“前”，本文旨在讲Ts混入框架的使用，不讲Class API1. 使用官方脚手架构建 npm install -g @vue/cli # OR yarn global add @vue/cli新的 Vue CLI 工具允许开发者 使用 TypeScript 集成环境 创建新项目。 只需运行 vue create my-app 。 然后，命令行会要求选择...
Typescript 中的 interface 和 type 到底有什么区别详解
interface VS type大家使用 typescript 总会使用到 interface 和 type，官方规范 稍微说了下两者的区别 An interface can be named in an extends or implements clause, but a type alias for an object type literal cannot.An interface can have multiple merged declarations, but a type alias for an object type literal cannot.但是没有太具体的例子。明人不说暗话，直接上区别。相同点都可以描述一个对象或者函数interfa...
vue中typescript装饰器的使用方法超实用教程【图】
VueConf ，尤大说， Vue 支持 Ts 了，网上关于 Vue + Ts 的资料有点少， 楼主踩了一个星期坑，终于摸明白了 修饰器 的玩法，下面我们就来玩下 Vue 的 decorator 吧 1，data 值的声明 在这里 public 声明的是公有属性， private 声明的是私有属性，私有属性要带 下划线 蓝色框里的内容是声明组件，在每个组件创建时都要带上， Components 中的写法如下 上面是 普通写法 ，下面是 懒加载写法 2.@Prop 父组件传值给子组件 父组件...
Nuxt项目支持eslint+pritter+typescript的实现【图】
脚手架安装好nuxt的基本项目 npx create-nuxt-app <项目名>，如：npx create-nuxt-app nuxt-ts，按照提示安装你想要的东西，本次项目预装： Universal模式下koa+PWA+linter+prettier+axios ，默认的项目目录如下：eslint + prettier + vscode 保存自动格式化&修复 本人习惯缩进为4个空格，但是eslint&nuxt生成的项目默认为2个，因此需要更改配置 .editorconfig文件下的indent_size: 2更改为indent_size: 4.vscode/settings.json{//...