TypeScript筆記（一）

jiayayao發表於2024-07-07
TypeScript筆記

一、TypeScript = Type + JavaScript

在JS基礎上，為JS增加了型別支援。TS屬於靜態型別的程式語言，在編譯期間做型別檢查，可以在程式碼編寫期間發現問題，減少除錯時間。

TS相比JS的優勢：

1、更早的發現錯誤，減少除錯時間；

2、程式碼提示；

3、提升可維護性；

4、ECMAScript；

5、TS有型別推斷機制；

TS已成為大中型前端專案的首要程式語言。

二、安裝編譯TS的工具包

Node.js/瀏覽器只支援JS程式碼，不支援TS程式碼，因此需要先將TS程式碼轉化為JS程式碼，然後才能執行。

npm i -g typescript

typescript 包提供tsc命令，實現TS到JS的轉化。

三、執行TS檔案

單步執行：

tsc hello.ts // compile ts file
node hello.ts // execute ts file

一步執行，需安裝ts-node：

npm i -g ts-node
ts-node hello.ts

四、常用型別

4.1 基礎

1、JS已有型別：

原始型別：number/string/boolean/null/undefined/symbol;

物件型別：object（包括陣列、物件、函式等）；

2、TS新增型別：

聯合型別、自定義型別（型別別名）、介面、元祖、字面量型別、列舉、void、any等

4.2 陣列型別

let nums:number[] = [1,3,5];
let strs:Array[] = ['a','b','c'];

陣列中既有number，又有string，用聯合型別，用 | ：

let arr:(number|string)[] = [1,'a']

4.3 型別別名

為任意型別重新命名，簡化型別書寫多次的問題

type CustomArr = (number | string)[]
let test: CustomArr = [123,"aaa"]
console.log(test)

4.4 函式型別

          函式名    引數列表，冒號         返回值，冒號
function addNum(num1:number, num2:number):number {
    return num1 + num2;
}

另外，也可以使用函式表示式的方式宣告函式：

     函式名      引數列表，冒號       返回值，冒號  箭頭標識{ 函式體 }
const add = (num1:number, num2:number):number => {
    return num1+num2  
}

無返回值：

function greet(name:string):void {
    console.log('hello'+name)
}

可選引數：

function mySlice(start?:number, end?:number):void {
    console.log('start index ', start, 'end index ', end);
}
mySlice()

相關文章