TypeScript環境安裝與VScode編輯器的使用

說明大背景環境,我用的是window10系統。

1.安裝node.js 。

去官網下載安裝包。

雖然我去的是官網,但是不知為何下載了個不知名的東西,后來又找了個鏈接才下載正確了。

實際上就是一個.msi的文件。我用的版本:node-v18.19.0-x64。避免你掉坑我直接放個鏈接吧:

https://download.csdn.net/download/alayeshi/89408377

然后直接進行安裝,安裝完成后去CMD里敲個:node -v 如果能看到版本號說明安裝成功了,

再敲個:npm -v 依然能看到版本號說明徹底成功了。如下圖:

2.下載VS code編輯器,

之后在編輯器里安裝插件 prettier- code fomatter

3.安裝typescript

在VScode編輯器里,終端--新建終端

然后看到下方終端頁面,輸入:npm install typescript -g

安裝成功后,測試進行編譯。

要測試首先得會使用VSCODE編輯器。下面就講如何使用編輯器新建TS文件。

4.如何使用VS code編輯器

首先新建一個文件夾在硬盤里,作為一個項目,比如我在桌面新建一個文件夾,名叫:vscode;

在VScode編輯器里選擇 文件--打開文件夾 ,找到剛建的文件夾名

5.新建的TS腳本

命名為:helloworld

在打開的編輯器中選擇新建文件的圖標按鈕進行新建文件,可以看得出新建的文件是沒有名字的也沒有類型,這時候點擊右側的選擇語言,會彈出一個面板,面板里有很多語言可供選擇,選擇TS的語言即可。

代碼內容如下:

interface Poit{
x:number;
y:number;}function tsDemo(data:Poit){
console.log('123');return data.x+data.y;}tsDemo({x:1,y:2});

6.運行TS代碼:

在下面終端界面敲命令:node helloworld.ts

然后發現報錯了,因為TS不能直接在瀏覽器和node環境下運行。

想要正常運行該代碼,需要再次敲命令:tsc helloworld.ts

然后發現生成了一個JS的文件。

這下就可以敲命令:node helloworld.js? 進行運行了。畢竟是JS了肯定是可以運行了,果然是可以輸出log的,代碼中的log內容是123,沒問題.

7.簡便的運行方式,安裝ts-node

不用每次運行js后再運行ts,安裝ts-node,方法如下:npm i -g ts-node

安裝完成后。

修改log內容后再次運行,

這次的命令是ts的了,不再使用js,

命令:ts-node helloworld.ts

可以看出log發生了變化

至此TS的環境搭建完成。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/23961.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/23961.shtml
英文地址,請注明出處:http://en.pswp.cn/web/23961.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

最大矩形問題

