浅聊一下

来到百度实习的第八天，忙的上天的mentor没时间管我，摸鱼摸到鱼都摸熟了...遂开始学习TS，大佬轻点喷...

JS 和 TS

在学习JS的时候就听说过TS了，但是当时还不太清楚TS和JS的关系：

TS是JS的超集

什么意思？超集，我的理解是，TS是JS的超级无敌进阶升级版...也就是说TS是建立在JS基础上的一个进阶版，JS就像一把性能良好的步枪，而TS则在这把步枪上加装八倍镜，垂直握把和消音器...

TS到底新增了什么？

在上面提到，TS加装了八倍镜，垂直握把和消音器，那么我们就先来看看TS与JS相比到底新增了什么东西...

1. 类型系统：

   • JavaScript：使用动态类型系统。这意味着在JavaScript中，变量的类型是在运行时确定的，而不是在代码编写时。这提供了灵活性，但也可能导致运行时错误。
   • TypeScript：静态类型系统。这意味着在TypeScript中，变量的类型是在代码编写时确定的，并且不能在运行时更改。这增加了类型安全性，减少了潜在的错误。

2. 变量类型：

   • JavaScript：变量的类型在运行时确定。例如，如果你声明一个变量并赋值为"hello"，那么这个变量将被视为字符串类型。
   • TypeScript：变量的类型在编译时确定。这意味着你必须为变量指定一个类型（例如，string、number等），并在整个代码中保持一致。

3. 类型注解：

   • JavaScript：没有类型注解。开发者必须通过文档、注释或其他方式来传达变量或函数的预期类型。
   • TypeScript：允许使用类型注解来明确指定变量、函数参数和返回值的预期类型。这有助于编译器进行类型检查。

4. 类：

   • JavaScript：ES6引入了类语法，但仍然是基于原型的继承模型。
   • TypeScript：提供了完整的类支持，允许基于类的面向对象编程，包括继承、封装和多态性等概念。

5. 模块：

   • JavaScript：ES6引入了模块系统，允许导入和导出变量、函数和类。但相对简单。
   • TypeScript：有一个完整的模块系统，支持导入、导出、命名空间和路径映射等高级概念。这使得代码更加模块化和可维护。

6. 重载：

   • JavaScript：没有内置的函数重载支持。如果你想有多个同名函数，它们必须是不同的函数实体。
   • TypeScript：支持函数重载。允许一个函数名有多个定义，只要它们的参数列表不同。这增加了代码的可读性。

7. 高级类型：

   • JavaScript：类型系统相对简单，没有元组、枚举等高级类型的概念。
   • TypeScript：增加了许多高级类型，如void、never、any、元组、枚举等，以提供更强大的类型描述和限制。

获取TS

如何获取TS并且使用？

1. 安装TypeScript

$ npm insatll -g typescript

1. 验证TypeScript

$ tsc -v
# Version 5.4.5

1. 编译TypeScript

$ tsc a.ts
$ node a.js

当你执行tsc a.ts 时，将ts文件编译成js文件，最后运行js文件

举个例子

确实多出了一个内容一模一样的js文件

我说：既然到头来我们运行的还是一个js文件？为什么我们还要折腾那么一下？直接写js不就行了？

再举个例子：

从上面两个例子中发现在TS编译成js文件的过程中对类型进行了检查：

TypeScript 只会在编译阶段对类型进行静态检查，如果发现有错误，编译时就会报错。而在运行时，编译生成的 JS 与普通的 JavaScript 文件一样，并不会进行类型检查。

tips

TypeScript 默认情况下会将代码编译成 ES5

我们可以看到，ts在编译成js的时候将let编译成了var

解决

1. 在 TypeScript 的编译选项中，有一个名为 "target" 的选项，你可以将其设置为 "es6" 来将代码编译成 ES6。

例如，假设你有一个 TypeScript 文件名为 "app.ts"，你可以使用以下命令将该文件编译成 ES6：

$ tsc app.ts --target es6

1. 如果你想在全局范围内将所有 TypeScript 文件编译成 ES6，你可以在项目的根目录下创建一个名为 "tsconfig.json" 的文件，并在其中配置 "target" 选项：

{ 
    "compilerOptions": { 
            "target": "es6" 
        } 
}

然后，你可以使用以下命令将所有 TypeScript 文件编译成 ES6：

tsc

来看效果

结尾

前期的准备工作基本上就完成啦！继续摸鱼继续学！！！