【TS】安装与环境搭建

作者: 德育处主任 | 来源:发表于2020-01-10 15:46 被阅读0次
    微信公众号:Rabbi_svip


    TypeScript是JavaScript类型的超集,它可以编译成纯JavaScript。
    TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行,并且是开源的。
    http://www.typescriptlang.org/

    这是来自官方的介绍。

    TypeScript (以后简称TS) 是微软的一个产品。

    个人使用感觉:TS让JS的书写更为规范了。在学习上会存在一点门槛,但在日常开发和维护中,TS能让我们更舒服。

    现在很多热门前端项目也转用TS了,比如Vue、Angular等。

    想要了解更多TS的介绍,可以去TS官网查阅。

    众所周知,浏览器能运行HTML、CSS和JS,但现在很多浏览器如果需要运行TS,还是需要进行编译的。

    官网上给出一个安装命令。使用 npm 进行安装。


    1、

    使用 npm ,需要先在电脑上安装 node 环境【Node.js】环境安装及简单运行


    2、

    使用 npm 进行安装

    ## Windows版
    npm install -g typescript
    
    
    ## Mac版(因为用了 -g 命令进行全局安装,所有要这前面写上 sudo)
    sudo npm install -g typescript
    
    ## 然后输入电脑密码进行安装(Windows版没有这步)
    
    
    ## 如果嫌安装速度慢,可以使用淘宝提供的npm镜像。
    ## 在上面的命令后面加一个 空格。
    ## 然后在空格后面加上下面这句命令,然后按回车即可。
    
    --registry=https://registry.npm.taobao.org
    


    3、

    编译

    微信公众号:Rabbi_svip

    这个例子中,创建了2个 ts 文件。一个叫“app.ts”,一个叫“test.ts”。

    使用以下命令,逐个编译文件。

    ## 首先进入到上面文件的目录(cd xxxxxx)
    
    tsc app.ts
    
    tsc test.ts
    

    使用上面的命令,可以逐个编译ts文件。但一个项目通常是不止一个ts文件的。如果每次都需要逐个编译,开发成本也太大了。

    所以还有以下方法。

    ## 首先进入到上面文件的目录(cd xxxxxx)
    
    ## 使用下面这句命令,会生成一个 tsconfig.json 文件。
    ## tsconfig.json文件会记录所有ts的相关配置和所有 ts 文件。
    tsc --init
    
    ## 在生成了 tsconfig.json 后,使用下面的命令就可以把项目中所有 ts 文件转换成 js 文件。
    tsc
    


    如果不希望每次都通过敲命令的方式去编译的话,可以使用编辑器的插件。现在很多编辑器都会提供各种各样的插件,我习惯使用 VSCode 这款编辑器。所以我以 VSCode 为例。

    打开 VSCode 的插件库,搜索 TypeScript Auto Compiler 安装即可。

    image

    然后每次保存 ts 文件,都会在同级目录中生成一个对应的 js 文件。

    现在vue、react等前端框架都提供了脚手架,通常使用脚手架开发的话是不需要这么麻烦的了,在打包时脚手架就会把 ts 转换成 js。

    相关文章

      网友评论

        本文标题:【TS】安装与环境搭建

        本文链接:https://www.haomeiwen.com/subject/jjxmactx.html