运用Visual Studio Code搭建TypeScript开发条件

一、TypeScript是干吗的 ?

  • TypeScript是由微软AndersHejlsberg(Anders·海尔(Haier)斯Berg,也是作者的偶像)领衔开发的。
    (Anders·海尔(Haier)斯伯格是Delphi 和 C#之父,Turbo
    帕斯Carl 编译器的关键作者,.NET 概念发起人之一,同时也是TypeScript开源项指标最首要带头人。他于壹玖九陆年参与微软,近年来是 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
    二选拔了TypeScript作为主语言。尽管你是个C#程序员,一定会对它的语法感觉似曾相识。没有错,TypeScript和C#、Delphi有同二个“爹”
    —— 传说人物AndersHejlsberg。固然是Java程序员,也不会以为面生:强类型、类、接口、表明等等,无一不是后端程序员们纯熟的概念。说起底,并从未什么样前端语言和后端语言,在言语领域耕耘多年的Anders太熟习卓越语言的共性了,他所做的挑3拣肆值得您相信。

  • TypeScript的崛起

  • TypeScript有美好的工具帮忙。在此之前,只有Visual
    Studio提供TypeScript工具。现在,情况大为改观。WebStorm增加了TypeScript支持Eclipse也有了TypeScript插件
    而且微软也公告了Sublime
    Text开发TypeScript插件
    ,Atom也支持TypeScript开发。

  • 微软与谷歌(Google)达成JavaScript框架合营:将一同构建Angular

  • Angular 2:基于
    TypeScript
  • Facebook联合开创者的二回创业,他们为什么转向TypeScript

三、TypeScript语法本性

  • 同盟 ECMAScript
    201五(ES陆)规范,可挑选编写翻译成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 拾 (63个人)

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

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

图片 1


6、安装Node.js

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

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

图片 2


7、安装TypeScript Compiler

  • 安装好Node.js后,可以一贯利用npm工具来安装TypeScript,那个TypeScript的Package其实也是2个Compiler,能够透过这几个Complier将typescript编写翻译成javascript。打开命令提醒符cmd,进入控制台(或其余终端Terminal),输入指令:
    npm install -g typescript

图片 3


8、更新TypeScript Compiler

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

图片 4


9、安装 Tpyings

  • typings
    首倘诺用来获取.d.ts文件。当typescript使用贰个表面JavaScript库时,会须求这几个文件,当然好多的编写翻译器都用它来充实智能感知能力。
  • 输入指令:npm install -g typings

图片 5


10、安装 node 的 .d.ts 库

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

图片 6


11、创建ts_demo项目

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

图片 7


12、创建 tsconfig.json

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

图片 8


13、修改tsconfig.json

  • 把tsconfig.json修改为:

图片 9

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "noImplicitAny": false,
        "sourceMap": true,
        "allowJs": true
    }
    ,
    "exclude": [
        "node_modules"
    ]
}
  • target:编写翻译之后生成的JavaScript文件必要根据的标准。有多个候选项:es3、es5、es二零一五。
  • noImplicitAny:为false时,假设编写翻译器不可能根据变量的施用来判断项目时,将用any类型代替。为true时,将展开强类型检查,不可能测算类型时,提醒错误。
  • module:遵从的JavaScript模块规范。首要的候选项有:commonjs、AMD和es陆。
  • removeComments:编写翻译生成的JavaScript文件是还是不是移除注释。
  • sourceMap:编写翻译时是否变动对应的source
    map文件。那些文件根本用在此以前端调试。当前端js文件被减去引用后,出错开上下班时间可凭借同名的source
    map文件查找源文件中错误地点。
  • outDir:编写翻译输出JavaScript文件存放的文书夹。
  • include、exclude:编写翻译时需求包涵/剔除的公文夹。

14、配置 TypeScript 编译

  • 按ctrl + shift + b编写翻译, 假若未有安排过,task, 就会在上头提醒(如图)。

图片 10

  • 选拔【配置职责运营程序】

图片 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.三)与 VS
    代码语言服务(一.八.十)版本不匹配。那或者引致不一样等的编写翻译错误。”

图片 12


壹柒、使用新版本TypeScript

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

图片 13

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

  • settings.json文件修改为:

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

    图片 14


1八、修改运转力源

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

图片 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>

图片 16


20、浏览器打开index.html

图片 17

相关文章

网站地图xml地图