安裝編譯ts的工具

安裝命令：npm i -g typescript 或者 yarn global add typescript。

驗證是否安裝成功：tsc –v（檢視 TypeScript 的版本）。

編譯並執行 TS 程式碼

1. 建立 hello.ts 檔案（注意：TS 檔案的字尾名為 .ts）。

2. 將 TS 編譯為 JS：在終端中輸入命令，tsc hello.ts（此時，在同級目錄中會出現一個同名的 JS 檔案）。

3. 執行 JS 程式碼：在終端中輸入命令，node hello.js。

4. 說明：所有合法的 JS 程式碼都是 TS 程式碼，有 JS 基礎只需要學習 TS 的型別即可。

5. 注意：由 TS 編譯生成的 JS 檔案，程式碼中就沒有型別資訊了。

建立 .TS檔案hello 通過 tsc hello.ts 命令會生成同名js檔案 通過node hello.js執行js檔案1.

TS基礎 TypeScript TS基礎 TypeScript

型別註解

給變數新增明確的型別約束叫做型別註解

let name:string='張三'
let age:number=18

:number 和 :string 就是型別註解

​
TS常用基礎型別細分為兩類 分別是JS已有型別和TS新增型別

js已有型別  number ,string boolean null undefined  symbol 和 bigint

Javascript自es6後一共有 7 種原始型別 和 1 種 引用型別，如下：

​​
原始型別 number、 string 、boolean 、 undefined 、 null 、 symbol 、 bigint
引用型別 object

​
TS新增型別有

a,聯合型別 ,自定義型別(類型別名type..), 介面 元組 字面量型別 列舉 void ang等

b,注意：TS 中的原始型別和 JS 中寫法一致；TS 中的物件型別在 JS 型別基礎上更加細化，每個具體的物件（比如陣列、物件、函式）都有自己的型別語法。

陣列型別   []

arr是陣列型別,數組裡面裝的是number型別

const arr=[1,2,3]

// 定義 

const arr:number[]=[1,2,3]
arr.push(8)
 

聯合型別  |

一個 型別裡面有多種型別

const temp :number| string =8

記得優先順序問題要加()

const arr:number| string[]=[1,'1'] // 不行報錯 優先順序問題
// arr是 number型別或者string組成的陣列型別
解決如下
const arr:(number| string)[]=[1,'1']

 如果列印 結果   ts檔案報錯可以加 export{}來解決

泛型定義方式

const arr:Array<number>=[1,2,3]

const aee:Array<number|string>=[1,'1']

聯合型別的應用場景

類型別名

let arr1: (number | string)[] = [1, 'a', 3, 'b']
let arr2: (number | string)[] = ['x', 'y', 6, 7]

改為
type CustomArray = (number | string)[]

let arr1: CustomArray = [1, 'a', 3, 'b']
let arr2: CustomArray = ['x', 'y', 6, 7]

解釋說明。

a，使用 type 關鍵字來建立自定義型別。

b，類型別名（比如，此處的 CustomArray）可以是任意合法的變數名稱。

c，推薦使用大寫字母開頭。

d，建立類型別名後，直接使用該類型別名作為變數的型別註解即可。

函式型別

單獨指定引數,返回值的型別

同時指定型別,返回值的型別

// 解釋：可以通過類似箭頭函式形式的語法來為函式新增型別，注意這種形式只適用於函式表示式。
type AddFn = (num1: number, num2: number) => number

const add: AddFn = (num1, num2) => {
    return num1 + num2
}

void型別

如果函式沒有指定返回型別 預設為void

function greet(name: string): void {
    console.log('Hello', name)
    // return undefined // 預設有這麼一句
}

如果 明確標記了函式的返回型別為undefined  那麼就必須手動 return一個undefined

const add = (): undefined => {
    return undefined
}

可選引數 ?

function mySplice(test:number , start?: number,end?:number){
 mySplice(1)
mySplice()
mySplice(1,2)
 可選引數不能出現在必選引數前面  必須在必選函式後面  一般配合型別註解使用
 }

引數預設值 =

物件型別 :object

const obj:object = {}

左邊的{}表示 型別 (嚴格來說應該是物件字面量型別) ,右邊的{}表示值

等號右邊的值直接是一個物件時 左右兩邊數量保持一致

const person:{name:string;age:number} ={
name:"zhansan",
age:18
}

如果提取了變數  值的實現是可以比型別多 (滿足型別定義的條件下 型別定義準確)

interface

interface +介面名用來描述物件型別

與extends使用具有繼承性

相同點

type 和interface的區別

都可以用來描述物件 或者函式  都允許進行拓展 ,語法不同

不同點

1.   interface的介面拓展通過extends   type的介面拓展通過&

2.  type 加=  interface不加=

3.type可以描述任意型別  interface只能用來描述物件或函式

4.相同的interface宣告能夠合併  相同的type宣告會報錯  (命名名字)

總結  :一般使用 interface來表述物件結構 用type 來描述型別關係

元組型別

元組型別可以確切地標記出有多少個元素，以及每個元素的型別
// 可以給元組中的元素起別名

型別推論

字面量型別

let str1 = 'Hello TS'   //string型別
const str2 = 'Hello TS'   // 字串字面量型別

使用方式和場景

