前言
最近一段时间除了日常的工作生活外，陆陆续续的开始接触和vue3相关的知识。说到vue3就不得不开始接触typescript，刚开始学习typescript的时候很不喜欢ts的，因为它有一定的学习成本,代码量增加,代码复杂度增加，搞得自己很蒙圈。后面不断学习后发现ts的静态检查使得开发者提前发现错误真的很重要(尤其是我在白天用js写vue2的项目，晚上用ts学习练习的过程中)。
下面给大家看一段我在其他平台看到的关于ts的忠告。希望对于你的ts学习也有帮助～
忠告:
不要学习TypeScript, 因为它的学习成本很低
不要学习TypeScript, 因为它能减少团队无效沟通
不要学习TypeScript, 因为它能让你的代码更健壮
不要学习TypeScript, 因为它能帮助你快速掌握其它后端语言
不要学习TypeScript, 因为你会迷恋它
正文
今天我们将从什么是ts、ts和js的区别以及ts的新特性给大家介绍一下typescript这一门独特的语言。
什么是ts
ts的介绍
TypeScript是一种由微软开发的开源、跨平台的编程语言。
1、它是JavaScript的超集，最终会被编译为JavaScript代码。
//超集：TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以运行在TypeScript环境中，主要提供了类型系统和对 ES6+ 的支持
2、TS和JS之间的关系其实就是Less/Sass和CSS之间的关系
//就像Less/Sass是对CSS进行扩展一样, TS也是对JS进行扩展
//就像Less/Sass最终会转换成CSS一样, 我们编写好的TS代码最终也会换成JS
ts的特点
- 始于JavaScript，归于JavaScript
TypeScript 可以编译出纯净、 简洁的 JavaScript 代码，并且可以运行在任何浏览器上、Node.js 环境中和任何支持 ECMAScript 3（或更高版本）的JavaScript 引擎中 - 强大的类型系统
类型系统允许 JavaScript 开发者在开发 JavaScript 应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构 - 先进的 JavaScript
TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件
ts的新特性(浅说三个)
类型注解
- 含义：
类型注解是一种轻量级的为函数或变量添加约束的方式，TypeScript提供了静态的代码分析，它可以分析代码结构和提供的类型注解 - 语法：
(()=>{
//定义一个函数fn，并传如注解默认为string类型
function fn(str:string){//:string即为对str的类型注解
return "你好啊！我是"+str
}
let text = "小跳跳"
console.log(fn(text))
})()
- 使用类型注解后何时会出现报错
1、当fn未传递test参数时，vscode代码爆红如下：
2、当传递的test参数不为string类型时，会出现以下的报错：
- 总结：TypeScript提供了静态的代码分析，它可以分析代码结构和提供的类型注解
接口
- 含义
是对象的状态(属性)和行为(方法)的抽象(描述)，接口是一种类型、是一种规范、是一种规则、是一种约束 - 语法：
// 1、定义一个接口，限定或者约束对象中的属性数据，interface是定义接口的关键字
interface Person {
firstName: string
lastName: string
}
//定义一个对象或函数，该对象的类型就是定义的接口
function greeter (person: Person) {
return 'Hello, ' + person.firstName + ' ' + person.lastName
}
let user = {
firstName: 'Yee',
lastName: 'Huang'
}
console.log(greeter(user))
- 总结：
1、接口不能转换为 JavaScript。 它只是 TypeScript 的一部分
2、刚开始接触接口的时候，我也会觉得接口的作用其实不大，感觉与js没有太大的改变，但随着学习的不断深入，我们会慢慢的发现ts接口的妙用的(想了解更多关于接口的内容，请容我整理笔记后几篇文章发布)。
类
- 含义：
TypeScript 是面向对象的 JavaScript，类描述了所创建的对象共同的属性和方法，typeScript 支持面向对象的所有特性，比如 类、接口等 - 语法：
// 1定义一个类、class class_name {
// 类作用域
//字段
//构造函数
//方法
}
//以下实例我们声明了类 Car，包含字段为 engine，构造函数在类实例化后初始化字段 engine
class Car {
// 字段
engine:string;
// 构造函数
constructor(engine:string) {
this.engine = engine
}
// 方法
disp():void {
console.log("发动机为 : "+this.engine)
}
}
//2、创建实例化对象
//var object_name = new class_name([ arguments ])
// 创建一个对象
var obj = new Car("XXSY1")
// 访问字段
console.log("读取发动机型号 : "+obj.engine)
// 访问方法
obj.disp()
- 总结：
重新运行 ts文件，你会看到 TypeScript 里的类只是一个语法糖，本质上还是 JavaScript 函数的实现
关于ts此部分的面试题
1、什么是Typescript?
-TypeScript是一种由微软开发和维护的免费开源编程语言。它是一个强类型的JavaScript超集，可编译为纯JavaScript
-TypeScript可以在任何浏览器、主机和操作系统上执行。TypeScript不是直接在浏览器上运行的。它需要一个编译器来编译和生成JavaScript文件。TypeScript是带有一些附加特性的ES6 JavaScript版本。
2、为什么越来越多的企业选择使用TypeScript ？
- TypeScript 更具表现力，这意味着它的语法混乱更少。
- 由于高级调试器专注于在编译时之前捕获逻辑错误，因此调试很容易。
- 静态类型使 TypeScript 比 JavaScript 的动态类型更易于阅读和结构化。
- 由于通用的转译，它可以跨平台使用，在客户端和服务器端项目中。
3、TypeScript 的主要特点特性是什么？
-跨平台：TypeScript编译器可以安装在任何操作系统上，例如Windows，MacOS和Linux。
-面向对象的语言：TypeScript提供了诸如类，接口和模块之类的功能。 因此，它可以为客户端和服务器端开发编写面向对象的代码。
-静态类型检查：TypeScript使用静态类型，并在编译时帮助进行类型检查。 因此，您无需运行脚本即可在编写代码时发现错误。
-可选的静态键入：如果您使用的是JavaScript动态键入，TypeScript还允许可选的静态键入。
-DOM操作：可以使用TypeScript来操作DOM以添加或删除元素。
-ES6功能：TypeScript包括计划的ECMAScript 2015（ES6，7）的大多数功能，例如类，接口，箭头功能等。
4、TypeScript 和 JavaScript 区别?
| typescript | javascript |
|---|---|
| 面向对象的语言 | 脚本语言 |
| 静态类型 | 没有静态类型 |
| 支持模块 | 不支持模块 |
| 支持可选参数 | 不支持可选参数 |
5、使用TypeScript有哪些缺点？
-TypeScript需要很长时间来编译代码。
-它不支持抽象类。
-如果我们在浏览器中运行TypeScript应用程序，则需要执行编译步骤才能将TypeScript转换为JavaScript。
-网络开发人员使用JavaScript已有数十年了，TypeScript并没有带来任何新的东西。
-要使用任何第三方库，定义文件是必须的。
-类型定义文件的质量是一个问题。
6、TypeScript的组成部分是什么？
-语言，它由语法，关键字和类型注释组成。
-TypeScript编译器，编译器（tsc）将用TypeScript编写的指令转换为等效的JavaScript。
-TypeScript语言服务，语言服务在核心编译器管道（类似于编辑器的应用程序）周围暴露了一个附加层。 语言服务支持一组常见的典型编辑器操作。
以上就是我本期的ts分享啦，有关于ts更多的内容，请持续关注哦～
