Typescript--JavaScript that Scales入门

740 阅读6分钟

最近开始尝试在项目中使用Typescript, 简单来说,Typescript是一个JavaScript的超集(即支持JavaScript的全部语法,完全兼容),TS在JavaScript的基础上增加了静态类型检查和面向对象的特性。

Typescript可以在编译阶段“降级”为ES5或ES3,以在浏览器中运行,因此Typescript获得了和JavaScript一样的兼容性,可以在全部的现代浏览器中运行。

npm是安装TypeScript的最简洁的方式。npm install -g typescript即可全局安装,不过我通常会选择安装在项目的依赖中。即npm install typescript,然后通过node_modules/.bin/tsc来运行Typescript的编译器。

Hello World

Typescript的文件以ts结尾,我们首先来编写一个greeter.ts的文件。内容如下:

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

let user = "World"

document.getElementById('app').innerHTML=greeter(user)

编写完ts文件之后,我们可以通过tsc greeter.ts来将ts文件转换为以js为后缀的JavaScript文件。这样,就可以在我们的浏览器中运行了。

所以,我们再编写一个对应的html文件,内容如下:

<html>
    <body>
        <div id="app"></div>
    </body>
    <footer>
        <script src="./greeter.js"></script>
    </footer>
</html>

在浏览器中打开这个文件,就可以看到 Hello World 在页面上了。

类型检查

不难看出,我们希望在greeter函数中,接收一个字符串来作为参数。如果我们在JavaScript中传入一个非字符串函数,会怎么样呢?例如,修改刚刚得到的js文件,我们传入一个空的对象:

function greeter(person) {
    return "Hello, " + person;
}
var user = {};
document.getElementById('app').innerHTML = greeter(user);

我们会看到,页面上的文字变成了Hello, [object Object]。这不是我们想要的。我们不希望其他的开发者在调用这个函数时,传入非字符串的函数。因此,我们要检查一下这个类型。因此,我们将ts文件修改为:

function greeter(person:string){
    return "Hello, "+person
}
var user = {}
document.getElementById('app').innerHTML=greeter(user)

此时我们也试图传入一个空的对象,重新运行tsc greeter.ts,我们会得到下面的信息:
tsfailed.jpeg

error TS2345: Argument of type '{}' is not assignable to parameter of type 'string'.

Typescript在编译这个文件给出了报错,原因是'string类型的参数不能接受{}这个对象',在编译阶段就将我们的想法拒之于门外。与传入参数类似,方法的返回值也可以指定类型:

function greeter(person:string): string {
    return {}
}

var user = {}

document.getElementById('app').innerHTML=greeter(user)

编译器同样会告诉我们:Type '{}' is not assignable to type 'string'.

值得注意的是,虽然编译器报了error,但是依然会生成对应的js文件。但它可能不会按预期的执行。

在较为大型的项目中,我们可能一不留神就将一个空的对象传入了类似的函数,有了静态检查之后,我们可以极大地避免这类问题,让我们的程序更加稳定。可以说,静态检查是一个非常必要的特性了。

接口和类

像鸭子一样走路并且嘎嘎叫的就叫鸭子。
-- James Whitecomb Riley

不妨设想一个问题,如果有很多不同类型的对象,如Duck, Chicken, Fish等等,我们不能使用object来分辨他们(因为都是object),这时候就可以使用接口或者类。Typescript使用鸭式辨型法,我们可以编写不同类型的接口,制定不同类型动物的规则来分辨他们,如:

interface Duck {
    isDuck:boolean,
    name:string
}
interface Chicken {
    isChicken:boolean
}
function greeter(duck:Duck) {
    return "This is a Duck, whose name is "+duck.name
}
var duck = {isDuck:true,name:"Donald"}
document.getElementById('app').innerHTML=greeter(duck)

这样,我们就可以限定传入greeter方法的参数,必须“实现”了Duck接口的内容,这里的实现只是形式上的实现,换句话说,只要有isDuck和name属性的对象,就会被认为是一个实现了Duck接口的对象。就是开头的那句话,“像鸭子一样走路并且嘎嘎叫的就叫鸭子”

不是所有的属性都是必须的,我们可以用“?”来标记一个可选的属性,如:

interface Duck {
    isDuck:boolean,
    name:string,
    color?:string
}

这样,无论有没有color属性,都会被认为是一个“实现”了Duck接口的类。

如果我们想要在创建完这个对象之后,就再也不修改它的一些属性,如isDuck,它应该是一个只读的属性。我们可以用readonly来标记。如下:

interface Duck {
    readonly isDuck:boolean,
    name:string,
    color?:string
}

readonly和const的区别:readonly标记的是属性,而const所声明的是一个变量。

除接口之外,Typescript也支持面向对象的编程。这是一个ES6的新特性,从ES6开始,JavaScript也开始支持面向对象编程了。

class Duck {
    name:string
    constructor(name:string){
        this.name = name
    }
    greet():string{
        return "Hello, "+this.name
    }
}

var duck = new Duck("Donald");
document.getElementById("app").innerHTML = duck.greet()

上面的代码创建了一个Duck类,其中包含了一个name属性,一个构造函数,和一个返回字符串的greet函数。我们可以通过new这一关键字来创建一个Duck类的对象。并调用其函数。在greet函数中,我们使用this来引用类成员。

在Typescript中,成员变量是默认为public的,即可以在类的外部调用,我们可以用private来将其限制在类内部访问,

类似于接口中,我们也可以使用readonly来将属性设置为只读。 只读属性必须在声明时或构造函数里被初始化。

面向对象中另一个很重要的特性是继承,我们可以使用extends来实现继承。

class Animal {
    protected name:string
    constructor(name:string){
        this.name = name
    }
    greet():string{
        return "Hello "+this.name
    }
}

class Duck extends Animal {
    greet():string{
        return "Hello, this is a Duck, whose name is "+this.name
    }
}

var duck = new Duck("Donald");
var animal = new Animal("Mickey")
document.getElementById("app").innerHTML = duck.greet()
document.getElementById("app").innerHTML = document.getElementById("app").innerHTML+' '+animal.greet()

这样,我们的Duck就继承了Animal中的name属性和contructor方法,注意,我们在这里使用protected属性,以使得name这一属性能够在Duck子类中使用。

工程配置

在项目的目录下,可以使用tsconfig.json这一文件来指定编译时的属性。如果我们直接在项目目录下执行tsc,Typescript解释器就会在当前目录寻找tsconfig.json这一文件,如果当前项目目录没有,就会逐级向上寻找。我们也可以使用--project-p来指定项目目录。

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true
    },
    "files": [
        "ducks.ts"
    ]
}

上面是一个tsconfig.json文件的示例,全部的编译器选项可以在编译选项里看到。

"files"指定一个包含相对或绝对文件路径的列表。 我们可以用"include"和"exclude"属性指定一个文件glob匹配模式列表,如:

    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]

Vue/Angular的结合

很多较大型的Web框架都被Typescript所支持,Angular 2已经整个项目都可以用Typescript来完成了。Vue 2.5也大大增强了对Typescript的支持。我们可以在快速起步里看到官方完成的各种起步模板。