博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
初探typescript
阅读量:5240 次
发布时间:2019-06-14

本文共 809 字,大约阅读时间需要 2 分钟。

学习任何知识都不是一蹴而就的。typescript也是如此。今天我们来初步的了解一下typescript的安装与编译。以及基础的语法知识。

第一步:安装ts
1037363-20180925203100713-544165638.png
第二步:在安装好的文件夹里面,写上ts文件
1037363-20180925203149230-966041634.png
第三步:编译ts文件
1037363-20180925203228053-1810012205.png
就会发现我们的目录多了js文件
1037363-20180925203309640-167932665.png
通过以上方法,我们可以通过TypeScript写的JavaScript应用。
接下来让我们看看TypeScript工具带来的高级功能。
给 person函数的参数添加: string类型注解。
1037363-20180925203651344-565272344.png
如果user值不是string类型的话,我们会很明显的看到ts文件报错
1037363-20180925203859095-1390002693.png
运行ts文件,会有报错。
1037363-20180925204047106-526413170.png
当我们将user值设为数组的时候,我们依然会看到明显的ts文件报错。
1037363-20180925204143620-221641338.png
运行ts文件,会有报错
1037363-20180925204218659-424722533.png
TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式,以上就是typescript里面的类型注解。我们会看到一些值得约束导致行为的改变。
(二)接口
这里我们使用接口来描述一个拥有firstName和lastName字段的对象。 在TypeScript里,只在两个类型内部的结构兼容那么这两个类型就是兼容的。
这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以,而不必明确地使用 implements语句。
1037363-20180925204547070-1422144866.png
下面是我们编译的js文件
1037363-20180925204610797-37606282.png
(三)类
我们使用类改写上面的例子
我们创建一个Student类,它带有一个构造函数和一些公共字段。
还要注意的是,在构造函数的参数上使用public等同于创建了同名的成员变量。
1037363-20180925205256944-831763929.png
下面是我们编译的js文件
1037363-20180925205412621-1763489019.png
我们可以发现TypeScript里的类只是JavaScript里常用的基于原型面向对象编程的简写。
最后运行我们的项目
1037363-20180925211608177-1481169627.png
这篇博客算是基础的了解了typescript的知识,接下来我们进行详细的讲解。

转载于:https://www.cnblogs.com/smart-girl/p/9703586.html

你可能感兴趣的文章
服务器内存泄露 , 重启后恢复问题解决方案
查看>>
ajax post 传参
查看>>
2.1命令行和JSON的配置「深入浅出ASP.NET Core系列」
查看>>
android一些细节问题
查看>>
KDESVN中commit时出现containing working copy admin area is missing错误提示
查看>>
利用AOP写2PC框架(二)
查看>>
【动态规划】skiing
查看>>
java定时器的使用(Timer)
查看>>
Android实现静默安装与卸载
查看>>
ef codefirst VS里修改数据表结构后更新到数据库
查看>>
boost 同步定时器
查看>>
[ROS] Chinese MOOC || Chapter-4.4 Action
查看>>
简单的数据库操作
查看>>
解决php -v查看到版本与phpinfo()版本不一致问题
查看>>
iOS-解决iOS8及以上设置applicationIconBadgeNumber报错的问题
查看>>
亡灵序曲-The Dawn
查看>>
MySQL中的隔离级别和悲观锁及乐观锁示例
查看>>
手机端h5 ajax 上传图片支持微信内置浏览器
查看>>
Redmine
查看>>
HtmlEditor常用模式
查看>>