TypeScriptTypeScript入门


备注

TypeScript旨在成为JavaScript的超集,转换为JavaScript。通过生成符合ECMAScript的代码,TypeScript可以引入新的语言功能,同时保持与现有JavaScript引擎的兼容性。 ES3,ES5和ES6是目前支持的目标。

可选类型是主要功能。类型允许静态检查,目的是尽早发现错误,并可以使用代码重构等功能增强工具。

TypeScript是Microsoft开发的一种开源和跨平台编程语言。 源代码可在GitHub上获得

版本

发布日期
2.4.1 2017年6月27日
2.3.2 2017年4月28日
2.3.1 2017年4月25日
2.3.0 beta 2017年4月4日
2.2.2 2017年3月13日
2.2 2017年2月17日
2.1.6 2017年2月7日
2.2 beta 2017年2月2日
2.1.5 2017年1月5日
2.1.4 2016年12月5日
2.0.8 2016年11月8日
2.0.7 2016年11月3日
2.0.6 2016年10月23日
2.0.5 2016年9月22日
2.0 Beta 2016年7月8日
1.8.10 2016年4月9日
1.8.9 2016年3月16日
1.8.5 2016年3月2日
1.8.2 2016年2月17日
1.7.5 2015年12月14日
1.7 二零一五年十一月二十零日
1.6 2015年9月11日
1.5.4 2015年7月15日
1.5 2015年7月15日
1.4 2015年1月13日
1.3 2014年10月28日
1.1.0.1 2014年9月23日

基本语法

TypeScript是JavaScript的类型超集,这意味着所有JavaScript代码都是有效的TypeScript代码。 TypeScript在此基础上添加了许多新功能。

TypeScript使JavaScript更像是一种强类型,面向对象的语言,类似于C#和Java。这意味着TypeScript代码往往更容易用于大型项目,并且代码往往更容易理解和维护。强类型还意味着语言可以(并且是)预编译,并且不能为变量分配超出其声明范围的值。例如,当TypeScript变量声明为数字时,您无法为其指定文本值。

这种强大的键入和面向对象使TypeScript更易于调试和维护,这些是标准JavaScript中最弱点的两个。

输入声明

您可以向变量,函数参数和函数返回类型添加类型声明。类型是在变量名后跟冒号后写的,如下所示: var num: number = 5; 然后,编译器将在编译期间检查类型(如果可能)并报告类型错误。

var num: number = 5;
num = "this is a string";  // error: Type 'string' is not assignable to type 'number'.
 

基本类型是:

  • number (整数和浮点数)
  • string
  • boolean
  • Array 。您可以指定数组元素的类型。定义数组类型有两种等效方法: Array<T>T[] 。例如:
    • number[] - 数组
    • Array<string> - 字符串数组
  • 元组。元组具有固定数量的具有特定类型的元素。
    • [boolean, string] - 元组,其中第一个元素是布尔值,第二个元素是字符串。
    • [number, number, number] - 三个数字的元组。
  • {} - object,您可以定义其属性或索引器
    • {name: string, age: number} - 具有名称和年龄属性的对象
    • {[key: string]: number} - 由字符串索引的数字字典
  • enum - { Red = 0, Blue, Green } - 映射到数字的枚举
  • 功能。您可以为参数和返回值指定类型:
    • (param: number) => string - 函数接受一个数字参数返回字符串
    • () => number - 没有参数返回数字的函数。
    • (a: string, b?: boolean) => void - 函数接受一个字符串,并且可选择一个没有返回值的布尔值。
  • any - 允许任何类型。涉及any 表达式未经过类型检查。
  • void - 表示“nothing”,可以用作函数返回值。只有nullundefinedvoid 类型的一部分。
  • never
    • let foo: never; - 作为类型保护下永远不变的变量类型。
    • function error(message: string): never { throw new Error(message); } -由于从来没有返回函数的返回类型。
  • null - 类型为null 。除非启用了严格的空检查,否则null 隐式地是每个类型的一部分。

铸件

您可以通过尖括号执行显式转换,例如:

var derived: MyInterface;
(<ImplementingClass>derived).someSpecificMethod();
 

