typeScript的介绍、安装、开发工具

最新推荐文章于 2024-09-12 22:08:54 发布

原创最新推荐文章于 2024-09-12 22:08:54 发布 · 350 阅读

0 ·

CC 4.0 BY-SA版权

typeScript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了TypeScript，一种由微软开发的开源编程语言，它是JavaScript的超集，支持ES6和ES5规范。TypeScript在大型企业项目中得到应用，如Angular、Vue和React。文章详细阐述了TypeScript的特点，如静态类型、类和模块，并提供了通过npm安装TypeScript的步骤，包括解决镜像问题和配置WebStorm自动编译。

typeScript的介绍

TypeScript 是由微软开发的开源编程语言
TypeScript是javaScript 的超集，遵循最新的ES6、ES5规范。TypeScript扩展了javaScript的语法。
TypeScript更像后端JAVA、C#这样的面向对象语言，可以让js开发大型企业项目。
谷歌也在大力支持TypeScript 的推广，谷歌的angular2.x+就是基于TypeScript语法。
最新的Vue、React 也可以集成TypeScript。
Nodejs框架Nestjs、midway中使用的就是typeScript语法。

特点：

免费开源，使用apache授权协议。
基于ECMAScript标准进行拓展，是JavaScript的超集。
添加了可选静态类型、类和模块。
可以编译为可读、符合ECMAScript规范的JavaScript。
成为一个跨平台的工具，支持所有浏览器、主机和操作系统。
保证可以与javaScript代码一起运行，无需修改（这一点保证了js项目可以向typescript平滑迁移）。
文件拓展名是ts。
编译时检查，不污染运行环境。

TypeScript的安装编译

这里提供三种方法，请自行选择

在使用npm命令之前，电脑必须得安装nodejs

npm install -g typescript
或者
cnpm install -g typescript //建议使用
或者
yarn global add typescript

如果电脑没有安装过 cnpm,请先安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完cnpm后，再来安装typeScript

cnpm install -g typescript

如果安装报以下错误：

就是镜像问题，只需设置镜像即可，执行如下代码来设置镜像地址

npm config set registry http://registry.npm.taobao.org

再次执行安装命令即可。

查看是否安装完成：tsc --version 查看版本

配置webstrom自动编译

要在文件夹下面创建一个tsconfig.json的文件，只需在该文件夹下执行

 tsc --init

生成的文件内容为：

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": true,
        "allowJs": true
    }
    ,
    "exclude": [
        "node_modules"
    ]
}
target：编译之后生成的JavaScript文件需要遵循的标准。有三个候选项：es3、es5、es2015。
noImplicitAny：为false时，如果编译器无法根据变量的使用来判断类型时，将用any类型代替。为true时，将进行强类型检查，无法推断类型时，提示错误。
module：遵循的JavaScript模块规范。主要的候选项有：commonjs、AMD和es6。
removeComments：编译生成的JavaScript文件是否移除注释。
sourceMap：编译时是否生成对应的source map文件。这个文件主要用于前端调试。当前端js文件被压缩引用后，出错时可借助同名的source map文件查找源文件中错误位置。
outDir：编译输出JavaScript文件存放的文件夹。
include、exclude：编译时需要包含/剔除的文件夹。

配置好这些，就会发现，新建的typescript修改代码后会自动在该.ts文件下生成文件名对应的js