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--环境搭建的更多相关文章

  1. Android Studio 学习笔记(一)环境搭建、文件目录等相关说明

    Android Studio 学习笔记(一)环境搭建.文件目录等相关说明 引入 对APP开发而言,Android和iOS是两大主流开发平台,其中区别在于 Android用java语言,用Android ...

  2. SpringData JPA的学习笔记之环境搭建

    一.环境搭建 1.加入jar包   spring jar+jpa jar +springData jar >>SpringData jar包     2.配置applicationCont ...

  3. 我的Java学习笔记 -开发环境搭建

    开始学习Java~ 一.Java简介 Java编程语言是一种简单.面向对象.分布式.解释型.健壮安全.与系统无关.可移植.高性能.多线程和动态的语言. Java分为三个体系: JavaSE(J2SE) ...

  4. Django学习笔记 开发环境搭建

    为什么使用django?1.支持快速开发:用python开发:数据库ORM系统,并不需要我们手动地构造SQL语句,而是用python的对象访问数据库,能够提升开发效率.2.大量内置应用:后台管理系统a ...

  5. cocos2d-x lua 学习笔记(1) -- 环境搭建

    Cocos2d-x 3.0以上版本的环境搭建和之前的Cocos2d-x 2.0 版差异较大的,同时从Cocos2d-x 3.0项目打包成apk安卓应用文件,搭建安卓环境的步骤有点繁琐,但搭建一次之后, ...

  6. Mybatis学习笔记之---环境搭建与入门

    Mybatis环境搭建与入门 (一)环境搭建 (1)第一步:创建maven工程并导入jar包 <dependencies> <dependency> <groupId&g ...

  7. 前端框架vue学习笔记:环境搭建

    兼容性 不兼容IE8以下 Vue Devtools 能够更好的对界面进行审查和调试 环境搭建 1.nodejs(新版本的集成了npm)[npm是node包管理 node package manager ...

  8. Web安全测试学习笔记 - vulhub环境搭建

    Vulhub和DVWA一样,也是开源漏洞靶场,地址:https://github.com/vulhub/vulhub 环境搭建过程如下: 1. 下载和安装Ubuntu 16.04镜像,镜像地址:htt ...

  9. 【Django学习笔记】-环境搭建

    对于初学django新手,根据以下步骤可以快速进行Django环境搭建 虚拟环境创建 使用virtualenv创建并启用虚拟机环境 ,关于virtualenv可参考https://www.yuque. ...

随机推荐

  1. Golang中的坑二

    Golang中的坑二 for ...range 最近两周用Golang做项目,编写web服务,两周时间写了大概五千行代码(业务代码加单元测试用例代码).用Go的感觉很爽,编码效率高,运行效率也不错,用 ...

  2. PAGELATCH_x 等待--转载

    转自出处:http://www.cnblogs.com/xwdreamer/archive/2012/08/30/2663232.html 0.参考文献 Microsoft SQL Server企业级 ...

  3. 纯前端导出pdf文件

    纯前端js导出pdf,已经用于生产环境. 工具: 1.html2canvas,一种让html转换为图片的工具. 2.pdfmake或者jspdf ,一种生成.编辑pdf,并且导出pdf的工具. pdf ...

  4. springmvc注入类 NoUniqueBeanDefinitionException: No qualifying bean of type [] is defined: expected single错误

    在springmvc中注入服务时用@Service 当有两个实现类时都标明@Service后则会出现异常: nested exception is org.springframework.beans. ...

  5. jQuery 核心函数 (十一)

    函数 描述 jQuery() 接受一个字符串,其中包含了用于匹配元素集合的 CSS 选择器. jQuery.noConflict() 运行这个函数将变量 $ 的控制权让渡给第一个实现它的那个库.

  6. Hyperledger Fabric 1.0 从零开始(十二)——fabric-sdk-java应用【补充】

    在 Hyperledger Fabric 1.0 从零开始(十二)--fabric-sdk-java应用 中我已经把官方sdk具体改良办法,即使用办法发出来了,所有的类及文件都是完整的,在文章的结尾也 ...

  7. Linux下SVN提交时强制写日志

    Linux版本: 1.在svn的hooks目录下新建一个名为pre-commit的文件并为其添加执行权限(用vi pre-commit直接创建) 2.pre-commit文件的内容如下: #!/bin ...

  8. 多工程联编,cocopods的使用

    最近在使用coco2d-x, 想要使用 cocopods,发现我的目录结构如下图 发现我有三个工程文件,  那么 就需要多工程联编使用cocopods, workspace 'xcworkspace' ...

  9. 记一个http-proxy-middleware 代理访问nginx映射的接口不通过的问题(connection close)

    工作过程中遇见一个问题,使用Vue-cli 搭建了一个工程,由于跨域的问题 使用了自带的dev-server Express Server(A后台) http-proxy-middleware 去访问 ...

  10. main函数是主线程吗

    1.线程的概念: 线程是程序最基本的运行单位,而进程不能运行,所以能运行的,是进程中的线程. 2.线程是如何创建起来的: 进程仅仅是一个容器,包含了线程运行中所需要的数据结构等信息.一个进程创建时,操 ...