什么是TypeScirpt
1.1TypeScript简介
TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。
1.2TypeScript和JavaScript的关系
TypeScript是JavaScript的一个超集，他们之间并不是所属关系，TypeScript扩展了JavaScript弱类型语言的限制，增加了更多的模块解析方式和语法糖。TypeScript并不是一个能独立运行的语言，大多数时候他都被转译成JavaScript运行，所以可以简单的认为TypeScript相当于功能更丰富的编译型的JavaScript。
魔据教育1.3为什么要使用TypeScript
传统的JavaScript本身已完全可以满足完整的应用开发需求，但在大型项目协作开发或插件开发的场景中JavaScript弱类型语言的不足便暴漏出来。由于JavaScript并非编译型语言，在代码编写过程中无法轻松的实现良好的类型约束和类型推断。
JavaScript语言在代码的可维护性上存在一些弱项，所以此时强类型的TypeScript语法正好适用于此类开发场景。TypeScript强类型的约束性以及其面向接口编程的约束性可以让TypeScript语法开发的应用有极强的维护性，代价是更大量的代码篇幅。TypeScript非常适合插件提供者、依赖库提供者、基于JavaScript的服务端项目以及大型项目的工程化开发使用，所以并不意味着其适用于一切JavaScript项目做改造。
1.4TypeScript的认知误区
1.之所以TypeScript能流行，是因为其的性能优于JavaScript？
这是一个很大的误区，目前TypeScript的主流使用场景都是在Web领域，从上面的介绍得知
任何使用TypeScript脚本开发的应用或游戏，都不是通过直接运行该语言而实现应用运转的，可以认为TypeScript是一种语法，并不是运行语言。直接运行TypeScript的内核暂时尚未普及，所以绝大多数的TypeScript项目都是需要一次编译，最终执行的还是JavaScript，所以并不能代表性能优势。
TypeScript语言之所以流行，是因为其类型化的JavaScript，在上下文阅读时可以提供更好的类型追溯，通过编辑器插件可已实现更有好的提示。其模块和命名空间等能力更加符合工程化的前端思想。
2.用了TypeScript的项目就比使用JavaScript更好
这是很多认知层面的误差导致的错误认识，有一部分公司为了追赶大厂的项目架构，没有目的的在Vue或React项目中植入TypeScript模块，这种植入并没有帮助项目更好的开发，反而会因为开发者对语言的认识偏差使其变成毫无用处的鸡肋。在技术架构并不复杂的应用开发中，TypeScript的使用会增加大量的代码量，所以在简单项目开发中，单纯的使用ES6-ES语法足够满足工程化需求。乱用类型也会让TypeScript失去其默认的意义，很多项目中由于开发者并不熟悉TypeScript，会出现除基本类型外全部:any的实现，导致TypeScript变成AnyScript，这也是一个极其不好的现象，因为TypeScript的类型系统主要用于迭代和维护项目，最终运行的JavaScript源代码中并不会出现类型。
TypeScript入门
2.1环境搭建
打开电脑的命令行工具执行TypeScript引擎安装命令，代码如下：
npminstalltypescript-g
安装成功后，在命令行工具中输入引擎版本指令查看版本号码，代码如下：
tsc-v
出现版本号代表安装成功。
2.2创建项目
TypeScript引擎安装成功后，就可以在代码编辑器中通过引擎命令实现TypeScript的项目初始化。初始化项目的方式与初始化Node项目类似。在代码编辑器中创建任意文件夹，在命令行工具中打开文件夹，输入初始化TypeScript项目的命令，代码如下：
tsc--init
命令输入后，文件夹中会自动生成名为tsconfig.json的文件本文只介绍涉及到的项目配置，接下来在tsconfig.json文件中将rootDir和outputDir进行配置。
完整的tsconfig.js配置文件说明详见官方文档。
2.3HelloWorld的实现
在项目中创建src文件夹，在src文件夹中创建index.ts文件，在文件中初始化HelloWorld内容。
完成编码后在命令行工具中输入编译命令，代码如下：
tsc
命令执行完成后会发现项目文件夹中出现一个dist文件夹，这个就是刚才配置的输出目录，在文件夹中会对应输出index.js文件，文件内容
可以命令行工具中打开dist目录，通过NodeJS运行该文件，代码如下：
nodeindex
控制台中会出现hello字样，此步骤没问题就代表TypeScript已经可以工作在本地计算机上了。根据运行情况得知TypeScript引擎的主要目的是将TypeScript构建成JavaScript代码，最终通过不同的JavaScript引擎来运行最终的代码。
TypeScript的详细学习
3.1类型
TypeScript最具特色的就是其类型系统，类型让TypeScript变成一个更趋向于静态语言的语法，其类型的使用方式如下：
3.1.1类型声明
通过代码来学习一下TypeScript的类型生命方式。在TypeScript中声明基本类型数据只需要变量名后加入小写的类型名称即可，整体编码除此之外与JavaScript相同，需要注意的是一旦对变量设置具体类型后，该变量就必须使用单一类型。
never类型表示的是那些永不存在的值的类型。例如，never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型；变量也可能是never类型，当它们被永不为真的类型保护所约束时。
never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。即使any也不可以赋值给never。
3.1.2数组元组和对象
在TypeScript中，数组的定义有很多种方式。在TypeScript的世界中，数组若为动态长度，则类型固定，若支持多类型数组则长度固定，接下来介绍如何声明动态类型数组，这里需要借助any关键字。在TypeScript中提供了any关键字用来表示任意类型。当属性在定义时无法推断其未来的类型或其未来会出现动态类型情况时，就可以使用any类型。
数组和元组是编程中常用的引用类型之一，还有一个更加常用的数据类型就是对象类型，当TypeScript中使用对象时，类型定义的方式仍然有很多种个。
3.1.3函数、枚举和interface
函数在TypeScript中的使用方式非常简单。动态类型的JavaScript语言中虽然存在类型的概念，但是其并不具备静态语言的特性，TypeScript中的枚举就是静态语言中非常具有特点的数据结构，其通常用来描述不同常量值。枚举的使用场景并不多做介绍，接下来介绍一下TypeScript中的interface。学习过面向接口编程的同学对interface的使用方式并不会陌生，一个interface是一个完全抽象的对象，一个interface可以对应多个class对其内部的未实现方法进行实现，在TypeScript中，interface主要用于类型描述。在使用TypeScript进行业务开发时，可能会存在大量的动态对象，为更好的将其类型公开到开发者面前，interface的使用是必要的。
除此之外，interface可以实现多类型合并
3.1.4泛型
泛型是静态类型语言的另一灵魂工具，这里体现于静态类型的语言在定义类型时必须明确类型而造成的问题。当函数的参数和返回类型明确时，相同结构的函数需要根据不同类型定义多个，这种情况就很容易将代码的复杂度提高并降低维护性，通过泛型便可以解决这个问题。
3.2TypeScript的其他应用
3.2.1装饰器
随着TypeScript和ES6里引入了类，在一些场景下我们需要额外的特性来支持标注或修改类及其成员。装饰器（Decorators）为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式。Javascript里的装饰器目前处在建议征集的第二阶段，但在TypeScript里已做为一项实验性特性予以支持。
注意装饰器是一项实验性特性，在未来的版本中可能会发生改变。
若要启用实验性的装饰器特性，你必须在命令行或tsconfig.json里启用experimentalDecorators编译器选项：
命令行:
tsc--targetES5--experimentalDecorators
装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，访问符)，属性或参数上。装饰器使用
expression这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。3.2.2模块和命名空间
TypeScript的模块系统与ESM的模块系统在导入导出上几乎没有任何区别，这里具备特色的内容是命名空间的概念。请务必注意一点，TypeScript1.5里术语名已经发生了变化。“内部模块”现在称做“命名空间”。“外部模块”现在则简称为“模块”，这是为了与ECMAScript里的术语保持一致，(也就是说moduleX{相当于现在推荐的写法namespaceX{)。
命名空间用来将代码内部拆解成单独模块，可以将不同功能的函数和代码块按照命名空间划分。可以将命名空间分散到多个文件，在代码中合并引用，将上面的案例改造成分散文件模式。为确保依赖可以完全加载，在运行时采用指定合并文件的方式，在命令行工具中输入，代码如下：
tsc--outFiledist/namespace.jssrc/string-replace.tssrc/namespace.ts
3.2.3d.ts的使用方式
在TypeScript的开发中很多场景都需要进行类型定义，不同模块间的代码都存在不同的类型描述。这就意味着需要在.ts文件中使用大量的class或interface来保证类型的支持。这种情况下和容易出现两个模块共用相同类型而导致类型的重复声明，此时d.ts文件便派上了用场。当test.ts中包含User类型时，在test1.ts中同样适用User类型时，最简单的方式。此时会发现存在无用代码的情况，这时很多开发者可能会通过模块加载的方式将类型导出。
完全可以通过文件拆除的形式将类型提取到外部文件，但这种方式在构建JavaScript时会生成无用的空模块，因为在做语言转换时类型会被完全抹去，所以interface中的内容其实最后并不存在。这时就需要使用d.ts文件了。d.ts文件的作用就是用来描述文件类型，类型识别器默认寻找node_modules/
types文件夹来进行全局类型的检索，可以在tsconfig.json文件中配置typeRoots来修改d.ts的存放位置。接下来将typeRoots属性的值设置。在项目中创建types文件夹，在其中创建index.d.ts文件，在文件中定义User类型，并将test和test1两个文件的类型引用去掉。
总结
通过对TypeScript语言的简单了解，需要明确TypeScript语言在实际应用开发中的使用意义和优势，TypeScript并不是项目开发中必须使用的语言，他更多的应用于服务端开发、游戏开发、插件开发等场景。在前端应用构建和业务开发场景中，TypeScript往往是与JavaScript语法混合使用，并不是所有部分都需要做类型定义和类型标注，并不是TypeScript中的每一个特性都必须应用在项目开发中，所以在使用这门语言时一定要分析使用场景选择最合适的部分应用，不要盲从。
注：内容来源于Boss直聘，作者为魔据教育前端讲师鹏叔。部分内容因为格式问题有缺失，如果想要获得完整内容，建议移步zh鹏叔聊编程寻求答案。或者戳戳蘑菇君为你解答。
转载请注明：http://www.0431gb208.com/sjslczl/4644.html
