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

1、TypeScript是为何的 ?

  • TypeScript是出于微软Anders
    Hejlsberg(安德斯·海尔斯伯格,也是本人的偶像)领衔开发之。
    (安德斯·海尔斯伯格是Delphi 和 C#的大,Turbo
    Pascal 编译器的基本点作者,.NET 概念发起人之一,同时也是TypeScript开源路之显要领导人。他深受1996年投入微软,目前凡 C# 语言的上位架构师和 TypeScript 的中坚开发者,获微软卓越工程师 Distinguished
    Engineer 和微软技术院士 Technical Fellow 称号。)

  • 安德斯介绍
    TypeScript
  • C#之父Anders首来华:从TypeScript看开源
  • Delphi、C#的父Anders Hejlsberg首涂鸦访华
    推广TypeScript
  • SegmentFault 创始人祁宁对话 C# 之父 Anders
    Hejlsberg
  • TypeScript:
    应用级别之JavaScript开发

  • TypeScript 是微软开发之 JavaScript
    的超集,TypeScript兼容JavaScript,可以充满入JavaScript代码然后运行。TypeScript与JavaScript相比提高的地方
    包括:加入注释,让编译器理解所支撑之目标同函数,编译器会移除注释,不会见大增出;增加一个整体的切近组织,使的更形象传统的面向对象语言。


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 :

图片 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其实也是一个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
  • (2)、选择菜单 文件/打开文件夹,选择刚刚创建的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、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, 就见面以面提示(如图)。

图片 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.3)与 VS
    代码语言服务(1.8.10)版本不匹配。这恐怕致不一样的编译错误。”

图片 12


17、使用新版本TypeScript

于指令执行(cmd)下输入:npm
install typescript@2.0.3

图片 13

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

  • settings.json文件修改为:

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

    图片 14


18、修改初始动源

  • 准F5起调剂会变动: 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地图