这是我参与「第五届青训营」伴学笔记创作活动的第10天

今天来记录学习ts的笔记。本篇主要分为简介与使用来介绍ts。

简介

什么是TypeScript

TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。

TypeScript添加了很多尚未正式发布的ECMAScript。2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript。当前最新版本为TypeScript 4.9。

ts的优势

• 代码的可维护性强，尤其在大型项目的时候效果显著
• 友好地在编辑器里提示错误，编译阶段就能检查类型发现大部分错误
• 支持最新的JavaScript新特特性
• 周边生态繁荣，vue3已全面支持 typescript

目前出现的许多库基本都是使用ts进行开发。

ts的劣势

• 学习成本较高
• 和一些插件库的兼容并不是特别完美，如以前在 vue2 项目里使用 typescript就并不是那么顺畅
• 增加前期开发的成本
• 在个人使用的场景来看，如果对于ts的语法不够熟悉，再加上编译器检验，很容易出现报红的情况。

ts与js的区别

js

• 动态类型，运行时明确变量的类型，变量的类型由变量的值决定，并跟随值的改变而改变；
• 直接运行在浏览器和node.js环境中；
• 弱类型，数据类型可以被忽略的语言。一个变量可以赋不同数据类型的值；

ts

• 静态类型，声明时确定类型，之后不允许修改；
• 编译运行，始终先编译成JavaScript再运行；
• 强类型，一旦一个变量被指定了某个数据类型，如果不经过强制转换，那么它就永远是这个数据类型了；

使用

• 原始类型：number、string、boolean、null、undefined、symbol
• 数组类型：两种写法：1、number[]  2、Array< number >  定义两个： (number|string)[]

注意

不推荐使用any类型 这会让 'TypeScript’变成 ‘AnyScript’ (失去TS的类型保护的优势)，因为当值的类型是any时，可以对该值进行任意操作，并且不会有代码提示， 具有隐式 any 类型的情况：声明变量不提供类型也不提供默认值，函数参数不加类型。