什么时间开始学习TypeScript？

永远是当下最合适。

什么是TypeScript?

官方是这么说的：“TypeScript是JavaScript类型的超集”。

用通俗易懂的话（人话）来说呢，就是：TypeScript是JavaScript的升级版，更重视类型。

开始搭环境

TypeScript需要的环境很简单：

一个文件目录 /ts-demo
node node环境大家都会装，不做解释，问就你是个好人。
typescript 全局安装typescript

npm install typescript -g

ts-node 全局安装ts-node：可以通过命令行直接得到ts文件执行结果的插件

npm install ts-node -g

开始撸代码

让我们一起开开心心地搭建一个追妹平台，不一定能帮大家找到对象，但学习到技术可能比追到妹子1还要开心吧（反正我选择妹子）。

1. 创建第一个ts文件

我们创建一个Demo1.ts文件，在里面输出一句问候语：

/ts-demo/Demo1.ts

function sayHello() {
    let message: string = "你好，下雨了我能送你回家吗？";
    console.log(message);
}

sayHello();

在命令行中执行

ts-node Demo1.ts

控制台输出：你好，下雨了我能送你回家吗？，得到我们预期结果。

2. 我们试着改写一下上面的ts文件，给它增加一个参数：name

function sayHello(name: string) {
    let message: string = `你好，我叫${name}，下雨了我能送你回家吗？`;
    console.log(message);
}

sayHello("张楚岚");

大家可能会好奇：name: string和meessage: string这两个是什么鬼？

这里其实是定义了变量的静态类型，也就是说：定义的name和message这两个变量，只能是我们定义的string类型，给它赋其它类型的值就会报错。

除了string类型，还有其它几种基础类型可以被定义：boolean、number、数组、元组、枚举、any、void、null || undefined、never、object。大家可能会对这几种类型存有疑惑，尤其是元组、枚举、never这几种在js中不太会用到的类型。稍安勿躁，我们继续完善上面的追妹系统，这些类型都会被一一讲到。

3. 让我们给这个追妹系统添加一些别的属性，让人物更饱满

首先，让我们把参数抽取出来，放到一个对象Person中，这里我们用type关键字定义一个类型别名，类型别名用来让我们更容易复用。

type Person = {
    name: string
}

function sayHello(person: Person) {
    let message: string = `你好，我叫${person.name}，下雨了我能送你回家吗？`;
    console.log(message);
}

sayHello({name: "张楚岚"});

然后，让我们给人物加上年龄age，再把上面的sayHello方法改一改，毕竟剧情总是要发展的，也不能老是在下雨。

type Person = {
   name: string,
   age: number
}
function makeFriend(person: Person) {
   let message: string = `你好，我叫${person.name}，今年${person.age}岁，我很喜欢你，可以交个朋友吗？`;
   console.log(message);
}
makeFriend({name: "张楚岚", age: 20})

现在我们完成了自我介绍，而且还加了一个number类型的age属性。我们先不管后续，先把人物变得更丰富。

enum Sex {male, female}

type Person = {
    name: string,
    age: number,
    job: [string, number],
    sex: Sex,
    isSingle: boolean
}

我们在上面的代码中使用了enum类型，也就是枚举类型，它列出了性别的选项，必须是男或是女。我们还给人物增加是否单身isSingle，它是boolean类型，表示是否是单身。还有job选项，它是一个元组，[string, number]表示job必须有两个值，一个是string工作名称，一个是number收入。元组和数组相似，但是元组规定了每一项的类型。

4. 让我们来创建一个人物吧

const ZhangChulan:Perosn = {
    name: "张楚岚",
    age: 20,
    job: ["快递员", 15000],
    sex: Sex.male,
    isSingle: true
}

我们创建了张楚岚这个人物，我们知道他有一个绰号，我们想把这个绰号也加进去，但不是每个人都有绰号，这个时候我们可以在:前面加一个?，表示可选项，让我们来试试：

type Person = {
    name: string,
    age: number,
    job: [string, number],
    sex: Sex,
    isSingle: boolean,
    nickName?: string
}

const ZhangChulan:Person = {
    name: "张楚岚",
    age: 20,
    job: ["快递员", 15000],
    sex: Sex.male,
    isSingle: true,
    nickName: '不摇碧莲'
}

5. 楚岚小哥哥，20岁正青春，荷尔蒙散发，让我们给他来找对象吧！

广发佳人贴，报名何其多，这个时候，让我们来看看吧：

const persons: Person[] = [
    {
    	name: "冯宝宝",
        age: 22,
        job: ["快递员", 30000],
        sex: Sex.female,
        isSingle: true,
        nickName: '宝儿姐'
    },
    {
    	name: "柳妍妍",
        age: 18,
        job: ["湘西赶尸", 30000],
        sex: Sex.female,
        isSingle: true,
    },
    {
    	name: "夏禾",
        age: 22,
        job: ["全性", 300000],
        sex: Sex.female,
        isSingle: false,
        nickName: '刮骨刀'
    },
    {
    	name: "陆玲珑",
        age: 20,
        job: ["大小姐", 800000],
        sex: Sex.female,
        isSingle: true,
    },
    {
    	name: "王也",
        age: 22,
        job: ["道长", 8000],
        sex: Sex.male,
        isSingle: true,
    },
    {
    	name: "风莎燕",
        age: 26,
        job: ["大小姐", 800000],
        sex: Sex.female,
        isSingle: false,
    },
];

这里我们使用了数组类型，定义了一个Person[]，表示一个Person类型的数组，数组的每一项都必须符合Person类型。列出了报名的人员，让我们来筛选一下，过滤到其中的男性和已婚角色。

function getGirls(persons: Person[]) {
	let girls:Person[] = [];
	persons.map((person) => {
    	if(person.sex === Sex.famale && person.isSingle) {
            girls.push(person);
        }
    });
    return girls;
}

getGirls(persons);

本节最终代码如下，大家可以通过命令行执行ts-node Demo1.ts，在控制台看到符合要求的小姐姐的信息啦：