使用方式：字面量型別常配合聯合型別一起使用。

使用場景：用來表示一組明確的可選值列表，比如在貪吃蛇遊戲中，遊戲方向的值只能是上、下、左、右中的一個

type Direction = 'up' | 'down' | 'left' | 'right'
function changeDirection(direction: Direction) {
    console.log(direction)
}
changeDirection('up') // 呼叫函式時，會有型別提示

列舉型別

基本使用

列舉的功能類似於字面量型別+聯合型別組合font的功能，也可以表示一組明確的可選值。的功能，也可以表示一組明確的可選值。

列舉：定義一組命名常量，它描述一個值，該值可以是這些命名常量中的一個。既可以當做值也可以當做型別

使用 enum 關鍵字定義列舉，約定列舉名稱以大寫字母開頭。

列舉中的多個值之間通過 ,（逗號）分隔，定義好列舉後，直接使用列舉名稱作為型別註解。

// 建立列舉
enum Direction {
    Up,
    Down,
    Left,
    Right,
}

// 可以當做型別使用列舉
function changeDirection(direction: Direction) {
    console.log(direction)
}

// 也可以當做值使用列舉
// 呼叫函式時，需要傳入：列舉 Direction 成員的任意一個，類似於 JS 中的物件，直接通過點（.）語法 訪問列舉的成員
changeDirection(Direction.Up)

實現原理
列舉型別比較特殊，不僅僅可以用作型別，還可以當做值使用，因為列舉成員都是有值的。

也就是說，其他的型別會在編譯為 JS 程式碼時自動移除，但是，列舉型別會被編譯為 JS 程式碼。

說明：列舉與前面講到的字面量型別 + 聯合型別組合的功能類似，都用來表示一組明確的可選值列表。

推薦：字面量型別 + 聯合型別組合的方式，因為相比列舉，這種方式更加直觀、簡潔、高效。

字串列舉

字串列舉

定義：列舉成員的值是字串稱為字串列舉。

注意：字串列舉沒有自增長行為，因此，字串列舉的每個成員必須有初始值。

enum Gender {
    女,
    男,
}
type User = {
    name: string
    age: number
    // gender: '男' | '女' // 但後臺需要 0 和 1
    gender: Gender
}

const user: User = {
    name: 'ifer',
    age: 18,
    gender: Gender.男,
}

陣列型別

let arr:Array<number>=[1,2,3]

型別斷言  as 或者 <>泛型

可以將一個寬泛的型別斷言為更為簡潔的型別
當你明確知道 你所寫的型別是什麼時  就可以使用 型別斷言 為了使用 具體的方法

typeof

keyof

思維導圖

https://www.processon.com/view/link/62d5351be401fd2596077274

any和unknow的區別

unknow 是更加安全的any型別

任何型別可以給any , any也可以給任何型別

任何型別也可以給unknow但是unknow只能給unknow和any

函式過載

過載簽名 :包含了函式的引數型別和返回值型別,但不包含函式體

函式簽名(定義了函式的型別 不包括實現) + 簽名實現

### 函式簽名

函式型別的第一種情況
function greet(name:string) :string

函式型別的第二種情況

function greet(name:string[]):string[]

簽名實現

函式引數和函式的返回值要覆蓋前面的函式前面的所有情況

function gerrt(name:unknown) :unknow{
if(Array.isArray(name)){
 return name.map((item)=>`Hello${item}`) 
 } 
 return `Hello${name}`
}
greet('xxx')  // 後跟字串方法
greet(['1','2']) //陣列方法

函式型別的多種定義方式

函式型別

 function say(person: string, content: string): boolean { 
     if (person === '' || content === '') return false;
	 console.log(`${person}say:${content}`);
     return true;
 }

const somebody={
    say(person:string,context:string):boolean{
if(person||context) return false
return true
    }
}

//泛型函式定義方式

function say1<T>(person:string,context:string):boolean{
    if(person||context) return false 
    return true
}

先聲明後加入泛型

type say3Type=(person:string,context:string)=>boolean
const say3:say3Type=function(person,context){ 
    if(person||context) return false
    return true

介面定義函式型別 ,介面首字母大寫

interface Say{
(person:string,context:string):boolean 
}
const say4:Say=function(person,context){
    if(person||context) return false
    return true
}

泛型介面定義 放在大括號外面 要將實際用的型別穿進 <> //interface

type sayhi='aaa'|'bbb'
interface Say1<T>{  
    (operate:T, person: string, content: string): boolean;
}
const say5:Say1<sayhi>=function(person,context,operate){
    if(person||context) return false
    return true
}

泛型介面定義 大括號內不需要在介面使用的時候就將實際用的型別穿進去，而是在實際函式呼叫傳入

type sayhi1='aaa'|'bbb'
interface Say2{
<sayhi1>(operate:sayhi1,person:string,context:string):boolean
}
const say6:Say2=function(operate,person,context){
    if(person||context) return false
    return true
}

箭頭函式型別定義

const say7 =()=>{}
const say8=(person:string,context:string):boolean=>{
    if(person||context) return false
    return true
}

箭頭函式泛型定義方法

const say9=<T>(operate:T, person: string, context: string):boolean=>{
    if(person||context) return false
    return true
}