此示例显示了一个derived 类,该编译器将其MyInterface 。如果没有在第二行上的转换,编译器将抛出异常,因为它不理解someSpecificMethod() ,但是通过<ImplementingClass>derived 表明编译器要做什么。

在Typescript中转换的另一种方法是使用as 关键字:

var derived: MyInterface;
(derived as ImplementingClass).someSpecificMethod();
 

从Typescript 1.6开始,默认使用as 关键字,因为在.jsx文件中使用<> 是不明确的。这在Typescript官方文档中提到。

可以在TypeScript代码中定义和使用类。要了解有关类的更多信息,请参阅类文档页面

你好,世界

class Greeter {
    greeting: string;

    constructor(message: string) {
        this.greeting = message;
    }
    greet(): string {
        return this.greeting;
    }
};

let greeter = new Greeter("Hello, world!");
console.log(greeter.greet());
 

这里我们有一个类Greeter ,它有一个constructor 和一个greet 方法。我们可以使用new 关键字构造一个类的实例,并传入一个我们希望greet 方法输出到控制台的字符串。 Greeter 类的实例存储在greeter 变量中,然后我们将其称为greet 方法。

安装和设置

背景

TypeScript是JavaScript的类型超集,可直接编译为JavaScript代码。 TypeScript文件通常使用.ts 扩展名。许多IDE支持TypeScript而无需任何其他设置,但TypeScript也可以使用命令行中的TypeScript Node.JS包进行编译。

集成开发环境

视觉工作室

Visual Studio代码

  • Visual Studio Code (vscode)为TypeScript提供上下文自动完成以及重构和调试工具。 vscode本身是在TypeScript中实现的。适用于Mac OS X,Windows和Linux。

WebStorm

  • WebStorm 2016.2 附带TypeScript和内置编译器。 [Webstorm不是免费的]

IntelliJ IDEA

原子和原子打字稿

崇高文本

安装命令行界面

安装Node.js.

全局安装npm包

您可以全局安装TypeScript以从任何目录访问它。

npm install -g typescript
 

要么

在本地安装npm包

您可以在本地安装TypeScript并保存到package.json以限制到目录。

npm install typescript --save-dev
 

安装渠道

您可以从以下位置安装

  • 稳定的频道: npm install typescript
  • 测试版频道: npm install typescript@beta
  • 开发频道: npm install typescript@next

编译TypeScript代码

tsc 编译命令附带typescript ,可用于编译代码。

tsc my-code.ts
 

这将创建一个my-code.js 文件。

使用tsconfig.json进行编译

您还可以通过tsconfig.json 文件提供随代码一起提供的编译选项。要启动一个新的TypeScript项目,请在终端窗口中cd 到项目的根目录并运行tsc --init 。此命令将生成具有最少配置选项的tsconfig.json 文件,类似于以下内容。

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false,
        "pretty": true
    },
    "exclude": [
        "node_modules"
    ]
}

tsconfig.json 文件放在TypeScript项目的根目录下,可以使用tsc 命令运行编译。

使用ts节点运行TypeScript

ts-node是一个npm包,它允许用户直接运行typescript文件,而无需使用tsc 进行预编译。它还提供REPL

使用全局安装ts节点

npm install -g ts-node
 

ts-node没有捆绑typescript编译器,因此您可能需要安装它。

npm install -g typescript
 

执行脚本

要执行名为main.ts的脚本,请运行

ts-node main.ts
 
// main.ts
console.log("Hello world");

用法示例

$ ts-node main.ts
Hello world
 

运行REPL

运行REPL运行命令ts-node

用法示例

$ ts-node
> const sum = (a, b): number => a + b;
undefined
> sum(2, 2)
4
> .exit
 

要退出REPL,请使用命令.exit 或按两次CTRL+C

Node.js中的TypeScript REPL

要在Node.js中使用TypeScript REPL,您可以使用tsun软件包

全局安装

npm install -g tsun
 

并使用tsun 命令在终端或命令提示符下运行

用法示例:

$ tsun
TSUN : TypeScript Upgraded Node
type in TypeScript expression to evaluate
type :help for commands in repl
$ function multiply(x, y) {
..return x * y;
..}
undefined
$ multiply(3, 4)
12