> 本文不講如何安裝，只講代碼中的實際應用

# 一、什么是 TypeScript？

typescript是js的超集，它在js的基礎上增加了靜態類型校驗，可以在運行前校驗js中的一些錯誤并修正。

在定義類型之后，js中任何地方都會有文檔提示，對象中包含的值都可以提示出來，這一點讓js變得相當友好。

那么想要在已有項目中增加ts需要怎么做？

ts支持漸進式遷移，可配置只檢查部分文件,在已有項目中慢慢改造。ts的類型檢查不會影響js代碼的執行、這意味著，即便類型校驗有錯誤，代碼依舊運行良好。

ts的困難在于它需要定義所有的值類型，這個工作量還是蠻大的。

# 二、ts的簡單使用

**ts的類型定義語法如下**

- 基礎類型：

```javascript

let isDone: Boolean = false;

let str: String = '';

let count: Number = 1;

// 使用聯合操作符

let some1: Number | String = 1;

let some2: Number | String = '1';

```

- 數組

```javascript

let arr1: number[] = [1,2];

let arr2: Array = ['1','2']; // 泛型寫法，下面會講

let arr3: [string,boolean] = ['1',false]; // 元組-定義已知數量和類型

```

- 對象(當存在復雜對象時，使用接口和類來聲明，后面會講)

```javascript

let obj: {a: string, b: number } = {a: '我是字符串',b: 2};

```

- any

```javascript

let something: any = 'asd';

```

any用來表示任何類型，ts不會對它進行校驗。

>? 如果你的ts代碼中到處都是any，建議不要使用ts更方便些。

- viod、null、undefined、never

這些值基本沒什么用，有興趣可以自己查看[文檔](https://www.tslang.cn/docs/handbook/basic-types.html)

- 枚舉 **enum**

**enum**類型是對JavaScript標準數據類型的一個補充。 使用枚舉類型可以為一組數值賦予友好的名字。

```javascript

enum Color {Red, Green, Blue} // 默認情況下，從0開始為元素編號。

let c: Color = Color.Green; // => 1

//你也可以手動的指定成員的數值。 例如，我們將上面的例子改成從 1開始編號：

enum Color {Red = 1, Green, Blue}

let c: Color = Color.Green; // => 2

```

它不但可以使用key獲取value，還可以使用value獲取key。

```javascript

enum Color {Red=1, Green, Blue}

let colorName: string = Color[2]; // => 'Green'

```

# 三、ts進階使用

## 類型斷言

當你確定某個值的類型時，你可以指定它的類型。它有兩種寫法:

尖括號寫法

```javascript

let someValue: any = "this is a string"; // any未知類型

let str: string = someValue; // error someValue不是string類型

// 斷言為string，校驗成功

let str: string = someValue;

```

as寫法

```javascript

let someValue: any = "this is a string";

let str: string = someValue as string

```

## 接口interface

interface用來定義復雜類型(對象、函數、索引類型等)

```javascript

interface Config {

readonly color: string; // 定義只讀

width?: number; // 定義可選屬性

}

function doSome( option: Config ){

// option.color

// option.width

}

```

同一作用域中同名的interface會自動合并

```javascript

interface Config {

color: string;

width: number;

}

// 同一作用域中

interface Config {

height: number;

}

// 會合并為

interface Config {

color: string;

width: number;

height: number;

}

```

extentds (interface可以使用extentds進行拓展)

```javascript

interface Parent{

readonly color: string; // 可定義常量

width: number;

}

interface Children extends Parent{

height: number;

}

```

## 類

公共，私有 與 存取

1、public

```javascript

class Animal {

name: string; // 默認為public

public id: string; // 也可以標明public

}

```

2、private

```javascript

class Animal {

// private 禁止在類的外部訪問

private move() {

// dosomething

}

}

new Animal().move; // 錯誤: 'move' 是私有的.

```

3、get、set

TypeScript支持通過getters/setters來截取對對象成員的訪問。與vue的watcher同理。

```javascript

class Animal {

get fullName(): string {

return this._fullName;

}

set fullName(newName: string) {

// dosomething

}

}

```

4、readonly標明只讀

```javascript

class Animal {

readonly number: number = 8;

}

```

還有static、protected等，這里不過多說明，詳情請看[文檔。](https://www.tslang.cn/docs/handbook/classes.html)

## 函數

函數類型包含兩部分：參數類型和返回值類型。

```javascript

// :number 表示返回值為number

function add(x: number, y: number): number {

return x + y;

}

let myAdd = function(x: number, y: number): number { return x + y; };

```

聲明一個未賦值函數

```javascript

let fn: (x: number, y: number) => number;

fn = myAdd;

```

除此之外，interface同樣可以聲明函數類型

```javascript

// : boolean表示返回值為布爾值

interface Func {

(source: string, subString: string): boolean;

}

// 命名為x，y或者其他都可以

let ff: Func = (x: string, y: string): boolean => {

return x === y

}

```

函數參數類型只會校驗它的類型，不會校驗它的名字

## type類型別名

類型別名會給一個類型起個新名字。它可以作用于原始值，聯合類型，元組以及其它任何你需要手寫的類型。它的語法看起來像是普通的js。

```java

// 給String重新命名

type Easing = String

// 定義聯合類型

type Easing = 'a' | 'b' | 'c'

```

type可以將多個interface聯合或者交叉

```java

interface A{

kind: "square";

size: number;

}

interface B{

kind: "rectangle";

width: number;

height: number;

}

interface C{

kind: "circle";

radius: number;

}

type Shape1 = A | B | C; // 聯合

type Shape2 = A & B & C; // 交叉

```

type也可以聲明函數和元組

```java

// 函數

type Easing = () => string

// 元組

type DudeType = {

[key in Keys]: string // keys是一個索引類型

}

```

> type和interface功能類似，但type更像一個值而不是一個類型。在兩者都能實現需求的情況下，官方建議優先使用interface。

# 四、ts高級用法--泛型

考慮到代碼的可重用性和拓展性，ts允許使用泛型來定義未知類型，使用尖括號語法。

```javascript

// 當入參未知時，我們可定義一個泛型

function identity(arg: T): T {

return arg;

}

// 它可以這樣用，表示數組

function identity(arg: T[]): T[] {

return arg;

}

// 或者表示對象

function identity(arg: {x: T, y: T}): T {

return arg.x;

}

```

泛型支持extends語法

```javascript

interface Lengthwise {

length: number;

}

function loggingIdentity(arg: T): T {

console.log(arg.length);? // 可以用時length屬性

return arg;

}

```

泛型promise使用示例

```typescript

// Promise表示Promise.resolve的值類型是T

// catch類型默認是any

let ajax = (params: any): Promise => {

return new Promise((resolve) => {

axios.get('/list').then(res=> {

resolve(params)

})

})

}

// 使用時

ajax(params).then(res=>{

// res 類型為{a: string,b:number}

)

```

>此處只講了typescript的一些常見用法和問題，更多說明請看官方文檔。[(中文文檔3.1](https://www.tslang.cn/docs/release-notes/typescript-3.1.html)，[英文文檔4.1)](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-1.html)

==一些運算操作符==

1. ！斷言此處有值。

```javascript

let y!:number = 1; // 表示y必定有值

```

2. ?表示可能未定義。

```javascript

let obj = {

y?: number, // 相當于? number | undefined

z: string

}

let num: number;

num = obj.y; // error，不能將類型“number | undefined”分配給類型“number”。

```

3. ？？ 空值合并。

通常我們取一個可能存在的值時，會像這樣

```javascript

let obj = {

y?: number

}

let num: number;

num = obj.y || 1;

```

但當obj.y為0時，它會存在問題。所以ts提供了更好的解決方案。??只會判斷null和undefined兩個值。

```javascript

let obj = {

y?: number

}

let num: number;

num = obj.y ?? 1; // 即使y為0，也會得到0，而不是1

```

4.!取值用法和?的賦值用法。

!表示必定有值，?表示可能有值，所以他們也可以這樣使用

當你確定值必定存在時

```javascript

let obj: {

a?: {

b?: number

}

} = { a: { b: 1 } };

let x: number = obj.a.b; // 報錯，對象可能未定義

let y: number = obj!.a!.b; // 通過

```

當你不確定值是否存在

```javascript

let obj: {

a?: {

b?: number

}

}

obj.a.b = 1; // 報錯

obj?.a?.b = 1; // 通過

```

5. ！(放在value之后)允許null和undefined

```javascript

let y:number

y = null// 無法通過編譯

y = undefined// 無法通過編譯

y = null!? ? ? // 通過

y = undefined! // 通過

```

6. 最新特性??=、||=、&&=

有時候我們需要對可能存在的值給一個默認值

```javascript

let obj = {

y?: number

}

// 正常情況

obj.y = obj.y ? obj.y : 1;

// 使用??空值合并

obj.y = obj.y ?? 1;

// 使用??=運算符，他看起來有點像 +=和-=

obj.y ??= 1;

```

總結

以上是生活随笔為你收集整理的typescript ajax,TypeScript的应用方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。