Typescript学习(一)----准备篇(vscode编译ts文件)

时间:2019-05-11 09:49来源:计算机教程
使用typescript编译工具 大部分的主流浏览器还不支持typescript脚本的语法,所以我们需要一些编译工具来实现typescript对JavaScript的转换: 1.使用typescript官网的工具: http://www.typescriptlang.

使用typescript编译工具

大部分的主流浏览器还不支持typescript脚本的语法,所以我们需要一些编译工具来实现typescript对JavaScript的转换:
1.使用typescript官网的工具:http://www.typescriptlang.org/play/index.html
2.安装本地的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 :

vnsc5858威尼斯城官网 1


我们为什么要学习typescript语言?

1.因为typescript支持es6的规范
2.减少在开发过程中代码出错几率,提高代码质量

13、修改tsconfig.json

  • 把tsconfig.json修改为:

vnsc5858威尼斯城官网 2

{
    "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:编译时需要包含/剔除的文件夹。

本地安装使用typescript?

1.输入下面的命令

npm install -g typescript

2.在命令行中输入

tsc --init

3.在.vscode文件夹下新建tasks.json文件,输入下面的代码

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "problemMatcher": [
                "$tsc"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

4.在你的项目根目录下面新建文件tsconfig.json文件,输入下面的内容

{

    "compilerOptions": {

        "target": "es5",

        "noImplicitAny": false,

        "module": "commonjs",

        "removeComments": true,

        "sourceMap": false,

        "outDir": "Golang/TypeScript/"

     }

 }

5.使用快捷键ctrl shift B运行task任务,并选择带有监视字样的选项
最后粘出我的项目文件夹结构和配置代码
vnsc5858威尼斯城官网 3

3、TypeScript语法特性

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

  • 类 Classes

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

理解es5,es6,javascript,typescript的概念和关系?

es是JavaScript脚本规范,我们常用的es5,es6是这个规范的两个不同版本。因此,ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现

17、使用新版本TypeScript

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

vnsc5858威尼斯城官网 4

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

  • settings.json文件修改为:

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

    vnsc5858威尼斯城官网 5


什么是typescript?

typescript是微软开发的一个脚本语言。他是JavaScript的超级,他遵循es6语法规范,他扩展了JavaScript的语法。

 

9、安装 Tpyings

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

vnsc5858威尼斯城官网 6


18、修改启动源

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

vnsc5858威尼斯城官网 7


7、安装TypeScript Compiler

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

vnsc5858威尼斯城官网 8


8、更新TypeScript Compiler

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

vnsc5858威尼斯城官网 9


11、创建ts_demo项目

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

vnsc5858威尼斯城官网 10


14、配置 TypeScript 编译

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

vnsc5858威尼斯城官网 11

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

vnsc5858威尼斯城官网 12


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

编辑:计算机教程 本文来源:Typescript学习(一)----准备篇(vscode编译ts文件)

关键词: