（一）、相关介绍

1、TypeScript介绍

TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格)领衔开发的。
(安德斯·海尔斯伯格是Delphi 和 C#之父，Turbo Pascal 编译器的主要作者，.NET 概念发起人之一，同时也是TypeScript开源项目的重要领导人)。

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

通过编译器把TypeScript程序代码编译生成JavaScript代码。

2.TypeScript主要特点

TypeScript 是微软推出的开源语言，使用 Apache 授权协议，
TypeScript 是 JavaScript 的超集。
TypeScript 增加了可选类型、类和模块
TypeScript 可编译成可读的、标准的 JavaScript
TypeScript 支持开发大规模 JavaScript 应用
TypeScript 设计用于开发大型应用，并保证编译后的 JavaScript 代码兼容性
TypeScript 扩展了 JavaScript 的语法，因此已有的 JavaScript 代码可直接与 TypeScript 一起运行无需更改
TypeScript 文件扩展名是 ts，而 TypeScript 编译器会编译成 js 文件
TypeScript 语法与 JScript .NET 相同
TypeScript 易学易于理解

3.TypeScript语法特性

面向对象，并拥有一些函数式特性；

类型语言；

实现了注解、泛型等特性；

适配大型App构建。

类 Classes

接口 Interfaces

模块 Modules

类型注解 Type annotations

编译时类型检查 Compile time type checking

Arrow 函数 (类似 C# 的 Lambda 表达式)

（二）、在vscode 中配置开发环境

1.vs安装配置（不多说）

安装vscode

下载地址：https://code.visualstudio.com/

安装Nodejs

下载地址：https://nodejs.org

2.配置，安装 TypeScript

官网地址：英文官网、中文官网

使用npm安装TypeScript编译器

npm install -g typescript

安装指定版本

npm install [email protected]

更新TypeScript Compiler

npm update -g typescript

查看版本

tsc -v

3.安装 Tpyings

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

npm install -g typings

4.安装 node 的 .d.ts 库

typings install dt~node –global

5.创建package.json

npm init 跟着提示下一步就好了。

6.创建 tsconfig.json

tsc --init

修改成

{

"compilerOptions": {

"module": "commonjs",

"target": "es6",

"noImplicitAny": false,

"sourceMap": true,

"allowJs": true

"exclude": [

"node_modules"

]

}

7.配置 TypeScript 编译

按ctrl + shift + b, 如果没有配置过，task, 就会在上面提示。

会在.vscode文件夹下生成一个 task.json, 基本不用动

{

"version": "0.1.0",

"command": "tsc",

"isShellCommand": true,

"args": ["-p", "."],

"showOutput": "silent",

"problemMatcher": "$tsc"

}

到此配置成功

（三）、小试身手

1.新建demo.ts文件

class person {
    constructor() {
         
    }
 
    /**
     * print
     */
    public print() {
        console.log('this is a person')
    }
}
 
let p = new person();
p.print();

2.ctrl+shift+b 编辑build

会自动编辑出一个demo.js

3.创建index.html

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

浏览器打开就可以看到了

TypeScript的初次认识和在vscode配置开发环境