TS初探
简介
TypeScript具有类型系统,且是JavaScript的超集。它可以编译成普通的JavaScript代码。 TypeScript支持任意浏览器,任意环境,任意系统并且是开源的。Ts主要用于解决那些问题:
- js木有编译类型检查,写代码的时候木有错误,在运行的时候就发现错误一大堆,ts具有类型系统,可以解决此类问题
- js代码非常灵活,同一团队中,大神和小菜鸟写的代码各不相同,维护起来十分不便,统一采用ts开发js,使用相同的规则进行编码,能够比较好的解决此类问题
- js发展十分迅速,存在各种各样的版本和各种环境,在不同的环境中特性存在差异,为了满足各种环境,需要编写各异的代码,js通过制定编译环境可以将同一代码编译成对应环境的js脚本
- js在编译大型项目缺乏良好的模块及文件的组织,需要支持有模块及命名空间的概念,遵循CommonJs的规范,ts支持模块及命名空间,同时支持。
环境
安装
node install –g typescript
VSC
- tsconfig.json:指定ts编译的一些参数信息
"compilerOptions":
- Target:编译目标平台(es3,es5,e6,es2015)
- Module:组织代码方式(commonjs,amd)
- sourceMap:编译文件对应关系
- outDir:输出目录
"exclude":不包含的编译目录
- tasks.json:指定编译的命令
快捷键 ctrl+shift+p 调出命令窗口,选择 Configure Task Runner 创建如图所示
参数 "args" 指代编译的范围
声明
var
最常用的关键字,用来声明对象,例如
var关键存在一些弊端,例如:
- 变量可以重复声明
- 变量声明可以滞后
- 没有块级作用域
let
为了解决 var 关键字的以上弊端,提出了 let关键字,基本用法和var关键字一样,如下:
const
定义的变量不可以修改
类型
- 布尔
简单的true/false值
- 数字
浮点型的数字
- 字符串
- 数组
在类型后面直接使用[]
使用Array泛型
- 枚举
enum 类型是对js类型的一个补充,使用枚举类型可以为一组数值选择一个友好的名称
函数
完整函数类型
完整函数类型包含两部分:参数类型和返回值类型
上诉写法过于复杂,ts提供类型推断,可以简化写法,如下所示
参数类型
- 默认参数
默认参数可以指定参数默认值,函数调用时可以不用传递默认参数
- 可选参数
可选参数在参数后用 ? 来表示,可选参数只能在必须参数后
- 剩余参数
剩余参数表示不知道传递多个类型相同的参数可以使用,剩余参数只能用类型数组来表示,并在参数前加上省略号,剩余参数只能是最后一个参数
Lambda和this
看如下所示的代码,调用out函数的this 对象被指定为全局变量导致调用失败
在ts中,函数表达式变为使用lambda表达式( () => {} ),这样就会在函数创建的时候就指定'this'值
编译后的结果如下所示
类
结构
ts中类的基本结构如图所示,在ts里,每个成员默认为public的,也存在 private 及 protected,private只能在自身类可用,protected可在继承类中使用
抽象类
抽象类使用abstract关键字来定义抽象类和在抽象类内部定义抽象方法,抽象类只能用派生类实例化,抽象方法必须在派生类中实现
继承
面向对象最基本的模式就是对类型进行继承扩展,如图所示,Dog继承了抽象类animal,实现了抽象方法say,并重写了父类中的move方法
静态成员
类的静态成员,这些属性存在于类本身上面而不是类的实例上
接口
结构
与C#或Java里接口的基本作用一样,ts也能够用它来明确的强制一个类去符合某种契约。如下所示,Squre类实现Shape接口。
继承
接口可以继承多个接口,使用extends关键字来继承多个接口,如下所示
泛型
ts像C#和Java,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据,ts中使用(<>)括起泛型类型
模块
为了开发大型的代码程序,模块化是必须经历的一个过程。ts组织代码的方式主要包括内部使用的命名空间和外部使用的模块。
命名空间
当代码变得复杂的时候,要一种手段来组织代码,以便于在记录它们类型的同时还不用担心与其它对象产生命名冲突,这时候我们使用命名空间。命名空间内的代码只在命名空间内才是可见的,对外部不可见。
外部模块
模块在其自身的作用域里执行,在一个模块里的变量,函数,类等等在模块外部是不可见的,除非你明确地使用export形式之一导出它们。相反,如果想使用其它模块导出的变量,函数,类,接口等的时候,你必须要导入它们,可以使用import形式之一。
模块是自声明的;两个模块之间的关系是通过在文件级别上使用imports和exports建立的。
任何声明(比如变量,函数,类,类型别名或接口)都能够通过添加export关键字来导出,
可以使用以下import形式之一来导入其它模块中的导出内容。
- 导入一个模块中的某个导出内容
- 将整个模块导入到一个变量,并通过它来访问模块的导出部分
CommonJS和AMD都有一个exports对象的概念,它包含了一个模块的所有导出内容。ts模块支持export =语法,以配合传统的CommonJS和AMD的工作流。
export =语法定义一个模块的导出对象。它可以是类,接口,命名空间,函数或枚举。
若要导入一个使用了export =的模块时,必须使用TypeScript提供的特定语法import let = require("module")。
示例
编码规范
- 使用PascalCase为类型命名。
- 不要使用I做为接口名前缀。
- 使用PascalCase为枚举值命名。
- 使用camelCase为函数命名。
- 使用camelCase为属性或本地变量命名。
- 不要为私有属性名添加_前缀。
- 1个文件对应一个逻辑组件(比如:解析器,检查器)。
- 不要导出类型/函数,除非你要在不同的组件中共享它。
- 不要在全局命名空间内定义类型/值。
- 共享的类型应该在types.ts里定义。
- 在一个文件里,类型定义应该出现在顶部。
- 使用 undefined,不要使用 null。
- 由于种种原因,我们避免使用一些方法,而使用我们自己定义的。
- 不使用ECMAScript 5函数;而是使用core.ts这里的。
- 不要使用for..in语句;而是使用ts.forEach,ts.forEachKey和ts.forEachValue。注意它们之间的区别。
- 如果可能的话,尝试使用ts.forEach,ts.map和ts.filter代替循环。
资料
https://zhongsp.gitbooks.io/typescript-handbook/content/
TS初探的更多相关文章
- TypeScipt学习
TypeScript具有类型系统,且是JavaScript的超集.它可以编译成普通的JavaScript代码. TypeScript支持任意浏览器,任意环境,任意系统并且是开源的.Ts主要用于解决那些 ...
- [Silverlight 2.0 控制物体绕圆弧运行(C#初探篇)]
我自己写的第一个 Silverlight 2.0 程序 [Silverlight 2.0 控制物体绕圆弧运行(C#初探篇)] 程序运行时:小地球将绕着圆形轨迹做圆周运动. ...
- Go+gRPC-Gateway(V2) 微服务实战,小程序登录鉴权服务(四):客户端强类型约束,自动生成 API TS 类型定义
系列 云原生 API 网关,gRPC-Gateway V2 初探 Go + gRPC-Gateway(V2) 构建微服务实战系列,小程序登录鉴权服务:第一篇 Go + gRPC-Gateway(V2) ...
- Go+gRPC-Gateway(V2) 微服务实战,小程序登录鉴权服务(六):客户端基础库 TS 实战
小程序登录鉴权服务,客户端底层 SDK,登录鉴权.业务请求.鉴权重试模块 Typescript 实战. 系列 云原生 API 网关,gRPC-Gateway V2 初探 Go + gRPC-Gatew ...
- 初探webpack之从零搭建Vue开发环境
初探webpack之搭建Vue开发环境 平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...
- 初探webpack之编写loader
初探webpack之编写loader loader加载器是webpack的核心之一,其用于将不同类型的文件转换为webpack可识别的模块,即用于把模块原内容按照需求转换成新内容,用以加载非js模块, ...
- 初探领域驱动设计(2)Repository在DDD中的应用
概述 上一篇我们算是粗略的介绍了一下DDD,我们提到了实体.值类型和领域服务,也稍微讲到了DDD中的分层结构.但这只能算是一个很简单的介绍,并且我们在上篇的末尾还留下了一些问题,其中大家讨论比较多的, ...
- CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探
CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码 ...
- 从273二手车的M站点初探js模块化编程
前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...
随机推荐
- angularjs之自己定义指令篇
1>指令基础知识 directive() 参考资料 http://www.tuicool.com/articles/aAveEj http://damoqiongqiu.iteye.com/bl ...
- 说说C#的async和await(转)
一个简单的例子: public class MyClass { public MyClass() { DisplayValue(); //这里不会阻塞 System.Diagnostics.Debug ...
- SAMBA 共享服务器搭建
yum install samba service smb start chkconfig smb on 1.给要共享的文件夹赋权限 777 2.修改 smb 的配置文件:/etc/samba/smb ...
- Java五道输出易错题解析(避免小错误)
收集了几个易错的或好玩的Java输出题,分享给大家,以后在编程学习中稍微注意下就OK了. 1. 看不见的空格? 下面的输出会正常吗? package basic; public class Integ ...
- 免费的ER 设计软件调研
目标: 找到一个免费的ER 设计软件, 适合数据仓库项目开发. 结果: 经初步调研, Oracle的 SQL Developer Data Modeler基本满足需求. 但在功能和操作性等方面, 较P ...
- 开始使用pycharm了
我将python的主力开发工具从eclipse+pydev切换到pycharm社区版了. 选择pycharm 的原因:1. pycharm可以实时按照pep8的规范检查code style和namin ...
- javascript客户端检测技术
1. Firefox Gecko是firefox的呈现引擎.当初的Gecko是作为通用Mozilla浏览器一部分开发的,而第一个采用Gecko引擎的浏览器是Netscape6: 我们可以使用用户代理 ...
- 【翻译】Tomcat 6.0 安装与启动
本篇来自Tomcat6官方文档:运行手册running.txt 有很多以前都没注意的问题,这里正好学习下. 系列文章来自:<Tomcat官方文档翻译> Tomcat的安装 1 确认本机是否 ...
- JSON格式转换(javascript)
使用ajax从后台抓取数据后,如果有多个值,可以使用json传值. ajax例子如下,在返回的类型里面,可以是文本型(text),JSON格式(json),超文本类型(html),XML文件类型(xm ...
- PHP中PSR-[0-4]代码规范
PHP-FIG 在说啥是PSR-[0-4]规范的之前,我觉得我们有必要说下它的发明者和规范者:PHP-FIG,它的网站是:www.php-fig.org.就是这个联盟组织发明和创造了PSR-[0-4] ...