文档章节

typescript 学习教程 (1)

省委书记沙瑞金
 省委书记沙瑞金
发布于 2016/09/23 23:32
字数 460
阅读 98
收藏 0
点赞 0
评论 0

古人云,工欲善其事,必先利其器。所以在学习,typescript 先要学习搭建环境,据官方介绍,主要有两种工具,一种是使用npm ,另外一种是通过visual studio 插件。其实还有别的工具,比如说使用webstrom 。我先学一下使用npm进行typescript的编译。首先是要安装typescript,前提是得安装nodejs。这个可以百度。然后打开nodejs终端。输入如下代码进行安装typescript。

npm install -g typescript

接着我们建立一个ts文件,我们命名为demo.ts。

function greeter(person) {
    return "Hello, " + person;
}

var user = "Jane User";

然后呢打开终端,在终端中输入如下代码。

tsc demo.ts

这个时候我们能够到会生成另外的一个文件,就是demo.js,我们打开demo.js,里面的内容如下所示。

function greeter(person) {
    return "Hello, " + person;
}
var user = "Jane User";

接着,我们继续按照官网上面的例子,敲进去之后输使用同样的方法进行编译。

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

var user = { firstName: "Jane", lastName: "User" };

document.body.innerHTML = greeter(user);

我们继续看demo.js,看起编译的结果。如下所示

