首頁 web前端 js教程 我如何開始打字稿。

我如何開始打字稿。

Dec 23, 2024 am 12:57 AM

嘿,

如果您正在閱讀這篇文章,我想特別感謝您找到我的第一篇技術寫作部落格文章。

中國有句俗話:「千里之行始於足下」。

首先,我的名字是 Abel Emmanuel,我是軟體開發人員、開源貢獻者和倡議者。我謹祝我謙卑的自己生日快樂。

今天,2024 年 12 月 20 日,我開始學習 Typescript 和技術寫作。我有時會了解 Typescript,但我從未見過它的重要、有用、豐富的功能以及它如何幫助我編寫更好的程式碼。

理想情況下,我在知道 Typescript 的時候就拒絕學習它。我的結論是,學習 Typescript 沒有任何用處,因為它具有與 JavaScript 相同的語法和所有內容,直到我找到了需要 Typescript 的工作。

這就是我開始正確學習 Typescript 的方式,如果沒有的話我就已經把注意力集中在 Typescript 上了。

今天,我想分享 Typescript 的基礎知識、它的重要性以及它如何幫助您減少程式碼中編寫的錯誤。

JavaScript從誕生之日起就不是像C、C、C#、Rust等低階程式語言那樣的類型語言。

在類型化語言中,變數和值都有型別。

這就是類型化語言的意義,以 C 程式語言為例。

例如在 JavaScript 中定義變數:

let x = 5
typeof x    //number
登入後複製
登入後複製

在 JavaScript 中,x 可以重新指派給字串值。

x = "Emmanuel"
typeof x    //string
登入後複製
登入後複製

與 C 程式語言等低階語言相比,您必須讓變數知道值資料類型。例如:

init x =  5
float y = 0.5
登入後複製
登入後複製

如果您嘗試重新分配變數 x 和 y,則會拋出錯誤。然而,JavaScript 是一種鬆散類型的語言,可能會導致程式碼中出現大量錯誤。

為了避免這種情況,您需要一個名為 Typescript 的 JavaScript 超集。 Typescript 是一個靜態類型檢查器,可在執行程式之前協助檢查程式中的錯誤。

開始吧
將 Typescript 全域或本機安裝到您的專案中。
npm install -g typescript

建立一個資料夾並將其命名為 typescript。

How I start typescript.

右鍵點選資料夾(typescript),使用 Visual Studio Code 開啟並建立檔案 test.ts。

How I start typescript.

完成此操作後,下一步就是開始寫打字稿。

在 test.ts 檔案中複製程式碼並將其貼上到檔案中並運行它。

console.log("Hello world");
登入後複製
登入後複製

運行打字稿檔案。開啟命令列介面 (CLI) 和 tsc test.ts。該指令將運行打字稿檔案。

注意:如果您不安裝 typescript,您將無法在 CLI 中存取 tsc。

運行後,您會注意到 CLI 中沒有發生任何引人注目的事情,但是,您會在資料夾中註意到一個新檔案 test.js。

How I start typescript.

開啟 test.js 文件,您會注意到執行的命令會將 test.ts 中的所有內容輸出到 test.js。

How I start typescript.

讓我們在程式碼中包含類型。讓我們看看它在 Javascript 中是什麼樣子。

let x = 5
typeof x    //number
登入後複製
登入後複製

運行 tsc test.ts。沒什麼特別的事情發生。
然而,假設函數呼叫 meet() 得到一個像 meet(7).

這樣的參數

Typescript 將指示錯誤。

x = "Emmanuel"
typeof x    //string
登入後複製
登入後複製

通常,在 JavaScript 世界中,程式碼很酷,但這不是我們想要的。所以即使它在運行時不會拋出錯誤。 Typescript 幫助我們提前發現問題。這是打字稿最酷的部分。它可以幫助您編寫更少錯誤的程式碼。

讓我們檢查一下這段程式碼。

init x =  5
float y = 0.5
登入後複製
登入後複製

注意函數 meet(name: string, id: number),附加的 :string 和 :number。這告訴我們我們需要一個參數字串和一個數字。如果您這樣做,否則您的程式碼將觸發錯誤。

函數回傳型別
我們可以允許我們的函數傳回特定類型。

console.log("Hello world");
登入後複製
登入後複製

物件類型

function meet(name, id){
    console.log(`Hello ${name}, your unique ID is ${id}.`)
}

meet("Abel Emmanuel", 7)
// Hello Abel Emmanuel, your unique ID is 7.
登入後複製

其他原始型別註解。

Expected 2 arguments, but got 1.ts(2554)
test.ts(1, 21): An argument for 'id' was not provided.
登入後複製

總之,Typescript 是一種類型語言,可以幫助您編寫更好的 JavaScript 並減少錯誤。更多內容請造訪 Typescript 官方網站:Typescript。

如果您覺得這篇文章有幫助,請告訴我,如果有更好的改進方法,我將很高興向您學習。感謝您閱讀我的第一篇文章。

在 Twitter 上追蹤我,我會分享精彩內容。

以上是我如何開始打字稿。的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1655
14
CakePHP 教程
1414
52
Laravel 教程
1307
25
PHP教程
1253
29
C# 教程
1227
24
前端熱敏紙小票打印遇到亂碼問題怎麼辦? 前端熱敏紙小票打印遇到亂碼問題怎麼辦? Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中,小票打印是一個常見的需求。然而,很多開發者在實...

神秘的JavaScript:它的作用以及為什麼重要 神秘的JavaScript:它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

誰得到更多的Python或JavaScript? 誰得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

Python和JavaScript開發者的薪資沒有絕對的高低,具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大,薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

如何實現視差滾動和元素動畫效果,像資生堂官網那樣?
或者:
怎樣才能像資生堂官網一樣,實現頁面滾動伴隨的動畫效果? 如何實現視差滾動和元素動畫效果,像資生堂官網那樣? 或者: 怎樣才能像資生堂官網一樣,實現頁面滾動伴隨的動畫效果? Apr 04, 2025 pm 05:36 PM

實現視差滾動和元素動畫效果的探討本文將探討如何實現類似資生堂官網(https://www.shiseido.co.jp/sb/wonderland/)中�...

JavaScript的演變:當前的趨勢和未來前景 JavaScript的演變:當前的趨勢和未來前景 Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

如何使用JavaScript將具有相同ID的數組元素合併到一個對像中? 如何使用JavaScript將具有相同ID的數組元素合併到一個對像中? Apr 04, 2025 pm 05:09 PM

如何在JavaScript中將具有相同ID的數組元素合併到一個對像中?在處理數據時,我們常常會遇到需要將具有相同ID�...

JavaScript引擎:比較實施 JavaScript引擎:比較實施 Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

前端開發中如何實現類似 VSCode 的面板拖拽調整功能? 前端開發中如何實現類似 VSCode 的面板拖拽調整功能? Apr 04, 2025 pm 02:06 PM

探索前端中類似VSCode的面板拖拽調整功能的實現在前端開發中,如何實現類似於VSCode...

See all articles