TypeScript 学习笔记1: 简介

原文链接：https://leanpub.com/essentialtypescript/read#introduction

1. TypeScript 是什么？

TypeScript 是JS的超集，它给JS添加了静态类型的支持。

看一段 js 代码：

var bill = {
    name: "Bill",
    quack: function() {
        document.write("Quack!");    
    }
}

function sayQuack(target) {
    target.quake();
}

sayQuack(bill);

这段代码运行会出错，因为，在sayQuack(target) 中，target.quake() 应该写成 target.quack()。

因为js是动态类型语言，只有等到程序运行到这一行时，才会报错。静态类型语言有一个编译的过程。编译器会帮助我们发现此类错误。

TypeScript 提供了一个编译器(tsc)，它会把TypeScript编写的代码转换成 js 代码。

2. JavaScript 的版本和历史

TypeScript 学习笔记1: 简介

操作系统版本，浏览器版本，js版本，bla bla bla 会一直困扰着每一个开发人员。

这个页面可以看各种平台对JavaScript 语言新版本的兼容性统计：http://kangax.github.io/compat-table/es6/

有了 tsc （TypeScript transpiler），我们可以随便使用ES6提供的新语言特性，而不必考虑系统兼容性问题。因为，使用tsc可以把高版本的js代码转换成低版本的js代码。

TypeScript 学习笔记1: 简介

3. 第一个TypeScript程序

TypeScript 官网提供了一个 playground 页面，使我们不用安装tsc也可以编译、运行TypeScript代码：https://www.typescriptlang.org/play/index.html

3.1. 在Playground中输入如下代码：

function speak(value) {
    document.write(value);
}

var greeted = "World";
var greeting = "Hello, ";
var whatToSay = greeting + greeted;

speak(whaToSay);

注意：

1. 能看到最后一行下面有条红色曲线，那是错误提示，因为，whaToSay 拼写错误。

2. 鼠标hover在任意一个变量、函数上面，都可以看到它的定义。

3. Playground 右侧区域显示的是编译后的js代码。

3.2. 字符串 vs. Number

修改代码：

var greeted = 1;

var greeting = 20;

输出： 21

上面代码的本意是把两个字符串连接在一起，输出到网页上。可是，当greeted和greeting都变成Number类型时，输出的是两个数之和。

3.3. 函数参数类型声明

给speak() 加上参数类型声明： speak(value: string)

speak(whatToSay); 下面又有红色曲线了，因为，编译器认为函数的参数类型不对。

3.4. 变量类型声明

给whatToSay加上string类型：

var whatToSay: string = greeting + greeted;

3.5. 函数返回值类型声明

function speak(value: string): string {
    document.write(value);
    return value;
}

秒客网

TypeScript 学习笔记1: 简介

相关文章