TypeScript开发条件搭建(Visual studio code)

利用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
  • 非死不可联合开创者的二次创业,他们为啥转向TypeScript

3、TypeScript语法特性

  • 匹配 ECMAScript
    2015(ES6)规范,可接纳编译成ES6或ES5业内的JavaScript代码(ECMAScript
    3及以上版本);
  • 面向对象,并持有一些函数式特性;
  • 花色语言;
  • 心想事成了诠释、泛型等风味;
  • 适配大型App构建。

  • 类 Classes

  • 接口 Interfaces
  • 模块 Modules 
  • 项目注脚 Type annotations
  • ECMAScript,编译时类型检查 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 :

ECMAScript 1


6、安装Node.js

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

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

ECMAScript 2


7、安装TypeScript Compiler

  • 设置好Node.js后,可以一贯利用npm工具来安装TypeScript,这些TypeScript的Package其实也是一个Compiler,可以经过这多少个Complier将typescript编译成javascript。打开命令指示符cmd,进入控制台(或另外终端Terminal),输入指令:
    npm install -g typescript

ECMAScript 3


8、更新TypeScript Compiler

  • 输入指令:npm update -g typescript
  • 翻开版本:tsc -v

ECMAScript 4


9、安装 Tpyings

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

ECMAScript 5


10、安装 node 的 .d.ts 库

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

ECMAScript 6


11、创建ts_demo项目

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

ECMAScript 7


12、创建 tsconfig.json

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

ECMAScript 8


13、修改tsconfig.json

  • 把tsconfig.json修改为:

ECMAScript 9

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "noImplicitAny": false,
        "sourceMap": true,
        "allowJs": true
    }
    ,
    "exclude": [
        "node_modules"
    ]
}
  • target:编译之后生成的JavaScript文件需要服从的正统。有几个候选项:es3、es5、es2015。
  • noImplicitAny:为false时,假使编译器不可能按照变量的运用来判定项目时,将用any类型代替。为true时,将展开强类型检查,无法测算类型时,提示错误。
  • module:遵从的JavaScript模块规范。紧要的候选项有:commonjs、Intel和es6。
  • removeComments:编译生成的JavaScript文件是否移除注释。
  • sourceMap:编译时是不是变动对应的source
    map文件。这一个文件着重用从前端调试。当前端js文件被削减引用后,出错时可凭借同名的source
    map文件查找源文件中错误地点。
  • outDir:编译输出JavaScript文件存放的公文夹。
  • include、exclude:编译时索要包含/剔除的文书夹。

14、配置 TypeScript 编译

  • 按ctrl + shift + b编译, 假使没有配置过,task, 就会在上头指示(如图)。

ECMAScript 10

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

ECMAScript 11


15、新建greeter.ts文件

class Student {
    firstName : string;
    lastName : string;

    constructor(fiestName : string,  lastName : string) {
        this.firstName = fiestName;
        this.lastName = lastName;
    }

    greeter() {
        return "Hello,您好" + this.firstName + " " + this.lastName;
    }
}

var user = new Student("王", "小明");

// document.body.innerHTML = user.greeter();
document.body.innerHTML = user.greeter();

16、编译greeter.ts

  • 编译greeter.ts出错:
  • “检测到全局安装的 tsc 编译器(2.0.3)与 VS
    代码语言服务(1.8.10)版本不般配。这或者造成不同等的编译错误。”

ECMAScript 12


17、使用新版本TypeScript

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

ECMAScript 13

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

  • settings.json文件修改为:

    {
    "typescript.tsdk": "node_modules/typescript/lib"
    }
    

    ECMAScript 14


18、修改启动源

  • 按F5起初调剂会转变: launch.json
  • 用VS Code打开项目标launch.json文件,”program”条目,修改如下:
    ···
     “program”: “${workspaceRoot}/greeter.js”,
    ···

ECMAScript 15


19、创建index.html

输入:html:5,按tab键回机关发出index.html文档,然后修改如下:

<!DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8"/>
            <title>greeter</title>
    </head>
    <body>
        <script src="greeter.js"></script>
    </body>
</html>

ECMAScript 16


20、浏览器打开index.html

ECMAScript 17