TypeScript笔记 1--环境搭建
TypeScript是什么
Typescript是JavaScript的超集，支持ES6特性并且提供了类型系统，可以编译成Javascript。是微软开发且已经在github上开源。
ES6（ES2015，ES2016等）虽然已发布，但是很多浏览器厂商对其并不是完全支持,当前我们要想使用最新的ES6特性，必须使用转换工具（如babel），才能最终运行在浏览器上。而TypeScript对ES6新特性的支持使得我们可以直接使用开发，并且不用依赖第三方工具（不是绝对的），再加上静态类型检查等，使得我们可以像写java一样爽。
环境搭建
有两种主要的方式获取TypeScript工具。通过npm（Node.js包管理器）和安装TypeScript的Visual Studio插件。作为前端开发人员在这里使用npm这种简单高效方式安装。
- 1 npm安装
npm install -g typescript
- 2 是否安装成功,在命令行中输入以下命令，如果出现版本号表示安装成功
tsc -v
入门示例
- 创建文件
Person.ts,并输入如下内容
class Person {
name:string;
age:number;
constructor(name:string, age:number) {
this.name = name;
this.age = age;
}
msg() {
return `${this.name} is ${this.age} years old`;
}
}
let user = new Person('Jack', 20);
document.body.innerHTML = user.msg();
- 编译后会在同目录下生成
Person.js文件，编译命令如下：
tsc Person.ts
- 编译后的文件
Person.js内容如下，其实就是javascript源码。
var Person = (function () {
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.msg = function () {
return this.name + " is " + this.age + " years old";
};
return Person;
}());
var user = new Person('Jack', 20);
document.body.innerHTML = user.msg();
- 新建hello.html文件，输入以下内容：
<!DOCTYPE html>
<html>
<head><title>TypeScript Hello World</title></head>
<body>
<script src="Person.js"></script>
</body>
</html>
- 用浏览器打开hello.html即可看到效果
工欲善其事必先利其器--VS Code
VS Code也是微软开发的编辑器，其本身也是使用TypeScript开发的，代码已在github上开源，基于Electron框架开发，相对于Atom速度快，体验较好，是TypeScript IDE的首选。
其源码编辑器monaco-editor联想功能比较强大,已经单独开源。微信小程序开发工具的中源码编辑器就是使用了monaco-editor。另外其插件系统使得我们可以丰富其功能。
关于VS CODE更多信息请查看官网文档。
TypeScript笔记 1--环境搭建的更多相关文章
- Android Studio 学习笔记(一)环境搭建、文件目录等相关说明
Android Studio 学习笔记(一)环境搭建.文件目录等相关说明 引入 对APP开发而言,Android和iOS是两大主流开发平台,其中区别在于 Android用java语言,用Android ...
- SpringData JPA的学习笔记之环境搭建
一.环境搭建 1.加入jar包 spring jar+jpa jar +springData jar >>SpringData jar包 2.配置applicationCont ...
- 我的Java学习笔记 -开发环境搭建
开始学习Java~ 一.Java简介 Java编程语言是一种简单.面向对象.分布式.解释型.健壮安全.与系统无关.可移植.高性能.多线程和动态的语言. Java分为三个体系: JavaSE(J2SE) ...
- Django学习笔记 开发环境搭建
为什么使用django?1.支持快速开发:用python开发:数据库ORM系统,并不需要我们手动地构造SQL语句,而是用python的对象访问数据库,能够提升开发效率.2.大量内置应用:后台管理系统a ...
- cocos2d-x lua 学习笔记(1) -- 环境搭建
Cocos2d-x 3.0以上版本的环境搭建和之前的Cocos2d-x 2.0 版差异较大的,同时从Cocos2d-x 3.0项目打包成apk安卓应用文件,搭建安卓环境的步骤有点繁琐,但搭建一次之后, ...
- Mybatis学习笔记之---环境搭建与入门
Mybatis环境搭建与入门 (一)环境搭建 (1)第一步:创建maven工程并导入jar包 <dependencies> <dependency> <groupId&g ...
- 前端框架vue学习笔记：环境搭建
兼容性 不兼容IE8以下 Vue Devtools 能够更好的对界面进行审查和调试 环境搭建 1.nodejs(新版本的集成了npm)[npm是node包管理 node package manager ...
- Web安全测试学习笔记 - vulhub环境搭建
Vulhub和DVWA一样,也是开源漏洞靶场,地址:https://github.com/vulhub/vulhub 环境搭建过程如下: 1. 下载和安装Ubuntu 16.04镜像,镜像地址:htt ...
- 【Django学习笔记】-环境搭建
对于初学django新手,根据以下步骤可以快速进行Django环境搭建 虚拟环境创建 使用virtualenv创建并启用虚拟机环境 ,关于virtualenv可参考https://www.yuque. ...
随机推荐
- iOS网络模块优化（失败重发、缓存请求有网发送）
iOS开发中,一般都是通过AFN搭建一个简易的网络模块来进行与服务器的通信,这一模块要优化好没那么简单,需要花费很多时间与精力,仅仅根据这几年来的填坑经验,总结下这一块的需要注意的地方,也是给自己梳理 ...
- Python练习100则--部分概念的没有做
# coding = utf-8 import math, osfrom random import randint def Binary(): res = int(-1 / 2) res1 = in ...
- Linux目录结构介绍-http://yangrong.blog.51cto.com/6945369/1288072
1.树状目录结构图 2./目录 目录 描述 / 第一层次结构的根.整个文件系统层次结构的根目录. /bin/ 需要在单用户模式可用的必要命令(可执行文件):面向所有用户,例如:cat.ls.cp,和/ ...
- Jmeter 创建FTP测试计划
FTP服务主要提供上传和下载功能. 操作步骤: 1.创建一个线程组 2.线程组--->添加--->配置元件--->FTP请求缺省值:输入服务器名称或IP. 3.线程组--->添 ...
- 记录python学习过程中的一些小心得
1.python中一切皆对象,内置数据结构也是对象.处理一个对象就是利用它带有的方法和属性,对该对象进行处理,一步步达到我们想要的结果. 2.编程时,先构思好我们处理的对象是什么,具有哪些属性和方法, ...
- Webpack 2 视频教程 013 - 自动分离 CSS 到独立文件
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
- windows10合并分区
删除无用分区 将分区D合并到分区C,"计算机"---右键"管理"--"磁盘管理" 点击分区名,右键选择删除卷,如果有数据,提前备份 扩展分区 ...
- robotframework的学习笔记（十六）----robotframework标准库String
官方文档:http://robotframework.org/robotframework/latest/libraries/String.html Introduction A test libra ...
- 简单认识python cmd模块
0X00 前言 在早前用别人的工具时,发现有些大佬会用到交互式shell,那时候就挺好奇的,但是一直都没有看一下怎么做到的. 今天在翻p牛的博客的时候,看到他早之前写的一个工具就有用到交互式shell ...
- tomcat 发布简单的html网站
1.建立一个文件夹D:\Demo 2.在Demo目录下,建立一个WEB-INF的文件夹并将web.xml放在里面,D:\Demo\WEB-INF\web.xml 3.将index.html文件放在De ...