码迷,mamicode.com
首页 > 其他好文 > 详细

初探typescript

时间:2018-09-25 21:55:46      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:添加   图片   方式   分享   功能   技术分享   报错   use   结构   

学习任何知识都不是一蹴而就的。typescript也是如此。今天我们来初步的了解一下typescript的安装与编译。以及基础的语法知识。
第一步:安装ts
技术分享图片
第二步:在安装好的文件夹里面,写上ts文件
技术分享图片
第三步:编译ts文件
技术分享图片
就会发现我们的目录多了js文件
技术分享图片
通过以上方法,我们可以通过TypeScript写的JavaScript应用。
接下来让我们看看TypeScript工具带来的高级功能。
给 person函数的参数添加: string类型注解。
技术分享图片
如果user值不是string类型的话,我们会很明显的看到ts文件报错
技术分享图片
运行ts文件,会有报错。
技术分享图片
当我们将user值设为数组的时候,我们依然会看到明显的ts文件报错。
技术分享图片
运行ts文件,会有报错
技术分享图片
TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式,以上就是typescript里面的类型注解。我们会看到一些值得约束导致行为的改变。
(二)接口
这里我们使用接口来描述一个拥有firstName和lastName字段的对象。 在TypeScript里,只在两个类型内部的结构兼容那么这两个类型就是兼容的。
这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以,而不必明确地使用 implements语句。
技术分享图片
下面是我们编译的js文件
技术分享图片
(三)类
我们使用类改写上面的例子
我们创建一个Student类,它带有一个构造函数和一些公共字段。
还要注意的是,在构造函数的参数上使用public等同于创建了同名的成员变量。
技术分享图片
下面是我们编译的js文件
技术分享图片
我们可以发现TypeScript里的类只是JavaScript里常用的基于原型面向对象编程的简写。
最后运行我们的项目
技术分享图片
这篇博客算是基础的了解了typescript的知识,接下来我们进行详细的讲解。

初探typescript

标签:添加   图片   方式   分享   功能   技术分享   报错   use   结构   

原文地址:https://www.cnblogs.com/smart-girl/p/9703586.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!