我为何要用TypeScript？花五分钟上手教程

最近TypeScript大火，Node.js里很多有名的开源项目都开始支持，隐约有一统江湖的气势，若是说哪天Node.js能直接运行TypeScript我也不会太过惊讶。

因此，我前段时间开始尝试使用这种“新写法”，不久后便决定，从此不管大小项目都会用TypeScript来写。接下来我会说说个人理由，和TypeScript从此的前景，最后附上五分钟上手教程。

1.TypeScript的好处

TypeScript解决了JavaScript的一大痛点，那就是动态类型。

JavaScript的动态类型简单、灵活，写起来很爽，可是不适用于大型项目，代码一多会难以维护，尤为是看别人的代码。而TypeScript则采用了静态类型，写法上虽然麻烦点，可是换来了更稳固的结构和清晰的逻辑。

而且在宇宙第一IDE VSCode的支持下，类型检查和提示都很是强大，大大减小了开发阶段出错的几率，配合上贴心的智能提示，今后代码一遍过再也不是梦想。

这让我想起了一个段子，一名程序员写完代码后运行，居然没有BUG一遍就过，心情激动下打电话给女友告诉她这件事，女友听完后只是冷淡地”哦“了一声。因此，这个故事告诉咱们，不要找女友。

而对于小项目来讲，类型检查可能不那么重要，可是智能提示却能让你在写代码的过程当中更加舒畅，这也是我在小项目中还要坚持使用TypeScript的缘由。

2.TypeScript的前景

学一门新语言最重要的是什么？不是它有多快，多简洁。而是在于它的前景有多好。只有用的人多了才会有更多的工做岗位，和更优秀的开源项目。

TypeScript是由微软开发和维护，发布后被Google采用，用在了自家的Angular2上，两大巨头都和这门语言发生了联系，前景上无需太过担忧。

而且很是流行的前端框架Vue3也在使用TypeScript重构，这也让很多人担忧会对现有的写法不兼容，可是请坐和放宽，尤大已表示现有的写法一样适用于Vue3。

3.如何开始使用

TypeScript是JavaScript的超集，写法上发生一些变化而已，因此只须要花上五分钟看下面的教程就能写出TypeScript代码。这里的教程只是为了让你尽快写出TypeScript代码而已，后续更深刻的用法和理解还须要看我从此的文章，或者经过搜索引擎查漏补缺。

3.1安装环境

npm install -g typescript

//编译命令
tsc hello.ts
复制代码

3.2 类型写法

TypeScript在建立一个变量时必须声明它的类型，有多人会担忧这会限制本身的骚操做，不用担忧，你想骚也能够全都用any。

//布尔值
let isDone: boolean = false

//数字
let n: number = 6

//字符串
let pepoName: string = '小王'
let introduction: string = `${pepoName}今年已经${n}岁了！！！`

//任意类型
let anySomething: any = '什么都行'

//联合类型，两种类型均可以
let numandstring: number | string;

//数组
let list: number[] = [1,2,3]
let listString: string[] = ['1','2','3']
let numandString: (number | string)[] = ['1',2,3]
复制代码

TypeScript还有类型推论，若是在建立一个变量的时候没有指定类型，那么会根据赋值类型来决定，若是只是建立了一个变量可是没有赋值，会默认为any。

3.3接口

接口是TypeScript的特性，能够建立一个类，而后经过调用这个类来生成实例：

interface Person {
    //只读属性，只能在建立实例的时候赋值，以后不能够更改
	  readonly id: number;
    name: string;
    age: number;
    //后面加问号的话容许建立实例时少这个属性
	  address?: string;
    //若是但愿在实例里自由添加属性，可使用任意属性
    //可是要注意的是，一旦建立了任意属性，那么接口里面的肯定属性和必要属性必须为任意属性类型的子集
    //好比任意属性的类型为string的话，age会报错，由于它为number
    [propName: string]: any;
}

//多一个属性或者少一个都会报错
let tom: Person = {
    id: 1,
    name: 'Tom',
    age: 18,
}
复制代码

3.4 函数

//空白值函数
function awsome(): void{
	console.log('do something')
}

//参数后面有？则是能够跳过
function buildName(firstName: string, lastName?: string, age: number = 18){
	  if(!lastName){
        console.log(firstName)
        return
    }
    console.log(firstName + lastName)
}
复制代码

3.5 声明文件

在使用第三方库时，必须引入它的声明文件才能得到代码补全和提示，可使用@types来管理声明文件，好比要使用Puppeteer，要引入它的声明文件须要：

npn install @types/Puppeteer
复制代码