function greeter(person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
var user = { firstName: "Jane", lastName: "User" };
document.body.innerHTML = greeter(user);

这个算是基本的使用方法。

接着我们使用webstrom,对于webstrom来说,这个是相对简单的。我们使用webstrom打开我们的项目文件夹,新建一个ts文件,比如说demo.ts然后,接着webstrom 会自动帮我们进行编译,编译的结果和上面的内容是一样的。好了,目前,我们的环境已经搭建好了。接下来,我们来开始进行typescript的学习。

© 著作权归作者所有

共有 人打赏支持
省委书记沙瑞金
粉丝 23
博文 44
码字总数 47581
作品 0
海淀
前端工程师
TypeScript系列1-简介及版本新特性

简介 随着PC端快速向移动端迁移,移动(体验)优先的概念也越来越响。由于ReactJS目前移动端仅仅支持iOS,因此移动端Web开发框架只能选择: AngularJS/Angula2 + Ionic框架 + Cordova。想要学...

一配
2015/08/15
0
0
TypeScript VS JavaScript 深度对比

TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集,但是 TypeScript 与 JavaScript 之间又有什么样的区别呢?在选择开...

powertoolsteam
06/29
0
0
TypeScript 语言学习

开发环境推荐 Visual Studio Code https://code.visualstudio.com 免费, 跨平台, 支持 Windows, OS X 以及 Linux. Visual Studio https://www.visualstudio.com Visual Studio 2015 RC 已整合......

小骏骏
2015/08/06
0
0
前端周刊第59期:选 Flow 还是 TypeScript?

共 2015 字,读完需 4 分钟。周末是时隔两月的家人团聚,而每次内容的准备平均需要我集中精力工作 3 小时,所以第 59 期的内容今早才准备好,对不住大家了。本期的引子是“选 Flow 还是 Type...

王仕军
2017/06/12
0
0
此生无悔入 TypeScript

↑ 编者按:本文由phodal公众号授权奇舞周刊转载。 想来,我已经用 TypeScript 已经有一段时间了,它可以算得上是前端领域的一门 “平淡生活” 的语言。 平淡生活,我的意思是:生活可以从此...

奇舞周刊
04/26
0
0
WEB前端学习面试加分题:同学,你了解TypeScript吗?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
05/11
0
0
如何用TypeScript来创建一个简单的Web应用

转载地址 如何用TypeScript来创建一个简单的Web应用 安装TypeScript 获取TypeScript工具的方式: 通过npm(Node.js包管理器) 构建你的第一个TypeScript文件 创建项目文件夹 创建文件greeter...

durban
昨天
0
0
TypeScript 2.8引入条件类型

最新发布的TypeScript 2.8包含了若干主要特性和一些问题修复,其中最为重要的是新增了条件类型,开发人员可以根据其他类型的特征为变量选择适当的类型。 条件类型最适合与泛型组合在一起使用...

dotNET跨平台
04/15
0
0
快速上手React+TypeScript+Redux技术栈

2018年的六一儿童节已到,特此一篇来献给小盆友们。此处应该有掌声.... 写在前面: 首先,什么是TypeScript? 官方原话:TypeScript is a typed superset of JavaScript that complies to plai...

黄二白
05/30
0
0
5分钟了解TypeScript

1.安装TypeScript 有两种方式安装TypeScript: Via npm 通过安装VS插件,更多可参见这里。 对于npm用户,可以直接使用下面的命令行安装: nmp install -g TypeScript 2.创建第一个TypeScript文...

zhanggui
06/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

回想过往,分析当下,着眼未来

好久没有真正的在纸质笔记本上写过东西了,感觉都快不会写字了,笔画都不知道怎么写了。接下来就说说咱们的正事。 2018年7月22日,我做了一个决定,那就是去参加安全培训(可能是我职业生涯中...

yeahlife
24分钟前
1
0
关于工作中的人际交往

关于工作中的人际交往 Intro 写了篇发泄情绪的博客,但不会发布出来。 大概就是,要么忍,要么滚。 以及一些不那么符合社会主义核心价值观,不满于大资本家与小资本家剥削的废话。

uniqptr
29分钟前
0
0
springMVC的流程

1.用户发送请求至前端控制器DispatcherServlet 2.DispatcherServlet收到请求调用HandlerMapping处理器映射器。 3.处理器映射器根据请求url找到具体的处理器,生成处理器对象及处理器拦截器(...

JavaSon712
45分钟前
0
0
大数据教程(3.2):Linux系统软件安装之自动化脚本

博主前面文章有介绍过软件的安装,可以帮助IT人员顺利的完成功能软件安装;但是,对于我们运维人员或者需要管理软件安装的项目经理来说,有些应用一次行需要搭建很多台相同的软件环境(如tom...

em_aaron
今天
0
0
Spring Boot 2.0.3 JDBC整合Oracle 12

整合步骤 1. Oracle驱动引入 Oracle驱动一般不能通过maven仓库直接下载得到,需自行下载并导入到项目的lib目录下,建议通过如下pom依赖引入下载的Oracle驱动 <!-- Oracle 驱动 -->...

OSC_fly
今天
0
0
java 8 并行流 - 1

下面创建一个并行流,与顺序流 //顺序流Stream.iterate(0L, i -> i + 1) .limit(Integer.MAX_VALUE) .reduce(0L, Long::sum);//并行流Stream.iterate(0L, i -> i......

Canaan_
今天
0
0
数据结构与算法5

二分法采用向下取整的方法 使用有序数组的好处是查找的速度比无序数组快的多,不好的方面是因为要将所有靠后的数据移开,所以速度较慢,有序数组和无序数组的删除操作都很慢。 有序数组在查找...

沉迷于编程的小菜菜
昨天
1
1
SpringBoot | 第十一章:Redis的集成和简单使用

前言 上几节讲了利用Mybatis-Plus这个第三方的ORM框架进行数据库访问,在实际工作中,在存储一些非结构化或者缓存一些临时数据及热点数据时,一般上都会用上mongodb和redis进行这方面的需求。...

oKong
昨天
5
0
对基于深度神经网络的Auto Encoder用于异常检测的一些思考

一、前言 现实中,大部分数据都是无标签的,人和动物多数情况下都是通过无监督学习获取概念,故而无监督学习拥有广阔的业务场景。举几个场景:网络流量是正常流量还是攻击流量、视频中的人的...

冷血狂魔
昨天
0
0
并发设计之A系统调用B系统

A-->B A在发送请求之前,用乐观锁,减少对B的重复调用,这样一定程度上是幂等性。 比如A系统支付功能,要调用B系统进行支付操作,但是前端对"支付"按钮不进行控制,即用户会不断多次点击支付...

汉斯-冯-拉特
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部