TypeScriptTypeScript介绍与安装

Posted 2022-06-13 前端More

文章目录

• • 1 TypeScript介绍
  • • 1.1 什么是TypeScript?
    • 1.2 为什么需要 TypeScript
    • 1.3 JS与TS的相关知识
    • 1.4 TypeScript特性
  • 2 TypeScript安装

参考B站尚硅谷视频：https://www.bilibili.com/video/BV1Xy4y1v7S2

1 TypeScript介绍

1.1 什么是TypeScript?

TypeScript简称TS，它是以javascript为基础构建的语言，是JavaScript的超集(TS的内容多于JS的内容，可以认为TS是JS的升级版)，扩展了JavaScript并添加了类型，可以在任何支持javaSoript的平台中执行。 TS和JS之间的关系其实就是Less/Sass和CSS之间的关系， TS也是对JS进行扩展。由于TS不能被JS解析器直接执行,故TS需要编译成JS在执行。

1.2 为什么需要 TypeScript

因为JavaScript是弱类型语言, 很多错误只有在运行时才会被发现，而TypeScript提供了一套静态检测机制, 可以帮助我们在编译时就发现错误 。

1.3 JS与TS的相关知识

JS是一门标准的弱类型且动态类型的语言，所以JS灵活多变，缺失类型系统的可靠性。

TS是一门标准的强类型且静态类型的语言。

强类型VS弱类型

强类型：在语言层面就限制了函数字的实参类型必须与形参类型相同；

弱类型：语言层面不会限制实参的类型； 我们定义一个变量，不需要考虑它的类型

强类型语言的特点就是不允许程序在发生错误后继续执行

弱类型的一个特点就是在计算时，不同类型之间对使用者透明地对变量进行隐式转换。

相较于弱类型语言，强类型有着明显的优势：

• 错误更早暴露（编码阶段就能发现并避免类型异常）；
• 代码更智能，编码更准确（开发工具智能提示能更准确的语法，大大提高编码效率）；
• 重构更牢靠（重构时，能及时暴露出相关代码异常信息，可及时准确的对耦合代码进行修改）；
• 减少不必要的类型判断（在编码阶段，参数类型已经确定，就不用再对类型做约定判断）；

静态类型VS动态类型

静态类型语言：一个变量在声明时它的类型就是明确的，声明过后，它的类型就不可修改；

动态类型语言：在代码运行阶段才能明确变量的类型，而且变量的类型随时可以改变；

两者区别:是否允许随时修改变量的类型 ,

如何区分:一门语言在编译时报错，那么是静态类型，如果在运行时报错，那么是动态类型。

静态类型的好处:有利于代码的重构，可以在编译器编译时捕获错误。这样我们在编写代码的时候就能避免很多错误，提高编码的效率！

静态类型语言	动态类型语言
对类型极度严格	对类型非常宽松
立即发现错误	不能立即发现（单元测试）
运行时性能好	运行时性能差（可以改善 v8）
自文档化	可读性差（工具生成文档）

1.4 TypeScript特性

• 支持最新的JavaScript新特性(ES6-ES12)，添加ES不具备的新特性
• 支持代码静态检查，拥有了更加严格的语法和更强大的功能 ，TS可以在代码执行前就完成代码的检查，
  减小了运行时异常的出现的几率；
• 同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS;
• 支持诸如C,C++,Java,Go等后端语言中的特性 (枚举、泛型、类型转换、命名空间、声明文件、类、接口等) ，有强大的开发工具以及丰富的配置选项。

2 TypeScript安装

安装Node：https://nodejs.org/zh-cn/

安装ts：

 npm i -g typescript 

将ts文件编译为js文件(生成一个和ts文件名称相同的js文件),然后执行js文件

//编译ts文件
tsc XXX.ts
//运行js文件
node XXX.js

也可以安装ts-node直接运行ts文件 ，不需要编译为js

//安装ts-node
npm i -g ts-node 
//直接运行ts文件
ts-node XXX.ts

开发者涨薪指南 48位大咖的思考法则、工作方式、逻辑体系