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. centOS7 mini配置linux服务器（五） 安装和配置tomcat和mysql

    配置java运行环境,少不了服务器这一块,而tomcat在服务器中占据了很大一部分份额,这里就简单记录下tomcat安装步骤. 下载 首先需要下载tomcat7的安装文件,地址如下: http://t ...

  2. Android java.io.FileNotFoundException:*** (Permission denied)

    自从离开上海来到杭州之后,陆续接触了Android,Python,C++,OpenCV,最为一个新人来说,一路上遇到了很多坑,幸运的是 这互联网的强大(大傻子我还是蛮喜欢的哈),一路填填补补总算走了下 ...

  3. js数组操作-添加，删除

    js 数组操作常用方法. push():在数组后面加入元素,并返回数组的长度 unshift():在数组前面加入元素,并返回数组的长度 pop()删除最后一个元素 shift()删除第一个元素 var ...

  4. TCP/IP协议栈(三）——linux 向下的报文处理

    应用程序连接服务器时,目的地套接字地址(端口号和IP地址)以参数形式传递给系统调用connect(tcp_v4_connect()).下面逐步介绍初始化该连接 检查内核路由表,查找给定目的地IP地址路 ...

  5. vue-router源码学习（一）

    因为v3.01版本中的   /src代码使用TypeScript进行书写,我这里仅仅用作模块学习, 具体学习的还是 /dist/vue-router.js 代码. (一)基本使用方式 JS代码 // ...

  6. 学习整理与细化（1）——Internet 的域名系统（domain name system）

    2015-09-20 整理人:承蒙时光 如有错误欢迎指教O(∩_∩)O谢谢 1.作用:提供主机符号符名与IP地址之间转换服务也称域名服务: 2..域名系统的层次型结构命名机制(服务器地址): 计算机名 ...

  7. [js高手之路] es6系列教程 - Map详解以及常用api

    ECMAScript 6中的Map类型是一种存储着许多键值对的有序列表.键值对支持所有的数据类型. 键 0 和 ‘0’会被当做两个不同的键,不会发生强制类型转换. 如何使用Map? let map = ...

  8. canvas 简易的加载进度条

    做一个web app,想在第一次或者更新的时候,有一个更新进度条,我个人比较喜欢圆的那种. canvas + svg高低配,应该还不错的.顺便一提,canvas用来压缩图片也是么么哒的. 先看下效果图 ...

  9. 【CSS初识】

    一.CSS是什么? CSS是一种样式表语言,用于为HTML文档定义布局.例如,CSS涉及字体.颜色.边距.高度.宽度.背景图像.高级定位等方面. HTML用于结构化内容:CSS用于格式化结构化的内容. ...

  10. T-SQL逻辑查询处理

    引言 本文是对<Microsoft SQL SERVER 2008技术内幕 T-SQL查询>中的第一章做的阅读笔记,这一章的主要内容是分析SQL查询中各子句的执行顺序.如果你对此已了然于胸 ...