TypeScript教程(一)在vscode中的配置TypeScript环境

TypeScript教程(一)在vscode中的配置TypeScript环境

文章目录

一、前言

未来的开发者们请上座,随着时代的发展web网页的发展越来越丰富,掌握TypeScript显得更加有必要。

二、具体步骤

1、Node.js安装

安装Node.js:首先,确保您已经安装了Node.js。您可以从Node.js官方网站(https://nodejs.org)下载并安装适合您操作系统的版本。

2、TypeScript安装

npm 切换淘宝镜像源

复制代码
npm config set registry https://registry.npm.taobao.org/

查询镜像使用状态

复制代码
npm config get registry

npm 安装TypeScript

复制代码
npm i -g typescript

查询typescript的版本

复制代码
tsc -V

截止这里typescript就安装进行你的环境了,下面安装vscode中的typescript的扩展

安装TypeScript扩展 :打开VS Code,点击左侧的扩展图标(四个方块),搜索并安装"TypeScript"扩展。

3、helloworld

创建TypeScript项目 :在VS Code中,打开一个文件夹作为您的TypeScript项目的根目录。然后打开终端

打开终端快捷按键
ctrl+`

初始化TypeScript配置:在终端窗口中,运行以下命令来初始化TypeScript配置文件(tsconfig.json):

复制代码
npx tsc --init

这将在您的项目根目录下创建一个名为tsconfig.json的文件,用于配置TypeScript编译器的选项。

编写TypeScript代码:创建一个新的.ts文件,并在其中编写TypeScript代码。

typescript 复制代码
function say(world:string){
    console.log(world);
}
say('hello world!');

编译和运行TypeScript代码:在终端窗口中输入

typescript 复制代码
ts-node <filename>.ts

这将使用TypeScript编译器将.ts文件编译为JavaScript文件(.js),然后使用Node.js运行生成的JavaScript文件。

这样,您就可以在VS Code中配置和运行TypeScript代码了。您可以在tsconfig.json文件中配置更多的TypeScript选项,例如目标版本、输出目录等。有关更多详细信息,请参阅TypeScript官方文档(https://www.typescriptlang.org/docs)。

相关推荐
ssshooter4 小时前
看完就懂 useSyncExternalStore
前端·javascript·react.js
Live000006 小时前
在鸿蒙中使用 Repeat 渲染嵌套列表,修改内层列表的一个元素,页面不会更新
前端·javascript·react native
柳杉6 小时前
使用Ai从零开发智慧水利态势感知大屏(开源)
前端·javascript·数据可视化
球球pick小樱花6 小时前
游戏官网前端工具库:海内外案例解析
前端·javascript·css
喝水的长颈鹿6 小时前
【大白话前端 02】网页从解析到绘制的全流程
前端·javascript
用户14536981458786 小时前
VersionCheck.js - 让前端版本更新变得简单优雅
前端·javascript
codingWhat7 小时前
整理「祖传」代码,就是在开发脚手架?
前端·javascript·node.js
码路飞7 小时前
写了个 AI 聊天页面,被 5 种流式格式折腾了一整天 😭
javascript·python
Lee川7 小时前
优雅进化的JavaScript:从ES6+新特性看现代前端开发范式
javascript·面试
Wect7 小时前
LeetCode 210. 课程表 II 题解:Kahn算法+DFS 双解法精讲
前端·算法·typescript