使用Visual Studio Code搭建TypeScript开发环境

1、TypeScript是干什么的 ?

  • TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格,也是本人的偶像)领衔开发的。
    (安德斯·海尔斯伯格是Delphi 和 C#之父,Turbo Pascal 编译器的主要作者,.NET 概念发起人之一,同时也是TypeScript开源项目的重要领导人。他于1996年加入微软,目前是 C# 语言的首席架构师和 TypeScript 的核心开发者,获微软卓越工程师 Distinguished Engineer 和微软技术院士 Technical Fellow 称号。)


2、为什么选择TypeScript ?

  • JavaScript 只是一个脚本语言,并非设计用于开发大型 Web 应用,JavaScript 没有提供类和模块的概念,而 TypeScript 扩展了 JavaScript 实现了这些特性。
  • TypeScript 主要特点包括:
    TypeScript 是微软推出的开源语言,使用 Apache 授权协议,
    TypeScript 是 JavaScript 的超集。
    TypeScript 增加了可选类型、类和模块
    TypeScript 可编译成可读的、标准的 JavaScript
    TypeScript 支持开发大规模 JavaScript 应用
    TypeScript 设计用于开发大型应用,并保证编译后的 JavaScript 代码兼容性
    TypeScript 扩展了 JavaScript 的语法,因此已有的 JavaScript 代码可直接与 TypeScript 一起运行无需更改
    TypeScript 文件扩展名是 ts,而 TypeScript 编译器会编译成 js 文件
    TypeScript 语法与 JScript .NET 相同 
    TypeScript 易学易于理解

  • 网上流传一句话,Angular 2选择了TypeScript作为主语言。如果你是个C#程序员,一定会对它的语法感觉似曾相识。没错,TypeScript和C#、Delphi有同一个“爹” —— 传奇人物Anders Hejlsberg。即使是Java程序员,也不会觉得陌生:强类型、类、接口、注解等等,无一不是后端程序员们耳熟能详的概念。说到底,并没有什么前端语言和后端语言,在语言领域耕耘多年的Anders太熟悉优秀语言的共性了,他所做的取舍值得你信赖。

  • TypeScript的崛起

  • TypeScript有良好的工具支持。以前,只有Visual Studio提供TypeScript工具。现在,情形大为改观。WebStorm增加了TypeScript支持Eclipse也有了TypeScript插件
    而且微软也发布了Sublime Text开发TypeScript插件,Atom也支持TypeScript开发。

  • 微软与Google达成JavaScript框架合作:将共同打造Angular 2
  • Angular 2:基于 TypeScript
  • Facebook联合创始人的二次创业,他们为什么转向TypeScript


3、TypeScript语法特性

  • 兼容 ECMAScript 2015(ES6)规范,可选择编译成ES6或ES5规范的JavaScript代码(ECMAScript 3及以上版本);
  • 面向对象,并拥有一些函数式特性;
  • 类型语言;
  • 实现了注解、泛型等特性;
  • 适配大型App构建。

  • 类 Classes
  • 接口 Interfaces
  • 模块 Modules
  • 类型注解 Type annotations
  • 编译时类型检查 Compile time type checking
  • Arrow 函数 (类似 C# 的 Lambda 表达式)


4、TypeScrip与JavaScript 的区别

  • TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译。

  • 通过编译器把TypeScript程序代码编译生成JavaScript代码。
  • 在线编写测试TypeScript


5、安装Visual Studio Code

  • Visual Studio Code (VS Code) 是微软开发的、免费开源、功能强大的轻量级的IDE。
  • 运行环境:Windows 10 (64位)

下载Visual Studio Code (VSCodeSetup-stable.exe)

运行:VSCodeSetup-stable.exe,安装Visual Studio Code :


6、安装Node.js

下载Node.js(node-v4.5.0-x64.msi)

运行:node-v4.5.0-x64.msi,安装Node.js :


7、安装TypeScript Compiler

  • 安装好Node.js后,可以直接使用npm工具来安装TypeScript,这个TypeScript的Package其实也是一个Compiler,可以通过这个Complier将typescript编译成javascript。打开命令提示符cmd,进入控制台(或其他终端Terminal),输入指令:
    npm install -g typescript


8、更新TypeScript Compiler

  • 输入指令:npm update -g typescript
  • 查看版本:tsc -v


9、安装 Tpyings

  • typings 主要是用来获取.d.ts文件。当typescript使用一个外部JavaScript库时,会需要这个文件,当然好多的编译器都用它来增加智能感知能力。
  • 输入指令:npm install -g typings


10、安装 node 的 .d.ts 库

  • 输入指令:typings install dt~node –global


11、创建ts_demo项目

  • 创建ts_demo目录
  • 在命令行cmd下进入ts_demo目录
  • cd ts_demo
  • 输入:npm init,创建package.json


12、创建 tsconfig.json

  • (1)、启动VS Code
  • (2)、选择菜单 文件/打开文件夹,选择刚刚创建的ts_demo文件夹
  • (3)、双击tsconfig.json打开如下图:


13、修改tsconfig.json

  • 把tsconfig.json修改为:

  1.  
    {
  2.  
    "compilerOptions": {
  3.  
    "module": "commonjs",
  4.  
    "target": "es6",
  5.  
    "noImplicitAny": false,
  6.  
    "sourceMap": true,
  7.  
    "allowJs": true
  8.  
    }
  9.  
    ,
  10.  
    "exclude": [
  11.  
    "node_modules"
  12.  
    ]
  13.  
    }
  • target:编译之后生成的JavaScript文件需要遵循的标准。有三个候选项:es3、es5、es2015。
  • noImplicitAny:为false时,如果编译器无法根据变量的使用来判断类型时,将用any类型代替。为true时,将进行强类型检查,无法推断类型时,提示错误。
  • module:遵循的JavaScript模块规范。主要的候选项有:commonjs、AMD和es6。
  • removeComments:编译生成的JavaScript文件是否移除注释。
  • sourceMap:编译时是否生成对应的source map文件。这个文件主要用于前端调试。当前端js文件被压缩引用后,出错时可借助同名的source map文件查找源文件中错误位置。
  • outDir:编译输出JavaScript文件存放的文件夹。
  • include、exclude:编译时需要包含/剔除的文件夹。

14、配置 TypeScript 编译

  • 按ctrl + shift + b编译, 如果没有配置过,task, 就会在上面提示(如图)。

  • 选择【配置任务运行程序】


15、新建greeter.ts文件

  1.  
     
  2.  
    class Student {
  3.  
    firstName : string;
  4.  
    lastName : string;
  5.  
     
  6.  
    constructor(fiestName : string, lastName : string) {
  7.  
    this.firstName = fiestName;
  8.  
    this.lastName = lastName;
  9.  
    }
  10.  
     
  11.  
    greeter() {
  12.  
    return "Hello,您好" + this.firstName + " " + this.lastName;
  13.  
    }
  14.  
    }
  15.  
     
  16.  
    var user = new Student("王", "小明");
  17.  
     
  18.  
    // document.body.innerHTML = user.greeter();
  19.  
    document.body.innerHTML = user.greeter();
  20.  
     

16、编译greeter.ts

  • 编译greeter.ts出错:
  • "检测到全局安装的 tsc 编译器(2.0.3)与 VS 代码语言服务(1.8.10)版本不匹配。这可能导致不一致的编译错误。"


17、使用新版本TypeScript

在命令行(cmd)下输入:npm install typescript@2.0.3

  • 选择菜单 文件/首选项/工作区设置

  • settings.json文件修改为:

    1.  
      {
    2.  
      "typescript.tsdk": "node_modules/typescript/lib"
    3.  
      }


18、修改启动源

  • 按F5开始调试会生成: launch.json
  • 用VS Code打开项目的launch.json文件,"program"条目,修改如下:
    ···
     "program": "${workspaceRoot}/greeter.js",
    ···


19、创建index.html

输入:html:5,按tab键回自动产生index.html文档,然后修改如下:

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="utf-8"/>
  5.  
    <title>greeter</title>
  6.  
    </head>
  7.  
    <body>
  8.  
    <script src="greeter.js"></script>
  9.  
    </body>
  10.  
    </html>


20、浏览器打开index.html

初步学习TypeScript的更多相关文章

  1. json2.js的初步学习与了解

    json2.js的初步学习与了解,想要学习json的朋友可以参考下. json2.js的初步学习与了解 1.)该js的下载地址是:http://www.json.org/json2.js 2.)在页面 ...

  2. 老周的ABP框架系列教程 -》 一、框架理论初步学习

    老周的ABP框架系列教程 -- 一.框架理论初步学习   1. ABP框架的来源与作用简介 1.1  简介 1.1.1       ABP框架全称为"ASP.NET Boilerplate ...

  3. 初步学习nodejs,业余用node写个一个自动创建目录和文件的小脚本,希望对需要的人有所帮助

    初步学习nodejs,业余用node写个一个自动创建目录和文件的小脚本,希望对需要的人有所帮助,如果有bug或者更好的优化方案,也请批评与指正,谢谢,代码如下: var fs = require('f ...

  4. EF Codefirst 初步学习(二)—— 程序管理命令 更新数据库

    前提:搭建成功codefirst相关代码,参见EF Codefirst  初步学习(一)--设置codefirst开发模式 具体需要注意点如下: 1.确保实体类库程序生成成功 2.确保实体表类库不缺少 ...

  5. 初步学习python

    自计算机诞生以来,也伴随着计算机语言的诞生,现在,全世界的编程语言有600多种,但流行的编程语言也就20多种. Java和C一直占据着前两名.但是近年来伴随着人工智能的发展,Python发展迅猛,以其 ...

  6. Git的初步学习

    前言 感谢! 承蒙关照~ Git的初步学习 为什么要用Git和Github呢?它们的出现是为了用于提交项目和存储项目的,是一种很方便的项目管理软件和网址地址. 接下来看看,一家公司的基本流程图: 集中 ...

  7. 语法分析器初步学习——LISP语法分析

    语法分析器初步学习——LISP语法分析 本文参考自vczh的<如何手写语法分析器>. LISP的表达式是按照前缀的形式写的,比如(1+2)*(3+4)在LISP中会写成(*(+ 1 2)( ...

  8. 状态保持以及AJAX的初步学习

    嘿嘿,今天学习的有点迷茫哦,主要学习把验证码使用在登录页面时间的一些逻辑,学习这个时间并没有那么的迷惑哦,可是自己写程序时间倒是有点反应迟钝,不过还好总是在最后搞清楚啦,另外就是一步一步的学习是接近项 ...

  9. LinQ的初步学习与总结

    嘿嘿,说起来ORM和LinQ,就感觉离我好遥远的,在学校是没有学习的,所以总感觉学习了LinQ就是大神,现在嘛,终于也体会一点,感觉LinQ只是初步学习,没有太难,当然以后使用在项目中就没有这样的简单 ...

随机推荐

  1. 【LeetCode】839. 相似字符串组 Similar String Groups (Python)

    作者: 负雪明烛 id: fuxuemingzhu 公众号:每日算法题 本文关键词:LeetCode,力扣,算法,算法题,字符串,并查集,刷题群 目录 题目描述 解题思路 并查集 代码 刷题心得 欢迎 ...

  2. 【LeetCode】897. Increasing Order Search Tree 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 重建二叉树 数组保存节点 中序遍历时修改指针 参考资 ...

  3. 【LeetCode】60. Permutation Sequence 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...

  4. 后缀数组【原理+python代码】

    后缀数组 参考:https://blog.csdn.net/a1035719430/article/details/80217267 https://blog.csdn.net/YxuanwKeith ...

  5. 计算机图形学——梁友栋-Barsky算法

    梁算法是计算机图形学上最经典的几个算法,也是目前唯一一个以中国人命名的出现在国内外计算机图形学课本的算法,我之前在介绍裁剪算法的时候介绍过这个算法 https://www.cnblogs.com/wk ...

  6. Linux远程操作

    应用场景 公司开发时候,具体的应用场景是这样的1.linux服务器是开发小组共享 正式上线的项目是运行在公网 因此程序员需要远程登录到Linux进行项目管理或者开发 远程登录客户端有Xshell6,X ...

  7. <数据结构>KMP算法

    next数组 定义 严格定义:next[i]表示使子串s[0...k] == s[i-k...i]的最大的k(前后缀可以重叠,但不能是s[0..i]本身) 含义:最长相等前后缀的下标,没有则赋-1 图 ...

  8. Java基础寒假作业-简易计算器

    需求: 使用Java编写计算器的控制台程序,完成简单的加减乘除运算.实现以下功能: 1.运算选择 请用户选择一个算法(1.加法 2.减法 3.乘法 4.除法 5.关闭计算器) 2.计算 a)加法:实现 ...

  9. Java高级程序设计笔记 • 【第4章 网络编程】

    全部章节   >>>> 本章目录 4.1 网络基础知识 4.1.1 IP地址 4.1.2 端口号 4.1.3 使用InetAddress 4.1.4 InetAddress 类 ...

  10. Java面向对象笔记 • 【第9章 JDBC编程】

    全部章节   >>>> 本章目录 9.1 JDBC基础 9.1.1 JDBC简介 9.1.2 JDBC常用API简介 JDBC 常用API功能说明 9.1.3 JDBC编程步骤 ...