TypeScript学习01-初识TypeScript

都是数据而已

已于 2024-03-03 23:13:55 修改

阅读量683

点赞数 18

CC 4.0 BY-SA版权

文章标签： typescript 学习 javascript

于 2024-03-03 12:47:44 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45052183/article/details/136429733

本文探讨了TypeScript作为JavaScript的超集，如何通过类型系统提升编程安全性和开发效率。文章介绍了TypeScript在Vue3和React中的应用，强调了其在大型项目中的优势，并讨论了JavaScript的缺失及其解决方案。最后提到，许多流行框架如Angular、Vue和React都已广泛采用TypeScript进行开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、初识TypeScript

1.1、主要的目标

1、TypeScript核心语法 2、TypeScript+Vue3 3、Ts+React18

在早期Vue2如果想要使用TypeScript是非常麻烦的、但是Vue3中就好很多了、但是即使是这样、也没有React跟TypeScipt更加方便

1.2、为什么要学习`TypeScript`

从编程的思维的角度来说、他会提高你类型的思维方式、对后端程序员来说非常友好

因为有类型限制的这一特性加入、编写大型项目时容错度会更好一些、写出来的代码类型也是非常安全的Vue3的项目、都是通过TypeScirpt来重写的

功利角度来说！升职加薪…

1.3、`JavaScript`&`TypeScript`的取舍

任何新技术的出现都是为了解决原有技术的某个痛点、当然TypeScript的出现就是为了补足JavaScriprt的、而不是抛弃JavaScript

每个人可能观点并不完全一致，但是从很多角度来看，JavaScript是一门非常优秀的编程语言；而且，可以说在很长一段时间内这个语言不会被代替，并且会在更多的领域被大家广泛使用；

TypeScript的使用就是通过环境把TypeScript代码变成JavaScript然后在浏览器上进行运行

1.3.1、著名的Atwood定律

Stack Overflow的创立者之一的 Jeff Atwood 在2007年提出了著名的 Atwood定律

any application that can be written in JavaScript, will eventually be written in JavaScript.

任何可以使用JavaScript来实现的应用都最终都会使用JavaScript实现。

1.3.2、JavaScript开发多端应用

Web端的开发我们一直都是使用JavaScript

移动端开发可以借助于ReactNative、Weex、Uniapp等框架实现跨平台开发；

小程序端的开发也是离不开JavaScript；

桌面端应用程序我们可以借助于Electron来开发；

服务器端开发可以借助于Node环境使用JavaScript来开发

1.4、`JavaScript`的缺失

并且随着近几年前端领域的快速发展，让JavaScript迅速被普及和受广大开发者的喜爱，借助于JavaScript本身的强大，也让使用JavaScript开发的人员越来越多。

其实由于各种历史的因素、JavaScript语言本身存在很多的问题、

①比如ES5以及之前使用Var关键字关于作用域的问题、

②在比如最初JavaScript设计的数组类型并不是连续的内存空间、

③最大的一个缺失就是直到今天JavaScipt也没有解决的问题类型检测机制

不可否认的是，JavaScript正在慢慢变得越来越好，无论是从底层设计还是应用层面。在ES6、7、8等的推出，每次都会让这门语言更加现代、更加安全、更加方便。但是知道今天，JavaScript在类型检测上依然是毫无进展（为什么类型检测如此重要，我后面会聊到）

1.5、`JavaScript`类型缺失带来的问题

首先你需要知道，编程开发中我们有一个共识：错误出现的越早越好、写的时候发现错误、就不要再编译时候发现（IDE的优势，在编码的过程中就可以帮助我们发现错误)、能在代码编译期间发现错误、就不要再运行期间发生错误、类型检测就可以很好的帮助我们做到这一点

能在开发阶段发现错误，就不要在测试期间发现错误，能在测试期间发现错误，就不要在上线后发现错误。

//any 任意类型
function getLength1(args:any){  //
    return args.length;
}
//限制类型参数只能传入String或者String[]
function getLength1(args:String|String[]){ 
    return args.length;
}
//限制对象类型当中的属性
function getLength1(args:{length:number}){
    return args.length;
}

const info={length:100}

//传入String调用
getLength1("aa")
//传入数组调用   
getLength1(["abc","cba","nac"]);
//传入数组调用
getLength(123)
//传入空字符串调用
getLength()
//传入一个对象
getLength2(info);

类型缺失这一错误、很大的原因就是因为JavaScript没有对我们传入的参数进行任何的限制，只能等到运行期间才发现这个错误，并且当这个错误产生时，会影响

后续代码的继续执行，也就是整个项目都因为一个小小的错误而深入崩溃；

当然你可能会想，我怎么可能犯这么低级的错误呢？

当我们写像我们上面这样的简单的demo时，这样的错误很容易避免，并且当出现错误时，也很容易检查出来；但是当我们开发一个大型项目时呢？你能保证自己一定不会出现这样的问题吗？而且如果我们是调用别人的类库，又如何知道让我们传入的到底是什么样的参数呢？如果我们通过TypeScript给代码加上了类型限制那么在开发大型项目时、TypeScript这一类型检测特性、就会大大的增强我们代码的可用性和安全性、很多问题在编译器就能被发现

1.6、`JavaScript`类型缺失思维

我们已经简单体会到没有类型检查带来的一些问题，JavaScript因为从设计之初就没有考虑类型的约束问题，所以造成了前端开发人员关于类型思维的缺失

前端开发人员通常不关心变量或者参数是什么类型的，如果在必须确定类型时，我们往往需要使用各种判断验证；

从其他方向转到前端的人员，也会因为没有类型约束，而总是担心自己的代码不安全，不够健壮，
所以我们经常会说JavaScript不适合开发大型项目，因为当项目一旦庞大起来，这种宽松的类型约束会带来非常多的安全隐患，多人员开发它们之间也没有良好的类型契约，比如当我们去实现一个核心类库时，如果没有类型约束，那么需要对别人传入的参数进行各种验证来保证我们代码的健壮性，在比如我们去调用别人的函数，对方没有对函数进行任何的注释，我们只能去看里面的逻辑来理解这个函数需要传入什么参数，返回值是什么类型；