我为什么要用TypeScript?花五分钟上手教程

Mark sheng 北京新锐在线科技有限公司 web前端工程师  2021-05-19 04:50:09
最近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
...全文
2262 回复 打赏 收藏 举报
写回复
回复
切换为时间正序
请发表友善的回复…
发表回复
相关推荐
发帖
其他
加入

1.0w+

社区成员

Web 开发 其他
社区管理员
  • 其他
申请成为版主
帖子事件
创建了帖子
2021-05-19 04:50
社区公告
暂无公告