前言
最近有学前端的小伙伴抱怨,去大厂面试前端,面试官提了一堆 TypeScript
的问题,比如“TypeScript 的特性”、“TypeScript 的内置类型”、“TypeScript 接口是什么意思”等。
他很纳闷,是不是现在不会 TypeScript
就进不了大厂了?
其实,只要你稍微关注一下前端的发展,就会知道 TypeScript
的火爆。2018 年 Stack Overflow Developer 的调研就显示,TypeScript
已经成为比 JavaScript
更受开发者喜爱的编程语言了。
包括腾讯在内等大厂的高级工程师也表示过,TypeScript
使用率很高,并逐渐成为前端编程领域的主流,甚至,Vue 3.0 的 98% 也是由 TypeScript
来写的。
为什么香?
我们都知道,JavaScript
是一门动态弱类型语言, 对变量的类型非常宽容,TypeScript
的出现很好地弥补了 JavaScript 在静态类型检查方面的缺陷,为它提供了良好的类型检查支持。
目前, Angular 和 Vue 的新版本都已使用 TypeScript
进行了重构,在可预见的未来,TypeScript
将成为前端开发者必须掌握的开发语言之一。
那么, TypeScript
提供了哪些特性,使得它成为大家的” 刚需 “呢?
太多了,包括但不限于:
1. 支持静态类型
2. 支持模块
3. 支持接口
4. 支持可选参数方法
5. 支持原型特性
6. 更简洁,可读性和复用性更强,更适合大型项目
7. ……
TS代码难写吗?
TypeScript
代码难写吗?不难,它只是JavaScript的超集,最简单的做法三步就搞定。
1. 找一个 js 文件
2. 按下重命名
3. 把.js 改成.ts
搞定!
实验楼上线了一门免费的 TypeScript 基础入门教程,将从“从什么是 TypeScript 开始”,一步步讲解 TypeScrip 基本数据类型、接口、类、函数、模块、命名空间等知识点。
课程地址:
https://www.shiyanlou.com/courses/2023
????????????下面是课程第一节的内容:
初识TypeScript
简介
TypeScript 是 JavaScript 的一个超集,他们两个之间有非常深入的联系,所以在学习 TypeScript 之前,你需要学习 JavaScript 相关教程。在本实验我们将会对 TypeScript 进行简单的介绍并初步使用它。
知识点
TypeScript 简介
为何选择 TypeScript
安装使用 TypeScript
TypeScript 简介
什么是TypeScript?
TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。它扩展了 JavaScript 的语法,所以任何现有的 JavaScript 程序可以不加改变的在 TypeScript 下工作。TypeScript 是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性。
TypeScript 与 JavaScript 的区别
TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法。
TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译。
TypeScript 文件的后缀名
.ts
(.ts
,.tsx
,.dts
),JavaScript 文件是.js
。在编写 TypeScript 的文件的时候就会自动编译成 js 文件。
用一张表格来更清晰的观察两者的区别:
JavaScript | TypeScript | |
---|---|---|
语言 | 脚本语言 | 面向对象编程语言 |
学习难度 | 灵活易学 | 需要有脚本编程经验 |
类型 | 轻量级解释编程语言 | 强类型的面向对象编程语言 |
客户端/服务端 | 客户端服务端都有 | 侧重客户端 |
拓展名 | .js | .ts 或 .tsx |
耗时 | 更快 | 编译代码需要些时间 |
数据绑定 | 没有类型和接口的概念 | 使用类型和接口表示数据 |
语法 | 所有的语句都写在脚本标签内。浏览器将脚本标签内的文本识别为脚本 | 一个 TypeScript 程序由模块、方法、变量、语句、表达式和注释构成 |
静态类型 | JS 中没有静态类型的概念 | 支持静态类型 |
模块支持 | 不支持模块 | 支持模块 |
接口 | 没有接口 | 支持接口 |
可选参数方法 | 不支持 | 支持 |
原型 | 没有这种特性 | 支持原型特性 |
参考选择 | 小型项目 | TS 是一种面向对象语言,代码更简洁,可读性和复用性强。因此 TS 更适合大型项目。 |
为何选择 TypeScript
TypeScript 增加了代码的可读性和可维护性。
新增了其他语言的语法,比如 Class(类)、Interface(接口)、Generics(泛型)、Enums(枚举)等。
TypeScript 拥抱了 ES6 规范。
兼容很多第三方库,即使第三方库不是用 TypeScript 写的,也可以编写单独的类型文件供 TypeScript 读取。
TypeScript 拥有活跃的社区
更值得一提的是,TypeScript 在开发时就能给出编译错误,而 JavaScript 错误则需要在运行时才能暴露。作为强类型语言,你可以明确知道数据的类型,代码可读性极强,几乎每个人都能理解。TypeScript被很多业界大佬使用,像Asana、Circle CL 和 Slack 这些公司都在用 TypeScript。
安装使用 TypeScript
打开终端 terminal 输入全局安装命令:
cnpm install -g typescript
新建一个文件index.ts
,输入以下内容:
console.log("hello world");
var a: string = "2"; //这是ts写法,暂时不需要掌握,后续会讲到
在终端输入tsc index.ts
编译文件,编译成功则会生成一个同名的 js 文件。
生成的 js 文件里则将 ts 语法转换成了 js 语法。
总结
本小节我们学习了以下知识点:
TypeScript 简介
为何选择 TypeScript
安装使用 TypeScript
我相信你已经对 TypeScripty 有了一个初步了解,接下来我们将会对 TypeScript 进行进一步学习。
❝???? 点击阅读原文,免费学习完整课程
❞
❞
完