Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >TypeScript入门笔记(一):安装和自动编译

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

作者头像
王小婷
发布于 2025-05-19 07:06:28
发布于 2025-05-19 07:06:28
10800
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行

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
代码运行次数:0
运行
AI代码解释
复制
npm  install  -g  typescript
5640239-202a4715a7f834c8.png
5640239-202a4715a7f834c8.png

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

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

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

1:tsc --init

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

5640239-57e3d1b3391f40b0.png
5640239-57e3d1b3391f40b0.png

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

5640239-5dc703ca369c2161.png
5640239-5dc703ca369c2161.png

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

5640239-b6b9684e397bcda1.png
5640239-b6b9684e397bcda1.png

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

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

5640239-4a1040c2d4e4a5a5.png
5640239-4a1040c2d4e4a5a5.png

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

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

5640239-c1a59b8426954dc0.png
5640239-c1a59b8426954dc0.png
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
console.log('你好ts')
function  getData(){

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script src="js/index.js"></script>
</html>

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1

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

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
TypeScript学习笔记(一)—— TypeScript入门
TypeScript是一种由微软开发的自由和开源的编程语言,它是JavaScript的一个超集,扩展了JavaScript的语法,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格,C#的首席架构师,工作于TypeScript的开发。
张果
2022/10/04
1.3K0
TypeScript学习笔记(一)—— TypeScript入门
typescript基础篇(1):helloworld
TypeScript是一种由微软开发的自由和开源的编程语言。作为JavaScript的一个超集,添加了可选的静态类型和基于类的面向对象编程。
一粒小麦
2020/08/07
8240
typescript基础篇(1):helloworld
【TypeScript】002-安装 TypeScript 与 Hello TypeScript 入门程序
以上命令会在全局环境下安装 tsc 命令,安装完成之后,我们就可以在任何地方执行 tsc 命令了。
訾博ZiBo
2025/01/06
2190
【TypeScript】002-安装 TypeScript 与 Hello TypeScript 入门程序
利用VS Code监视任务自动编译TypeScript文件为JavaScript
点击菜单 -  终端 - 运行任务 - 选择 typescript 和 监视相应的配置文件:
德顺
2023/08/25
2410
利用VS Code监视任务自动编译TypeScript文件为JavaScript
TypeScript入门教程(一)
本文是TypeScript的入门文章,将分别从下面四点对TypeScript进行介绍:
前端林子
2018/10/14
5.7K0
TypeScript入门教程(一)
1、TypeScript初识及环境搭建
TypeScript最近很火,有很多开源的项目也是由其开发的,如果你是一名前端开发工程师或准备要成为一名前端开发工程师的话,现在如果再不学习TypeScript就真的太OUT了!那么现在请你系好安全带,和我一起踏上学习TypeScript之旅吧!
用户1272076
2019/03/26
4750
TypeScript学习笔记(三)—— 编译选项、声明文件
compilerOptions ⽀持很多选项,常⻅的有 baseUrl 、 target 、 moduleResolution 和 lib 等。 compilerOptions 每个选项的详细说明如下:
张果
2022/10/04
2.7K0
TypeScript学习笔记(三)—— 编译选项、声明文件
TypeScript必知三部曲(一)TypeScript编译方案以及IDE对TS的类型检查
TypeScript代码的编译过程一直以来会给很多小伙伴造成困扰,typescript官方提供tsc对ts代码进行编译,babel也表示能够编译ts代码,它们二者的区别是什么?我们应该选择哪种方案?为什么IDE打开ts项目的时候,就能有这些ts代码的类型定义?为什么明明IDE对代码标红报错,但代码有能够编译出来?
w4ngzhen
2023/10/18
1.1K0
TypeScript必知三部曲(一)TypeScript编译方案以及IDE对TS的类型检查
会写 TypeScript 但你真的会 TS 编译配置吗?
随着 TypeScript 的流行,越来越多的项目通过使用 TypeScript 来实现编写代码时候的类型提示和约束,从开发过程中减少 BUG 出现的概率,以此提升程序的健壮性和团队的研发效率。
小东同学
2022/07/29
4.2K1
会写 TypeScript 但你真的会 TS 编译配置吗?
TypeScript系列教程二《安装起步》
新建 index.ts 文件,直接运行tsc编译结果和tsc index.ts是一样的,都是按照默认配置编译。
星宇大前端
2021/07/16
4070
TypeScript系列教程二《安装起步》
TypeScript 开发环境搭建
下载 node.js 下载地址:https://nodejs.org/en/ 安装 node.js 无其他特殊操作,选择好安装路径直接安装即可 安装完成后,使用win+R快捷键打开 cmd 命令行窗口
Emperor_LawD
2021/05/13
1.2K0
TypeScript 开发环境搭建
TypeScript 入门
通过 node -v 命令查看本机是否安装,如果没有安装,参考node.js安装指南 根据电脑系统环境进行安装
王秀龙
2021/08/23
1.7K0
TypeScript 入门
【TypeScript 编程】001-002 第 1 章 导言 与 第 2 章 TypeScript 概述
https://blog.csdn.net/Aria_Miazzy/article/details/105430400
訾博ZiBo
2025/01/06
1340
【TypeScript 编程】001-002 第 1 章 导言 与 第 2 章 TypeScript 概述
使用 Rollup + TypeScript 编写库
其中,dist 目录一般是通过 Rollup 等打包器打包后的入口文件,一般具有多种格式,以不同后缀命令,如: index.cjs.js index.esm.js。lib 和 esm 目录可以是 TypeScript 编译后生成的文件,目录下的结构基本和原项目结构相同,只是后缀变为 js,lib 一般为 CommonJS 格式,esm 为 ESModule 格式。而这些是一个库最基本的需要发布的文件。
Innei
2021/12/28
2.6K0
Vue-Cli 3 使用 TypeScript 快速探索之旅
从书写方式上,类型定义、类、抽象类、接口、构造函数、构造器、装饰器、继承等等的一系列语法糖都在向着 C#、Java 等后端语言的面向对象的编程方式发展,也拥有了严格的静态类型检查。
林小帅
2019/09/25
1.8K0
Vue-Cli 3 使用 TypeScript 快速探索之旅
用TypeScript和got库编写爬虫程序指南
用TypeScript和got库写一个爬虫程序。首先,我得确认他们对TypeScript和Node.js的基础了解,可能他们已经有了一些JS的经验,但不确定。接下来,需要明确爬虫的目标,比如要爬取的网站、需要的数据类型以及处理方式。
华科云商小徐
2025/04/08
970
5-3 TypeScript 的打包配置
TypeScript 是 JavaScript 的超集,通过类型注解提供编译时的类型检查,能够有效提升代码的可维护性。
love丁酥酥
2020/05/04
6510
利用VS Code监视任务自动编译TypeScript文件为JavaScript
点击菜单 -  终端 - 运行任务 - 选择 typescript 和 监视相应的配置文件:
德顺
2021/07/16
1.5K0
Ts安装及自动编译ts文件
VsCode打开 终端 ->运行任务 -> typescript ->“tsc: 监视 - tsconfig.json (ts)”
明知山
2020/09/08
2.4K0
Typescript真香秘笈
本文由 IMWeb 首发于 IMWeb 社区网站 imweb.io。点击阅读原文查看 IMWeb 社区更多精彩文章。 1. 前言 2018年Stack Overflow Developer的调研(https://insights.stackoverflow.com/survey/2018/)显示,TypeScript已经成为比JavaScript更受开发者喜爱的编程语言了。 之前我其实对于typescript没有太多好感,主要是认为其学习成本比较高,写起代码来还要多写很多类型声明,并且会受到静态类型检查
用户1097444
2022/06/29
5.8K0
Typescript真香秘笈
相关推荐
TypeScript学习笔记(一)—— TypeScript入门
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验