H5-初始TS

一、基本概念

1.含义：TS全称为TypeScript,中文名称为类型脚本，是JavaScript超集，TS可以用ts-node来直接运行的，最终将TS编译为纯的JS运行在任意的平台上并且是开源的。TypeScript包括ES5和ES6

2.特征

                1.类型系统：（1）类型系统根据类型检查时机来分可以分为动态类型和静态类型

                        静态类型：是指在编译时进行类型检查的语言。在静态类型语言中，变量的类型在声明时就确定了，并且在编译阶段会进行类型检查，确保不会发生类型错误。开发者需要显式地指定变量的类型，编译器会根据类型规则检查代码的正确性。如果存在类型不匹配或其他类型错误，编译器会报错。

                        动态类型：是指在运行时才确定变量的类型的语言。在动态类型语言中，变量的类型可以根据赋值的内容自动推导或在运行时动态变化。不需要显式地声明变量的类型，因此编码更加灵活。类型检查是在运行时进行的，如果存在类型错误，通常会在执行时抛出异常。

                                 （2）根据是否允许隐式类型转换来分可以分为强类型和弱类型

                        强类型：指在变量之间进行操作时要求类型严格匹配的语言。如：如果一个变量声明为number型，那么它不能直接与变量类型string进行拼接，必须进行类型转换后才可以。

                        弱类型：指在变量之间进行操作时允许类型自动转换的语言。不同类型的变量可以自动转换为另一种类型进行操作，甚至进行隐式类型转换。如：可以将一个变量类型为number和一个变量为string进行拼接。

                 2.适用用任何规模：（1）非常适合应用在大型项目中，因为类型系统可以为大型项目带来更高的维护型，相较于其他来将有更少的bug。

                                                （2）在中小型项目中有不足：适用TS需要编写额外的代码，降低了工作效率.

                                                （3）TS可以与JS共存：当你在用了JS来做了项目，但又想适用TS的特性，那么可以使用TypeScript编写新文件，然后再后续中逐步迁移旧文件。

                                                （4）一些第三方库原生支持了TypeScript，再适用的时候即能获得代码不全，如vue3.0，React

                3.与标准同步：TypeScript的语法始终与ECMScript标准同步的

                4.学习TypeScript需要学习后端的一些相关知识。如：interface（接口）、class（类）、Enum（枚举）等概念。除此之外它可能和一些库结合的不是很完美。

TS运行环境搭建

二、运行环境

1.环境搭建

安装node.js(node官网：Node.js (nodejs.org))

        （1）点击下载        

        （2）点击“所有下载选项”

        （3）选中后缀名为msi，这样下载后不用自己配置环境，根据自己电脑来选择版本：系统为x32的选择x84.mis的，x64的选择x64.msi的。

（4）点击到该文件下载位置，进行安装，一直点击下一步。在选择安装目录时，尽量使用默认路径。安装完成后，随便打开一个文件夹在地址栏输入cmd，敲回车键在小黑窗中，输入node -v，若显示该node版本号，则安装成功。下面是步骤图。

                

                

               

安装TypeScript

在任意地方打开小黑窗，输入命令：npm i -g typescript来全局安装typescript，等待，完成后输入tsc -v，若显示版本号，则安装成功。可以通过：tsc    --init   来创建新文件，下面是操作的步骤

        

        

2.编译并运行

（1）创建ts文件：打开vscode软件，创建一个后缀名为ts的文件，在里面编辑语句

        

（2）将ts文件转换为js文件并运行：进入刚刚创建的ts文件，在地址栏打开小黑窗输入        tsc        APP.ts,显示如第一幅图片所示则成功的将ts文件转换为了js文件，再再该窗口输入 node  APP.js来运行刚刚编译过来的js文件

     

        

3.前面这个比较麻烦，这里提供一个比较方便的方法来直接运行ts文件

（1）需要全局安装ts-node，打开任意小黑窗输入：npm install -g ts-node  ​​​​​​​

(2)等待安装成功后直接输入        ts-node APP.ts        即可编译出结果