前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >TypeScript入门笔记(一):安装和自动编译

TypeScript入门笔记(一):安装和自动编译

作者头像
王小婷
发布2019-11-28 00:14:46
6940
发布2019-11-28 00:14:46
举报
文章被收录于专栏:编程微刊

TypeScript是一种由微软开发的自由和开源的编程语言。是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。随着vue3.0开源以来,学会typescript语言语言已经迫在眉睫,不然就会被这个时代所淘汰。

TypeScript学习手册: https://www.tslang.cn/docs/handbook/basic-types.html

开发typescript需要的准备工作就不说了 1:安装Node.js 2:nodejs的版本管理工具npm

今天来从零开始,记录一下TypeScript入门笔记

1:全局安装

打开cmd,右键管理员身份运行,输入以下命令

代码语言:javascript
复制
npm  install  -g  typescript

安装成功之后,开始写ts代码了,因为有些浏览器无法解析es6代码。 能解析es5代码。所以需要一边写代码,一边编译成浏览器能识别的js代码,就像写sass一样。那么

怎么在vscode里面配置自动解析?

打开vscode编辑器,导入刚刚在d盘新建一个项目

1:tsc --init

在编辑器Visual Studio Code打开一个终端

进入项目,执行命令tsc --init,这个时候可以看到生成了一个ts的配置文件

打开ts的配置文件 (生成tsconfig.json ),将改 "outDir": "./js", 表示index.js要输出到根目录的js里面,修改保存。

2:任务-运行任务 选择监视tsconfig.json

在编辑器里面找到任务-运行任务 选择监视tsconfig.json ,操作完成之后会发现这个时候,生成了一个js文件了。

ok,现在已经可以在编写代码的时候实现vscode自动编译ts了

现在来写一段TypeScript语法测试一下,在ts文件里面写一段定义变量的指定类型代码,var str:string="你好ts",打开js/index.js,可以看到,已经将这句代码解析为浏览器能够识别的javascript的代码了。

代码语言:javascript
复制
console.log('你好ts')
function  getData(){

}
var str:string="你好ts";

继续,在根目录里面新建一个index.html,引入js,需要查看ts写出来的语法代码之后,打开这个index,在浏览器里面查看即可,所写的代码测试都可以打印在浏览器了。

代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script src="js/index.js"></script>
</html>

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1:全局安装
  • 怎么在vscode里面配置自动解析?
    • 1:tsc --init
      • 2:任务-运行任务 选择监视tsconfig.json
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档