最近TypeScript大火，Node.js里不少有名的開源專案都開始支持，隱約有一統江湖的氣勢，如果說哪天Node.js能直接運行TypeScript我也不會太過驚訝。
所以，我前段時間開始嘗試使用這種“新寫法”，不久后便決定，今后無論大小專案都會用TypeScript來寫。接下來我會說說我的理由，和TypeScript今后的前景，最后附上五分鐘上手教程。
1.TypeScript的好處
TypeScript解決了JavaScript的一大痛點，那就是動態型別。
JavaScript的動態型別簡單、靈活，寫起來很爽，但是不適用于大型專案，代碼一多會難以維護，尤其是看別人的代碼。而TypeScript則采用了靜態型別，寫法上雖然麻煩點，但是換來了更穩固的結構和清晰的邏輯。
并且在宇宙第一IDE VSCode的支持下，型別檢查和提示都非常強大，大大減少了開發階段出錯的概率，配合上貼心的智能提示，從此代碼一遍過不再是夢想。
這讓我想起了一個段子，一名程式員寫完代碼后一運行，竟然一次過了，沒有任何BUG，激動下他打給女朋友，女朋友聽了后淡淡地回了個“哦”。這個段子說明了寫出一次通過的代碼特別難，但更重要的是告訴我們不要找女朋友。
而對于小專案來說，型別檢查可能不那么重要，但是智能提示卻能讓你在寫代碼的程序中更加舒暢，這也是我在小專案中還要堅持使用TypeScript的原因。
2.TypeScript的前景
學一門新語言最重要的是什么？不是它有多快，多簡潔。而是在于它的前景有多好。只有用的人多了才會有更多的作業崗位，和更優秀的開源專案。
TypeScript是由微軟開發和維護，發布后被Google采用，用在了自家的Angular2上，兩大巨頭都和這門語言發生了聯系，前景上無需太過擔心。
并且非常流行的前端框架Vue3也在使用TypeScript重構，這也讓不少人擔心會對現有的寫法不兼容，但是請坐和放寬，尤大已表示現有的寫法同樣適用于Vue3。
3.如何開始使用
TypeScript是JavaScript的超集，寫法上發生一些變化而已，所以只需要花上五分鐘看下面的教程就能寫出TypeScript代碼。這里的教程只是為了讓你盡快寫出TypeScript代碼而已，后續更深入的用法和理解還需要看我今后的文章，或者通過搜索引擎查漏補缺。
3.1安裝環境
npm install -g typescript
//編譯命令
tsc hello.ts
3.2 型別寫法
TypeScript在創建一個變數時必須宣告它的型別，有多人會擔心這會限制自己的騷操作，不用擔心，你想騷也可以全都用any。
//布林值
let isDone: boolean = false
//數字
let n: number = 6
//字串
let pepoName: string = '小王'
let introduction: string = `${pepoName}今年已經${n}歲了！！！`
//任意型別
let anySomething: any = '什么都行'
//聯合型別，兩種型別都可以
let numandstring: number | string;
//陣列
let list: number[] = [1,2,3]
let listString: string[] = ['1','2','3']
let numandString: (number | string)[] = ['1',2,3]
TypeScript還有型別推論，如果在創建一個變數的時候沒有指定型別，那么會根據賦值型別來決定，如果只是創建了一個變數但是沒有賦值，會默認為any。
3.3介面
介面是TypeScript的特性，可以創建一個類，然后通過呼叫這個類來生成實體：
interface Person {
//只讀屬性，只能在創建實體的時候賦值，之后不可以更改
readonly id: number;
name: string;
age: number;
//后面加問號的話允許創建實體時少這個屬性
address?: string;
//如果希望在實體里自由添加屬性，可以使用任意屬性
//但是要注意的是，一旦創建了任意屬性，那么介面里面的確定屬性和必要屬性必須為任意屬性型別的子集
//比如任意屬性的型別為string的話，age會報錯，因為它為number
[propName: string]: any;
}
//多一個屬性或者少一個都會報錯
let tom: Person = {
id: 1,
name: 'Tom',
age: 18,
}
3.4 函式
//空白值函式
function awsome(): void{
console.log('do something')
}
//引數后面有？則是可以跳過
function buildName(firstName: string, lastName?: string, age: number = 18){
if(!lastName){
console.log(firstName)
return
}
console.log(firstName + lastName)
}
3.5 宣告檔案
在使用第三方庫時，必須引入它的宣告檔案才能獲得代碼補全和提示，可以使用@types來管理宣告檔案，比如要使用Puppeteer，要引入它的宣告檔案需要：
npn install @types/Puppeteer
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/284536.html
標籤：其他
上一篇：前端小白 學習的程序中 遇到一個問題 為什么里面嵌套的表格中的usr的元素 都只是usrs中的第一個 求大佬解釋