你用的是TypeScript还是AnyScript

1.什么是TypeScirpt

1.1 TypeScript简介

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

1.2 TypeScript和JavaScript的关系

TypeScript是JavaScript的一个超集，他们之间并不是所属关系，TypeScript扩展了JavaScript弱类型语言的限制，增加了更多的模块解析方式和语法糖。TypeScript并不是一个能独立运行的语言，大多数时候他都被转译成JavaScript运行，所以可以简单的认为TypeScript相当于功能更丰富的编译型的JavaScript。

1.3 为什么要使用TypeScript

传统的JavaScript本身已完全可以满足完整的应用开发需求，但在大型项目协作开发或插件开发的场景中JavaScript弱类型语言的不足便暴漏出来。由于JavaScript并非编译型语言，在代码编写过程中无法轻松的实现良好的类型约束和类型推断。若开发者提供了一个JavaScript依赖包给其他开发者使用，使用依赖的开发者并不能显示观察依赖包内部的类型组成，很容易出现下列场景，代码如下：

//若依赖包提供了属性foo并对其期待类型为string
foo = 123 //此时应用foo变量的开发者为其设置数字类型
...
foo = false //后续又存在开发者为其设置boolean类型
//这种应用方式会导致在代码阅读上无法确定该属性的明确类型
//也会导致运行上的一定风险

综上所述，JavaScript语言在代码的可维护性上存在一些弱项，所以此时强类型的TypeScript语法正好适用于此类开发场景。TypeScript强类型的约束性以及其面向接口编程的约束性可以让TypeScript语法开发的应用有极强的维护性，代价是更大量的代码篇幅。TypeScript非常适合插件提供者、依赖库提供者、基于JavaScript的服务端项目以及大型项目的工程化开发使用，所以并不意味着其适用于一切JavaScript项目做改造。

1.4 TypeScript的认知误区

1.之所以TypeScript能流行，是因为其的性能优于JavaScript？

这是一个很大的误区，目前TypeScript的主流使用场景都是在Web领域，从上面的介绍得知

任何使用TypeScript脚本开发的应用或游戏，都不是通过直接运行该语言而实现应用运转的，可以认为TypeScript是一种语法，并不是运行语言。直接运行TypeScript的内核暂时尚未普及，所以绝大多数的TypeScript项目都是需要一次编译，最终执行的还是JavaScript，所以并不能代表性能优势。

TypeScript语言之所以流行，是因为其类型化的JavaScript，在上下文阅读时可以提供更好的类型追溯，通过编辑器插件可已实现更有好的提示。其模块和命名空间等能力更加符合工程化的前端思想。

2.用了TypeScript的项目就比使用JavaScript更好

这是很多认知层面的误差导致的错误认识，有一部分公司为了追赶大厂的项目架构，没有目的的在Vue或React项目中植入TypeScript模块，这种植入并没有帮助项目更好的开发，反而会因为开发者对语言的认识偏差使其变成毫无用处的鸡肋。在技术架构并不复杂的应用开发中，TypeScript的使用会增加大量的代码量，所以在简单项目开发中，单纯的使用ES6-ES2022语法足够满足工程化需求。乱用类型也会让TypeScript失去其默认的意义，很多项目中由于开发者并不熟悉TypeScript，会出现除基本类型外全部:any的实现，导致TypeScript变成AnyScript，这也是一个极其不好的现象，因为TypeScript的类型系统主要用于迭代和维护项目，最终运行的JavaScript源代码中并不会出现类型。

2.TypeScript入门

TypeScript的中文文档地址为：TypeScript中文网 · TypeScript——JavaScript的超集后续部分可能需要进行文档查阅。

2.1 环境搭建

打开电脑的命令行工具执行TypeScript引擎安装命令，代码如下：

npm install typescript -g

安装成功后，在命令行工具中输入引擎版本指令查看版本号码，代码如下：

tsc -v

出现版本号代表安装成功。

2.2 创建项目

TypeScript引擎安装成功后，就可以在代码编辑器中通过引擎命令实现TypeScript的项目初始化。初始化项目的方式与初始化Node项目类似。在代码编辑器中创建任意文件夹，在命令行工具中打开文件夹，输入初始化TypeScript项目的命令，代码如下：

tsc --init

命令输入后，文件夹中会自动生成名为tsconfig.json的文件，该文件内容如下：

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */
​
    /* Projects */
    // "incremental": true,                              /* Enable incremental compilation */
    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
    // "tsBuildInfoFile": "./",                          /* Specify the folder for .tsbuildinfo incremental compilation files. */
    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects */
    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
​
    /* Language and Environment */
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
    // "reactNamespace": "",                             /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
​
    /* Modules */
    "module": "commonjs",                                /* Specify what module code is generated. */
    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
    // "typeRoots": [],                                  /* Specify multiple folders that act like `./node_modules/@types`. */
    // "types": [],                                      /* Specify typ