TypeScript上手指南

建议阅读者有一定JavaScript编程基础者,会C、PHP等语言就会发现一切似曾相识。翻译自官方文档Quick start

TypeScript是JavaScript超集,提前实现了ECMAScript部分新标准及增加了许多特性,以提高大型项目代码的可靠性及可维护性。目前由Microsoft方面主导维护,Google团队维护的Angular2项目也开始基于TypeScript构建。

使用TypeScript编写的代码最终会通过编译器转换为兼容现行浏览器的普通JavaScript代码,并在编译时进行自动代码检查。

安装TypeScript

你需要安装TypeScript来实现代码的编译及其它功能。有两种方法:

  • 通过npm(Node.js包管理工具)安装 (后文以此为例)
~> npm install -g typescript
  • 使用Visual Studio的可以直接安装插件
微软的集成开发环境Visual Studio最新版已默认自带TypeScript插件(当然你也可以只使用Visual Studio Code)。

创建首个TypeScript文件

TypeScript文件的后缀为.ts,我们创建一个新文件kill.ts(放轻松,就当JS写,TypeScript完全兼容):

function kill(person) {
    return "You died, " + person;
}
var user = "Sunkey fong";
document.body.innerHTML = kill(user);

在命令行进入文件所在目录并输入tsc kill.ts就会得到一个编译好的kill.js文件。

就是这样,你可以自由在ts里使用TypeScript的特性了,编译器将会处理代码查错及转换为高兼容性js文件的工作。

特性

如果你使用过C或PHP等语言,会发现TypeScript中很多特性参考于它们。这里介绍3个最基本的特性。

1、类型声明 Type annotations

在TypeScript中可以如C语言们一样为值指定类型,避免值的滥用提高代码可维护性。

JavaScript是弱类型语言,自身会处理不同类型间的变化使其写起来更顺畅,为JavaScript的流行贡献颇丰。但在大型项目中,不指定变量类型将会变成噩梦。代码的可维护性大打折扣。

例如在变量名后加上: string可将其指定为字符串类型:

function kill(person: string) {
    return "You died, " + person;
}

var user: string = "Sunkey Fong";
document.body.innerHTML = kill(user);

我们将kill方法的person参数规定为string类型,因此如下代码在编译时会报错:

function kill(person: string) {
    return "You died, " + person;
}

var user = ["Sunkey Fong", 'Myself'];
document.body.innerHTML = kill(user);

同样,如果不传参数执行kill()也将会得到错误的参数数量的报错。如上TypeScript会通过你的代码及变量声明进行静态的代码分析。

注意:即使有报错,kill.js仍然会被创建。这样当你代码有错误时仍然可以使用TypeScript,只不过会警告你代码可能有异常。

2、接口 Interface

我们使用接口(类似自定义类型)特性规定值或类库的标准。例如规定一个需要包含firstNamelastName键值的接口Person:

interface Person {
    firstName: string;
    lastName: string;
}

function kill(person: Person) {
    return "You died, " + person.firstName + " " +  person.lastName;
}

var user = { firstName: "Sunkey", lastName: "Fong" };
document.body.innerHTML = kill(user);

代码中kill方法规定参数person需要符合Person接口定义。

3、类 Class

稍微了解点C或PHP等语言的同学一定不陌生了,基本是代码项目的最基本要素。TypeScript支持基于类及面向对象的编程。

类与接口配合使用可实现代码的抽象化。

例如我们创建一个Hero的类,它将包含构造函数及一些公有属性(通过在构造函数的参数前加public可以方便地将此变量声明为类的属性)。

class Hero {
    fullName: string;
    constructor(public firstName, public middleInitial, public lastName) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function kill(person : Person) {
    return "You died, " + person.firstName + " " + person.lastName;
}

var user = new Hero("Sunkey", "Hero", "Fong");
document.body.innerHTML = kill(user);

编译后你会发现这段代码与上一段代码相似,这是因为TypeScript中类(class)其实使用的是JavaScript中常用的基于原型(prototype)构造方法。

尾巴

关于TypeScript更多特性及细节,推荐阅读官方文档(没那么困难,不用到处找什么教程)。语言是相通的,如果你目前只会JS,在学完TypeScript后再上手C、PHP等语言将会容易许多。

你可能感兴趣的:(TypeScript上手指南)