TypeScript之TypeScript简介

一、TypeScript是什么?

TypeScript是一种由微软开发的开源编程语言
  • 是JavaScript的一个超集,扩展了 JavaScript 的句法,任何现有的JavaScript程序可以不加改变的在TypeScript下工作。
  • 添加了可选的静态类型和基于类的面向对象编程。
  • 为大型应用之开发而设计,代码可编译为纯净的JavaScript 以确保兼容性。

二、为什么会有 TypeScript?

JavaScript 只是一个脚本语言,并非设计用于开发大型 Web 应用

JavaScript 没有提供类和模块的概念,而 TypeScript 扩展了 JavaScript 实现了这些特性。

三、TypeScript 特点

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

四、语法特性

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

五、安装

npm install -g typescript

查看是否安装成功(效果图如下):

六、创建第一个TypeScript文件

在编辑器中创建greeter.ts文件,并输入以下JavaScript代码:

function greeter(person) {
    return "Hello, " + person;
}

var user = "Jane User";

document.body.innerHTML = greeter(user);

七、编译代码

虽然我们使用了.ts作为文件扩展名,但是这些代码仅仅是JavaScript代码。你可以将代码直接复制粘贴到已有的JavaScript应用程序中。在命令行中运行TypeScript编译器:

tsc greeter.ts

其结果你得到一个包含相同JavaScript代码的greeter.js文件。可通过 greeter.html文件调用运行.

八、新方式编程

现在我们可以开始利用TypeScript提供的新工具。给函数参数‘person’添加: string类型注解,如下所示:

function greeter(person: string) {
    return "Hello, " + person;
}

var user = "Jane User";

document.body.innerHTML = greeter(user);

若 var user = [0, 1, 2]; 会导致编译错误。

九、类型注解

  • 类型注解在TypeScript中是记录函数或变量约束的简便方法。
  • 同样,在调用greeter函数时尝试不传入任何参数。TypeScript将会告诉你调用这个函数时需要带一个参数。
  • 注意,虽然有错误,但是仍然编译创建了greeter.js文件。即使你的代码中有错误,你仍旧可以使用TypeScript。

  • 但是在这种情况,TypeScript会发出警告:你的代码可能不能按照你预想的那样运行。

十、参考资料

十一、开发工具

  • 推荐使用 Visual Studio Code
  • 安装代码格式化工具
    1. 安装插件Clang-Format VSCode extension
    2. 安装 clang-format 命令行工具
      http://releases.llvm.org/download.html
    3. Alt+shift+F 美化代码

发表评论

电子邮件地址不会被公开。 必填项已用*标注