安装 TypeScript 并编译成JS

发布于:2022-11-11 ⋅ 阅读:(466) ⋅ 点赞:(0)

官网: https://github.com/microsoft/TypeScript
TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集,最终会被编译为JavaScript代码。
TypeScript是一种应用级JavaScript语言。TypeScript为JavaScript添加了可选类型,支持针对任何浏览器、任何主机、任何操作系统的大规模JavaScript应用的工具。TypeScript编译成可读的、基于标准的JavaScript
特点:

  • 始于JavaScript,归于JavaScript
  • 强大的类型系统
  • 先进的 JavaScript

安装

命令行运行如下命令,全局安装 TypeScript:

npm install -g typescript

![image.png](https://img-blog.csdnimg.cn/img_convert/d777a0eac8f393ee153463d500c3dafd.png#averageHue=#2d2b26&clientId=u08370dbe-900e-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=64&id=u52b8ffb3&margin=[object Object]&name=image.png&originHeight=64&originWidth=710&originalType=binary&ratio=1&rotation=0&showTitle=false&size=9592&status=done&style=none&taskId=u2e234117-d334-4700-956f-e272521a31a&title=&width=710)
下载每日构建版本(最新)

npm install -g typescript@next

ps: 可能会失败 最好还是不要加@next
检查安装是否成功

tsc -V 

安装成功
![image.png](https://img-blog.csdnimg.cn/img_convert/bd87d7c8bcb05832aacc9f5bec15600a.png#averageHue=#272624&clientId=u08370dbe-900e-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=41&id=u55ef0be6&margin=[object Object]&name=image.png&originHeight=41&originWidth=372&originalType=binary&ratio=1&rotation=0&showTitle=false&size=3384&status=done&style=none&taskId=u080e33a5-c5b5-4548-82cb-6c598f2086f&title=&width=372)

构建第一个文件

我们写一个JS程序

(() => {
  function sayHi(str) {
    return "hello" + str
  }

  let text = "world"
  console.log(sayHi(text))
})()

然后运行
![image.png](https://img-blog.csdnimg.cn/img_convert/76968e2f42fe1e10c05588d1141d5f4c.png#averageHue=#272624&clientId=u08370dbe-900e-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=43&id=u0781223d&margin=[object Object]&name=image.png&originHeight=43&originWidth=434&originalType=binary&ratio=1&rotation=0&showTitle=false&size=3385&status=done&style=none&taskId=u8a23ae97-3056-403f-a30a-a594b271999&title=&width=434)
发现可以运行
然后我们直接使用类型注解(ts的语法)

(() => {
    function sayHi(str: string) {
        return "hello" + str
    }

    let text = "world"
    console.log(sayHi(text))
})()

然后运行
![image.png](https://img-blog.csdnimg.cn/img_convert/69e54a8f0c5b3f431809acb6e3061789.png#averageHue=#242322&clientId=u08370dbe-900e-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=221&id=ub72bf153&margin=[object Object]&name=image.png&originHeight=221&originWidth=647&originalType=binary&ratio=1&rotation=0&showTitle=false&size=24725&status=done&style=none&taskId=uf196f4ff-a71e-4b05-8c9c-b5d06f3459a&title=&width=647)
会发现这样会报错

编译代码

所以我们需要把ts代码转换成JS 不然就运行不成功,当然 ts文件里都是js代码的话是可以运行的
所以我们可以使用命令把它编译成JS
tsc .\helloworld.ts
![image.png](https://img-blog.csdnimg.cn/img_convert/e32e7a0e0261c41a38e19a940951f3eb.png#averageHue=#2b2a27&clientId=u08370dbe-900e-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=27&id=uff88f9cb&margin=[object Object]&name=image.png&originHeight=27&originWidth=466&originalType=binary&ratio=1&rotation=0&showTitle=false&size=3090&status=done&style=none&taskId=u1eced948-a6fb-4bcb-ad95-9004e841196&title=&width=466)
这样再同级目录下就会生成一个js代码
以下是JS代码

(function () {
    function sayHi(str) {
        return "hello" + str;
    }
    var text = "world";
    console.log(sayHi(text));
})();

可以发现 类型注解自动的去掉了 并且 let 改成了var

vscode自动编译

我们可以在vscode中让他自动编译成js
直接使用命令

tsc --init

这样会生成一个tsconfig.json的文件
![image.png](https://img-blog.csdnimg.cn/img_convert/8ed70574a1c2f7f32dfdca3404d6cd67.png#averageHue=#222d36&clientId=u08370dbe-900e-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=114&id=u72b18ee7&margin=[object Object]&name=image.png&originHeight=114&originWidth=507&originalType=binary&ratio=1&rotation=0&showTitle=false&size=8786&status=done&style=none&taskId=ucecec8bd-70b1-4673-b5a9-ed7bd5eb61a&title=&width=507)

修改tsconfig.json配置

在文件中增加如下内容

{
  // 把ts文件最终编译后放到js的目录中 指定存放的路径
  "outDir": "./js",
  // 不使用严格模式
  "strict": false,
   ...
}

启动监视

我们还需要配置一下监视任务
![image.png](https://img-blog.csdnimg.cn/img_convert/af9a86793458a476525997ed85221f1a.png#averageHue=#2b2d30&clientId=u08370dbe-900e-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=365&id=ubb87d057&margin=[object Object]&name=image.png&originHeight=365&originWidth=641&originalType=binary&ratio=1&rotation=0&showTitle=false&size=47665&status=done&style=none&taskId=u7f1857e2-f5fb-4832-9bd1-03c801b4792&title=&width=641)
![image.png](https://img-blog.csdnimg.cn/img_convert/682013985bf88fd1eeb6d949e21ac5d7.png#averageHue=#222b32&clientId=u08370dbe-900e-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=192&id=u03a3bb89&margin=[object Object]&name=image.png&originHeight=192&originWidth=600&originalType=binary&ratio=1&rotation=0&showTitle=false&size=11587&status=done&style=none&taskId=uc4000513-b772-4858-940e-0375292abb7&title=&width=600)
![image.png](https://img-blog.csdnimg.cn/img_convert/af600a8ff029ff5ca1c68603ff9bbe14.png#averageHue=#1e425b&clientId=u08370dbe-900e-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=151&id=u225b549c&margin=[object Object]&name=image.png&originHeight=151&originWidth=599&originalType=binary&ratio=1&rotation=0&showTitle=false&size=19851&status=done&style=none&taskId=ufb050010-35a5-4697-9010-5d49422fdae&title=&width=599)
点击上图标红的地方 这样的话 只要一保存就会自动的把ts编译成JS
然后我们新建一个test文件
然后就会发现 自动的多出了一个test.js的文件了
![image.png](https://img-blog.csdnimg.cn/img_convert/0f00986756f8257698837ab6d4143c81.png#averageHue=#2c2f33&clientId=u08370dbe-900e-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=137&id=u92c52f0d&margin=[object Object]&name=image.png&originHeight=137&originWidth=157&originalType=binary&ratio=1&rotation=0&showTitle=false&size=5705&status=done&style=none&taskId=u00c8f392-6e3c-412c-8c7a-46904e4436d&title=&width=157)


网站公告

今日签到

点亮在社区的每一天
去签到