柱狀圖中最大的矩形 題目 分析 矩形的面積等于寬乘以高,因此只要能確定每個矩形的寬和高,就能計算它的面積。如果直方圖中一個矩形從下標為 i 的柱子開始,到下標為 j 的柱子結束,那么這兩根柱子之間的矩形(含兩端的柱…

能把試卷上的字消除的軟件有哪些?推薦三款好用的

能把試卷上的字消除的軟件有哪些?在數字化時代,我們越來越依賴科技手段來解決生活中的各種問題。其中,試卷上的字消除問題,就是一個備受關注的痛點。幸運的是,現在市面上已經出現了多款能夠輕松消除試卷上字跡的軟件&a…

力扣hot100:295. 數據流的中位數(兩個優先隊列維護中位數)

LeetCode:295. 數據流的中位數 這個題目最快的解法應該是維護中位數,每插入一個數都能快速得到一個中位數。 根據數據范圍,我們應當實現一個 O ( n l o g n ) O(nlogn) O(nlogn)的算法。 1、超時—插入排序 使用數組存儲,維持數…

【WEB自動化面試02--學習過程的問題及解決】

day01 1、報錯獲取不到瀏覽器二進制文件:需要指定瀏覽器路徑及驅動路徑。 第一次使用谷歌瀏覽器驅動,找不到二進制文件報錯: selenium.common.exceptions.WebDriverException: Message: unknown error: cannot find Chrome binary Stacktra…

短視頻矩陣源碼----如何做正規開發規則分享:

一、什么是SaaS化服務技術開發? (短視頻矩陣系統是源頭開發的應該分為3個端口---- 總后臺控制端、總代理端口,總商戶后臺) SaaS是軟件即服務(Software as a Service)的縮寫。它是一種通過互聯網提供軟件應…

Vue2(0基礎入門)

環境準備 安裝腳手架 vuecli: npm install -g vue/clivite: npm init vuelatest-g 全局安裝,任意目錄都可以使用vue腳本 進入目錄創建項目: 在目錄的終端輸入:vue ui安裝devtool(這個網頁是安裝好了自動跳轉的) 運行項目: …

代碼隨想錄第27天|貪心算法part1

455.分發餅干 先給孩子和餅干排序&#xff0c;每次選取一個最大的餅干給一個最大胃口的孩子&#xff0c;直到餅干分完或者遍歷完孩子 class Solution { public:int findContentChildren(vector<int>& g, vector<int>& s) {sort(g.begin(), g.end());sort(…

Vue3【三】 使用TS自己編寫APP組件

Vue3【三】 使用TS自己編寫APP組件 運行截圖 目錄結構 注意目錄層級 文件源碼 APP.vue <template><div class"app"><h1>你好世界!</h1></div> </template><script lang"ts"> export default {name:App //組…

JavaScript的核心語法

JavaScript JavaScript&#xff1a;JavaScript的組成&#xff1a;核心語法&#xff1a;Hello&#xff1a;變量&#xff1a;JS的基本數據類型&#xff1a;特殊點&#xff1a; 數組&#xff1a;流程控制語句&#xff1a;函數&#xff1a;函數的重載&#xff1a;函數的遞歸:預定義…

在 VSCode 中搭建 Flutter 開發環境并運行項目

要在 Visual Studio Code (VSCode) 中運行 Flutter 項目并啟動虛擬機&#xff08;例如 Android Emulator&#xff09;&#xff0c;可以按照以下步驟進行設置和操作&#xff1a; 一、安裝 Flutter 和 Dart 插件 安裝 Flutter SDK&#xff1a; 前往 Flutter 官網 下載并安裝 Flu…

離散數學答疑 3

&#xff5e;A&#xff1a;A的補集 有時候空集是元素&#xff0c;有時候就是純粹的空集 A-B的定義&#xff1a; 笛卡爾積&#xff1a; 求等價關系&#xff1a;先求劃分再一一列舉 不同劃分&#xff1a;分幾塊。一塊&#xff1a;兩塊&#xff1a;三塊&#xff1a;分別計算 Ix是…

自然語言處理(NLP)—— 主題建模

1. 主題建模的概念 主題建模&#xff08;Topic Modeling&#xff09;是一種用于發現文檔集合&#xff08;語料庫&#xff09;中的主題&#xff08;或稱為主題、議題、概念&#xff09;的統計模型。在自然語言處理和文本挖掘領域&#xff0c;主題建模是理解和提取大量文本數據隱…

【常用工具系列】Git 教程——從入門到大師

目錄 前言一、Git 基礎1-1、Git 簡介與安裝安裝 Git 1-2、 Git 工作流程1-3、 Git 配置與管理用戶配置查看配置 1-4、 Git 倉庫操作克隆倉庫推送更改拉取更新 1-5 Git 分支管理創建分支切換分支刪除分支解決沖突 二、 Git 進階2-0、 Git 標簽使用創建標簽查看標簽檢出標簽推送標…

「動態規劃」如何求最小路徑和?

64. 最小路徑和https://leetcode.cn/problems/minimum-path-sum/description/ 給定一個包含非負整數的m x n網格grid&#xff0c;請找出一條從左上角到右下角的路徑&#xff0c;使得路徑上的數字總和為最小。說明&#xff1a;每次只能向下或者向右移動一步。 輸入&#xff1a;…

《嵌入式系統導論》

計算題 已知位帶別名基地址為0x220000000,計算位于位帶區的0x200FFFFF地址的數據位7,計算它對應的位帶別名區地址。 別名地址=位帶別名基地址+字節偏移量x32+位號x4 別名地址=0x22000000+(0x200FFFFF -0x20000000)*32+7*4=0x220000807 分析如下基本定時器配置語句。 { ………

ctfshow-web入門-命令執行(web37-web40)

目錄 1、web37 2、web38 3、web39 4、web40 命令執行&#xff0c;需要嚴格的過濾 1、web37 使用 php 偽協議&#xff1a; ?cphp://input post 寫入我們希望執行的 php 代碼&#xff1a; <?php system(tac f*);?> 拿到 flag&#xff1a;ctfshow{5c555d9a-6f55…

Mongodb數組元素更新之使用$定位數組第一個元素

學習mongodb&#xff0c;體會mongodb的每一個使用細節&#xff0c;歡迎閱讀威贊的文章。這是威贊發布的第63篇mongodb技術文章&#xff0c;歡迎瀏覽本專欄威贊發布的其他文章。 閱讀了不少Mongodb的文章&#xff0c;也和同事交流過。Mongodb數組更新是比較難理解的地方&#x…

EXCEL多sheet添加目錄跳轉

EXCEL多sheet添加目錄跳轉 背景 excel中有幾十個sheet&#xff0c;點下方左右切換sheet太耗時&#xff0c;希望可以有根據sheet名超鏈接跳轉相應sheet&#xff0c;處理完后再跳回原sheet。 方案一 新建目錄sheet&#xff0c;在A1寫sheet名&#xff0c;右鍵選擇最下方超鏈接…

問題:材料題請點擊右側查看材料問題 查看材料 #學習方法#經驗分享#學習方法

問題&#xff1a;材料題請點擊右側查看材料問題 查看材料 A.Colleges may reduce their enrollment. B.Top universities become increasingly competitive. C.Universities become selective in student admission. D.Colleges invest less in academy and infrastructure…

Go 文件壓縮解壓

在Go語言中&#xff0c;archive/zip包提供了創建、讀取和解壓縮ZIP格式文件的功能。 一、創建ZIP文件并添加內容----壓縮 package mainimport ("archive/zip""bytes""fmt""io""log""os" )func main() {// 創建一…