【TypeScript介绍】一文带你初步了解TypeScript

前言

博主主页👉🏻蜡笔雏田学代码
专栏链接👉🏻【TypeScript专栏】
今天开始学习学习TypeScript这门语言！
感兴趣的小伙伴一起来看看吧~🤞

文章目录

TypeScript介绍

1. TypeScript是什么

TypeScript(简称TS)是JavaScript的超集（

JS有的TS都有

）。

TypeScript = Type + JavaScript（在JS的基础之上，为JS添加了类型支持）

//TS代码：有明确的类型，即：number（数值类型）letage1: number =18//JS代码：无明确类型let age2 =18

TypeScript是微软开发的开源编程语言，可以在任何运行JavaScript的地方运行（浏览器等）

2. TypeScript为什么要为JS提供类型支持？

背景：JS类型系统存在先天缺陷，JS代码中绝大部分错误都是类型错误（Uncaught TypeError）。

问题：增加了找bug，改bug的时间，严重影响了开发效率。

TS属于静态类型的编程语言，JS属于动态类型的编程语言。

静态类型：编译期做类型检查
动态类型：执行期做类型检查

3. TS 相比于 JS 的优势

1. 更早（写代码的同时）发现错误，减少改bug，找bug的时间，提升开发效率。
2. 程序中任何位置的代码都有代码提示，随时随地的安全感，增强了开发体验。
3. 强大的类型系统提升了代码的可维护性，使得重构代码更加容易。
4. 支持最新的ECMAScript语法，优先体验最新的语法，让你走在前端技术的最前沿。
5. TS 类型推断 机制，不需要在代码中的每个地方都显示标注类型，让你在享受优势的同时，尽量降低了成本。

除此之外，Vue3源码使用 TS 重写，Angular默认支持 TS，React与 TS 完美配合，TypeScript已成为大中型前端项目的首选编程语言。

TypeScript初体验

1. 安装编译TS 的工具包

Node.js/浏览器 都只认识JS代码，不认识TS代码。需要先将TS代码转换为JS代码后，然后才能运行。

npm i -g typescript

typescript包：用来编译TS代码的包，提供了 tsc命令 ，实现了TS -> JS的转换。

tsc -v(查看TypeScript的版本)

2. 编译并运行TS 代码

1. 创建hello.ts文件
   

   （注意：TS文件后缀名为 .ts）。

2. 将TS编译为JS：
   

   在终端中输入命令，tsc hello.ts(此时，在同级目录中会出现一个同名的 JS 文件)。

3. 执行JS 代码：
   

   在终端中输入命令，node hello.js。

创建TS文件 ————> 编译TS ————> 执行 JS

所有合法的 JS 代码都是 TS 代码，有 JS 基础只需要学习 TS 的类型即可

注意：由TS编译生成的 JS 文件 ，代码中就没有类型信息了

3. 简化运行TS的步骤

使用 ts-node包，“直接”在Node.js中执行 TS 代码，ts-node并不会生成 JS 文件

安装命令：npm i -g ts-node(ts-node包提供了ts-node命令)。

查看版本：ts-node -v

使用方式：ts-node hello.ts

解释：ts-node命令在内部偷偷的将 TS -> JS ，然后，再运行 JS 代码

      今天的分享就到这里啦✨
     
    
   
   
    \textcolor{red}{今天的分享就到这里啦✨}
   
  
 今天的分享就到这里啦✨


 
  
   
    
     
      原创不易，还希望各位大佬支持一下
     
    
   
   
    \textcolor{blue}{原创不易，还希望各位大佬支持一下}
   
  
 原创不易，还希望各位大佬支持一下

🤞

      点赞，你的认可是我创作的动力！
     
    
   
   
    \textcolor{green}{点赞，你的认可是我创作的动力！}
   
  
 点赞，你的认可是我创作的动力！

⭐️

      收藏，你的青睐是我努力的方向！
     
    
   
   
    \textcolor{green}{收藏，你的青睐是我努力的方向！}
   
  
 收藏，你的青睐是我努力的方向！

✏️

      评论，你的意见是我进步的财富！
     
    
   
   
    \textcolor{green}{评论，你的意见是我进步的财富！}
   
  
 评论，你的意见是我进步的财富！