【TS学习系列】1.快速开始TypeScript开发

1.简介

 

TypeScript是一种微软开发的自由和开源的编程语言。它是一个JavaScript超集，而且本质上向这个语言添加了可选的静态属性和基于类的面向对象编程。微软C#首席架构师安德斯·海尔斯伯格已工作于TypeScript的开发。

 

TypeScript扩展了JavaScript语法，所以现有的任何JavaScript程序可以在不加改变的在TypeScript下工作。TypeScript是为大型应用开发而设计，而编译时以产生JavaScript保证兼容性。

 

TypeScript支持已存在的JavaScript库添加类型信息的头文件，扩展了它对于流行的库如jQuery、MongoDB、Node.js和D3.js的好处。

 

2.安装TypeScript

 

有两种主要的方式来获取TypeScript工具：

• 通过npm（Node.js包管理器）
• 安装Visual Studio的TypeScript插件

 

Visual Studio 2017和Visual Studio 2015 Update 3默认包含了TypeScript，如果你的Visual Studio 还没有安装TypeScript，你可以下载它。

 

 

针对使用npm的用户：

 

 npm install -g typescript 

 

3.构建你的第一个Typescript程序

 

在编辑器，将下面代码输入到greeter.ts文件里：

 

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

let userName = "Jane User";
document.body.innerHTML = greeter(userName);

 

4.编译代码

 

我们使用了.ts扩展名，但这段代码仅仅是JavaScript而已。你可以直接从现有的JavaScript应用里复制/粘贴这段代码。

 

在命令行上运行TypeScript编译器：

 

 tsc greeter.ts

 

输出结果为一个greeter.ts文件，它包含了和输入文件中相同的JavaScript代码。一切准备就绪，我们可以开始运行这个使用TypeScript写的JavaScript应用了！

 

接下来让我们看看TypeScript带来的高级功能，给 greeter 函数的参数 personName 添加 : string 类型注解，如下：

 

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

let userName : string = "Jane User";
document.body.innerHTML = greeter(userName);

 

5.类型注解

 

TypeScript里的类型注解是一种轻量型的为函数或变量添加约束的方式。在这个例子里，我们希望 greeter 函数接收一个字符串参数。然后尝试把 greeter 函数的调用改成传入一个数组：

 

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

let userName : string[] = ["Jane User","Bobi User"];
document.body.innerHTML = greeter(userName);

 

编辑器代码错误提示：

 

 [ts] Argument of type 'string[]' is not assignable to parameter of type 'string'. let userName: string[]

 

类似地，尝试删除 greeter 调用的所有参数，TypeScript会告诉你调用这个函数使用了非期望个数的参数。在这两种情况中，TypeScript提供了静态的代码分析，它可以分析代码结构和提供的类型注解。

 

需要注意的是，尽管TypeScript代码有错误，它仍然能够被编译成js代码，在这种情况下，TypeScript会警告你代码可能不能按照预期执行。