TypeScript基础

TypeScript 主要有 3 大特点：

• 始于JavaScript，归于JavaScript

TypeScript 可以编译出纯净、 简洁的 JavaScript 代码，并且可以运行在任何浏览器上、Node.js 环境中和任何支持 ECMAScript 3（或更高版本）的JavaScript 引擎中。

• 强大的类型系统

类型系统允许 JavaScript 开发者在开发 JavaScript 应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构。

• 先进的 JavaScript

TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件。

安装 TypeScript

命令行运行如下命令，全局安装 TypeScript：

npm install -g typescript

安装完成后，在控制台运行如下命令，检查安装是否成功(3.x)：

tsc -V

手动编译代码

我们使用了 .ts 扩展名，但是这段代码仅仅是 JavaScript 而已。

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

tsc helloworld.ts

输出结果为一个 helloworld.js 文件，它包含了和输入文件中相同的 JavsScript 代码。

在命令行上，通过 Node.js 运行这段代码：

node helloworld.js

控制台输出：

Hello, Tony

vscode自动编译

1). 生成配置文件tsconfig.json

tsc --init

2). 修改tsconfig.json配置

"outDir": "./js",

"strict": false,

3). 启动监视任务:

终端 -> 运行任务 -> 监视tsconfig.json

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

function greeter (person: string) {

 return 'Hello, ' + person}

let user = [0, 1, 2]

console.log(greeter(user))

让我们继续扩展这个示例应用。这里我们使用接口来描述一个拥有 firstName 和 lastName 字段的对象。 在 TypeScript 里，只在两个类型内部的结构兼容，那么这两个类型就是兼容的。 这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以，而不必明确地使用 implements 语句。

interface Person {

 firstName: string

 lastName: string
}

function greeter (person: Person) {

 return 'Hello, ' + person.firstName + ' ' + person.lastName
}

let user = {

 firstName: 'Yee',

 lastName: 'Huang'}

console.log(greeter(user))

让我们创建一个 User 类，它带有一个构造函数和一些公共字段。因为类的字段包含了接口所需要的字段，所以他们能很好的兼容。

还要注意的是，我在类的声明上会注明所有的成员变量，这样比较一目了然。

class User {

 fullName: string

 firstName: string

 lastName: string

 constructor (firstName: string, lastName: string) {

 this.firstName = firstName

 this.lastName = lastName

 this.fullName = firstName + ' ' + lastName

 }}

interface Person {

 firstName: string

 lastName: string}

function greeter (person: Person) {

 return 'Hello, ' + person.firstName + ' ' + person.lastName}

let user = new User('Yee', 'Huang')

console.log(greeter(user))