你需要知道的TypeScript高級類型總結(jié)
在開發(fā)過程中，為了應(yīng)對多變的復(fù)雜場景，我們需要了解一下 TypeScript 的高級類型。所謂高級類型，是 TypeScript 為了保證語言的靈活性，所使用的一些語言特性。這些特性有助于我們應(yīng)對復(fù)雜多變的開發(fā)場景。
本文大綱如下：
- 字面量類型
- 聯(lián)合類型
- 交叉類型
- 索引類型
- 條件類型
- 類型推斷
- 類型保護(hù)
- 類型斷言
1. 字面量類型
在 TypeScript 中，字面量不僅可以表示值，還可以表示類型，即字面量類型。TypeScript 支持以下字面量類型：
- 字符串字面量類型；
- 數(shù)字字面量類型；
- 布爾字面量類型；
- 模板字面量類型。
（1）字符串字面量類型
字符串字面量類型其實就是字符串常量，與字符串類型不同的是它是具體的值：
type?Name?=?"TS"; const?name1:?Name?=?"test";?//???不能將類型“"test"”分配給類型“"TS"”。ts(2322) const?name2:?Name?=?"TS";
實際上，定義單個字面量類型在實際應(yīng)用中并沒有太大的用處。它的應(yīng)用場景就是將多個字面量類型組合成一個聯(lián)合類型，用來描述擁有明確成員的實用的集合：
type?Direction?=?"north"?|?"east"?|?"south"?|?"west";
function?getDirectionFirstLetter(direction:?Direction)?{
??return?direction.substr(0,?1);
}
getDirectionFirstLetter("test");?//???類型“"test"”的參數(shù)不能賦給類型“Direction”的參數(shù)。
getDirectionFirstLetter("east");
這個例子中使用四個字符串字面量類型組成了一個聯(lián)合類型。這樣在調(diào)用函數(shù)時，編譯器就會檢查傳入的參數(shù)是否是指定的字面量類型集合中的成員。通過這種方式，可以將函數(shù)的參數(shù)限定為更具體的類型。這不僅提升了代碼的可讀性，還保證了函數(shù)的參數(shù)類型。
除此之外，使用字面量類型還可以為我們提供智能的代碼提示：
（2）數(shù)字字面量類型
數(shù)字字面量類型就是指定類型為具體的數(shù)值：
type?Age?=?18;
interface?Info?{
??name:?string;
??age:?Age;
}
const?info:?Info?=?{
??name:?"TS",
??age:?28?//???不能將類型“28”分配給類型“18”
};
可以將數(shù)字字面量類型分配給一個數(shù)字，但反之是不行的：
let?val1:?10|11|12|13|14|15?=?10; let?val2?=?10; val2?=?val1; val1?=?val2;?//???不能將類型“number”分配給類型“10?| 11 | 12 | 13 | 14 | 15”。
（3）布爾字面量類型
布爾字面量類型就是指定類型為具體的布爾值（true或false）：
let?success:?true; let?fail:?false; let?value:?true?|?false; success?=?true; success?=?false;??//???不能將類型“false”分配給類型“true”
由于布爾字面量類型只有true或false兩種，所以下面 value 變量的類型是一樣的：
let?value:?true?|?false; let?value:?boolean;
（4）模板字面量類型
在 TypeScript 4.1 版本中新增了模板字面量類型。什么是模板字面量類型呢？它一字符串字面量類型為基礎(chǔ)，可以通過聯(lián)合類型擴(kuò)展成多個字符串。它與 JavaScript 的模板字符串語法相同，但是只能用在類型定義中使用。
① 基本語法
當(dāng)使用模板字面量類型時，它會替換模板中的變量，返回一個新的字符串字面量。
type?attrs?=?"Phone"?|?"Name";
type?target?=?`get${attrs}`;
//?type?target?=?"getPhone"?|?"getName";
可以看到，模板字面量類型的語法簡單，并且易讀且功能強大。
假如有一個CSS內(nèi)邊距規(guī)則的類型，定義如下：
type?CssPadding?=?'padding-left'?|?'padding-right'?|?'padding-top'?|?'padding-bottom';
上面的類型是沒有問題的，但是有點冗長。margin 和 padding 的規(guī)則相同，但是這樣寫我們無法重用任何內(nèi)容，最終就會得到很多重復(fù)的代碼。
下面來使用模版字面量類型來解決上面的問題：
type?Direction?=?'left'?|?'right'?|?'top'?|?'bottom';
type?CssPadding?=?`padding-${Direction}`
//?type?CssPadding?=?'padding-left'?|?'padding-right'?|?'padding-top'?|?'padding-bottom'
這樣代碼就變得更加簡潔。如果想創(chuàng)建margin類型，就可以重用Direction類型：
type?CssMargin?=?`margin-${Direction}`
如果在 JavaScript 中定義了變量，就可以使用 typeof 運算符來提取它：
const?direction?=?'left';
type?CssPadding?=?`padding-${typeof?direction}`;
//?type?CssPadding?=?"padding-left"
② 變量限制
模版字面量中的變量可以是任意的類型嗎？可以使用對象或自定義類型嗎？來看下面的例子：
type?CustomObject?=?{
??foo:?string
}
type?target?=?`get${CustomObject}`
//???不能將類型“CustomObject”分配給類型“string | number | bigint | boolean | null | undefined”。
type?complexUnion?=?string?|?number?|?bigint?|?boolean?|?null?|?undefined;
type?target2?=?`get${complexUnion}`??//??
可以看到，當(dāng)在模板字面量類型中使用對象類型時，就報錯了，因為編譯器不知道如何將它序列化為字符串。實際上，模板字面量類型中的變量只允許是string、number、bigint、boolean、null、undefined或這些類型的聯(lián)合類型。
③ 實用程序
Typescript 提供了一組實用程序來幫助處理字符串。它們不是模板字面量類型獨有的，但與它們結(jié)合使用時很方便。完整列表如下：
Uppercase<StringType>：將類型轉(zhuǎn)換為大寫；Lowercase<StringType>：將類型轉(zhuǎn)換為小寫；Capitalize<StringType>：將類型第一個字母大寫；Uncapitalize<StringType>：將類型第一個字母小寫。
這些實用程序只接受一個字符串字面量類型作為參數(shù)，否則就會在編譯時拋出錯誤：
type?nameProperty?=?Uncapitalize<'Name'>; //?type?nameProperty?=?'name'; type?upercaseDigit?=?Uppercase<10>; //???類型“number”不滿足約束“string”。 type?property?=?'phone'; type?UppercaseProperty?=?Uppercase<property>; //?type?UppercaseProperty?=?'Property';
下面來看一個更復(fù)雜的場景，將字符串字面量類型與這些實用程序結(jié)合使用。將兩種類型進(jìn)行組合，并將第二種類型的首字母大小，這樣組合之后的類型符合駝峰命名法：
type?actions?=?'add'?|?'remove';
type?property?=?'name'?|?'phone';
type?result?=?`${actions}${Capitalize<property>}`;
//?type?result?=?addName?|?addPhone?|?removeName?|?removePhone
④ 類型推斷
在上面的例子中，我們使用使用模版字面量類型將現(xiàn)有的類型組合成新類型。下面來看看如何使用模板字面量類型從組合的類型中提取類型。這里就需要用到infer關(guān)鍵字，它允許我們從條件類型中的另一個類型推斷出一個類型。
下面來嘗試提取字符串字面量 marginRight 的根節(jié)點：
type?Direction?=?'left'?|?'right'?|?'top'?|?'bottom';
type?InferRoot<T>?=?T?extends?`${infer?K}${Capitalize<Direction>}`???K?:?T;
type?Result1?=?InferRoot<'marginRight'>;
//?type?Result1?=?'margin';
type?Result2?=?InferRoot<'paddingLeft'>;
//?type?Result2?=?'padding';
可以看到， 模版字面量還是很強大的，不僅可以創(chuàng)建類型，還可以解構(gòu)它們。
⑤ 作為判別式
在TypeScript 4.5 版本中，支持了將模板字面量串類型作為判別式，用于類型推導(dǎo)。來看下面的例子：
interface?Message?{
????type:?string;
????url:?string;
}
interface?SuccessMessage?extends?Message?{
????type:?`${string}Success`;
????body:?string;
}
interface?ErrorMessage?extends?Message?{
????type:?`${string}Error`;
????message:?string;
}
function?handler(r:?SuccessMessage?|?ErrorMessage)?{
????if?(r.type?===?"HttpSuccess")?{?
????????let?token?=?r.body;
????}
}
在這個例子中，handler 函數(shù)中的 r 的類型就被推斷為 SuccessMessage。因為根據(jù) SuccessMessage 和 ErrorMessage 類型中的type字段的模板字面量類型推斷出 HttpSucces 是根據(jù)SuccessMessage中的type創(chuàng)建的。
2. 聯(lián)合類型
（1）基本使用
聯(lián)合類型是一種互斥的類型，該類型同時表示所有可能的類型。聯(lián)合類型可以理解為多個類型的并集。 聯(lián)合類型用來表示變量、參數(shù)的類型不是某個單一的類型，而可能是多種不同的類型的組合，它通過 | 來分隔不同的類型：
type?Union?=?"A"?|?"B"?|?"C";
在編寫一個函數(shù)時，該函數(shù)的期望參數(shù)是數(shù)字或者字符串，并根據(jù)傳遞的參數(shù)類型來執(zhí)行不同的邏輯。這時就用到了聯(lián)合類型：
function?direction(param:?string?|?number)?{
??if?(typeof?param?===?"string")?{
????...
??}
??if?(typeof?param?===?"number")?{
????...
??}
??...
}
這樣在調(diào)用 direction 函數(shù)時，就可以傳入string或number類型的參數(shù)。當(dāng)聯(lián)合類型比較長或者想要復(fù)用這個聯(lián)合類型的時候，就可以使用類型別名來定義聯(lián)合類型：
type?Params?=?string?|?number?|?boolean;
再來看一個字符串字面量聯(lián)合類型的例子，setStatus 函數(shù)只能接受某些特定的字符串值，就可以將這些字符串字面量組合成一個聯(lián)合類型：
type?Status?=?'not_started'?|?'progress'?|?'completed'?|?'failed';
const?setStatus?=?(status:?Status)?=>?{
??db.object.setStatus(status);
};
setStatus('progress');
setStatus('offline');?//???類型“"offline"”的參數(shù)不能賦給類型“Status”的參數(shù)。
在調(diào)用函數(shù)時，如果傳入的參數(shù)不是聯(lián)合類型中的值，就會報錯。
（2）限制
聯(lián)合類型僅在編譯時是可用的，這意味著我們不能遍歷這些值。進(jìn)行如下嘗試：
type?Status?=?'not_started'?|?'progress'?|?'completed'?|?'failed'; console.log(Object.values(Status));?//???“Status”僅表示類型，但在此處卻作為值使用。
這時就會拋出一個錯誤，告訴我們不能將 Status 類型當(dāng)做值來使用。
如果想要遍歷這些值，可以使用枚舉來實現(xiàn)：
enum?Status?{
??'not_started',
??'progress',
??'completed',
??'failed'
}
console.log(Object.values(Status));
（3）可辨識聯(lián)合類型
在使用聯(lián)合類型時，如何來區(qū)分聯(lián)合類型中的類型呢？類型保護(hù)是一種條件檢查，可以幫助我們區(qū)分類型。在這種情況下，類型保護(hù)可以讓我們準(zhǔn)確地確定聯(lián)合中的類型（下文會詳細(xì)介紹類型保護(hù)）。
有很多方式可以做到這一點，這很大程度上取決于聯(lián)合類型中包含哪些類型。有一條捷徑可以使聯(lián)合類型中的類型之間的區(qū)分變得容易，那就是可辨識聯(lián)合類型。可辨識聯(lián)合類型是聯(lián)合類型的一種特殊情況，它允許我們輕松的區(qū)分其中的類型。
這是通過向具有唯一值的每個類型中添加一個字段來實現(xiàn)的，該字段用于使用相等類型保護(hù)來區(qū)分類型。例如，有一個表示所有可能的形狀的聯(lián)合類型，根據(jù)傳入的不同類型的形狀來計算該形狀的面積，代碼如下：
type?Square?=?{
??kind:?"square";
??size:?number;
}
type?Rectangle?=?{
??kind:?"rectangle";
??height:?number;
??width:?number;
}
type?Circle?=?{
??kind:?"circle";
??radius:?number;
}
type?Shape?=?Square?|?Rectangle?|?Circle;?
function?getArea(s:?Shape)?{
??switch?(s.kind)?{
????case?"square":
??????return?s.size?*?s.size;
????case?"rectangle":
??????return?s.height?*?s.width;
????case?"circle":
??????return?Math.PI?*?s.radius?**?2;
??}
}
在這個例子中，Shape 就是一個可辨識聯(lián)合類型，它是三個類型的聯(lián)合，而這三個類型都有一個 kind 屬性，且每個類型的 kind 屬性值都不相同，能夠起到標(biāo)識作用。函數(shù)內(nèi)應(yīng)該包含聯(lián)合類型中每一個接口的 case，以保證每個**case**都能被處理。
如果函數(shù)內(nèi)沒有包含聯(lián)合類型中每一個類型的 case，在編寫代碼時希望編譯器應(yīng)該給出代碼提示，可以使用以下兩種完整性檢查的方法。
① strictNullChecks
對于上面的例子，先來新增一個類型，整體代碼如下：
type?Square?=?{
??kind:?"square";
??size:?number;
}
type?Rectangle?=?{
??kind:?"rectangle";
??height:?number;
??width:?number;
}
type?Circle?=?{
??kind:?"circle";
??radius:?number;
}
type?Triangle?=?{
??kind:?"triangle";
??bottom:?number;
??height:?number;
}
type?Shape?=?Square?|?Rectangle?|?Circle?|?Triangle;?
function?getArea(s:?Shape)?{
??switch?(s.kind)?{
????case?"square":
??????return?s.size?*?s.size;
????case?"rectangle":
??????return?s.height?*?s.width;
????case?"circle":
??????return?Math.PI?*?s.radius?**?2;
??}
}
這時，Shape 聯(lián)合類型中有四種類型，但函數(shù)的 switch 里只包含三個 case，這個時候編譯器并沒有提示任何錯誤，因為當(dāng)傳入函數(shù)的是類型是 Triangle 時，沒有任何一個 case 符合，則不會執(zhí)行任何 return 語句，那么函數(shù)是默認(rèn)返回 undefined。所以可以利用這個特點，結(jié)合 strictNullChecks 編譯選項，可以在tsconfig.json配置文件中開啟 strictNullChecks：
{
??"compilerOptions":?{
????"strictNullChecks":?true,
??}
}
讓函數(shù)的返回值類型為 number，那么當(dāng)返回 undefined 時就會報錯：
function?getArea(s:?Shape):?number?{
????case?"square":
??????return?s.size?*?s.size;
????case?"rectangle":
??????return?s.height?*?s.width;
????case?"circle":
??????return?Math.PI?*?s.radius?**?2;
??}
}
上面的number處就會報錯：
② never
當(dāng)函數(shù)返回一個錯誤或者不可能有返回值的時候，返回值類型為 never。所以可以給 switch 添加一個 default 流程，當(dāng)前面的 case 都不符合的時候，會執(zhí)行 default 中的邏輯：
function?assertNever(value:?never):?never?{
??throw?new?Error("Unexpected?object:?"?+?value);
}
function?getArea(s:?Shape)?{
??switch?(s.kind)?{
????case?"square":
??????return?s.size?*?s.size;
????case?"rectangle":
??????return?s.height?*?s.width;
????case?"circle":
??????return?Math.PI?*?s.radius?**?2;
????default:
??????return?assertNever(s);?//?error?類型“Triangle”的參數(shù)不能賦給類型“never”的參數(shù)
??}
}
采用這種方式，需要定義一個額外的 asserNever 函數(shù)，但是這種方式不僅能夠在編譯階段提示遺漏了判斷條件，而且在運行時也會報錯。
3. 交叉類型
（1）基本實用
交叉類型是將多個類型合并為一個類型。這讓我們可以把現(xiàn)有的多種類型疊加到成為一種類型，合并后的類型將擁有所有成員類型的特性。交叉類型可以理解為多個類型的交集。 可以使用以下語法來創(chuàng)建交叉類型，每種類型之間使用 & 來分隔：
type?Types?=?type1?&?type2?&?..?&?..?&?typeN;
如果我們僅僅把原始類型、字面量類型、函數(shù)類型等原子類型合并成交叉類型，是沒有任何意義的，因為不會有變量同時滿足這些類型，那這個類型實際上就等于never類型。
（2）使用場景
上面說了，一般情況下使用交叉類型是沒有意義的，那什么時候該使用交叉類型呢？下面就來看看交叉類型的使用場景。
① 合并接口類型
交叉類型的一個常見的使用場景就是將多個接口合并成為一個：
type?Person?=?{
?name:?string;
??age:?number;
}?&?{
?height:?number;
??weight:?number;
}?&?{
?id:?number;
}
const?person:?Person?=?{
?name:?"zhangsan",
??age:?18,
??height:?180,
??weight:?60,
??id:?123456
}
這里就通過交叉類型使 Person 同時擁有了三個接口中的五個屬性。那如果兩個接口中的同一個屬性定義了不同的類型會發(fā)生了什么情況呢？
type?Person?=?{
?name:?string;
??age:?number;
}?&?{
??age:?string;
?height:?number;
??weight:?number;
}
兩個接口中都擁有age屬性，并且類型分別是number和string，那么在合并后，age的類型就是string & number，也就是 never 類型：
const?person:?Person?=?{
?name:?"zhangsan",
??age:?18,???//???不能將類型“number”分配給類型“never”。
??height:?180,
??weight:?60,
}
如果同名屬性的類型兼容，比如一個是 number，另一個是 number 的子類型——數(shù)字字面量類型，合并后 age 屬性的類型就是兩者中的子類型：
type?Person?=?{
?name:?string;
??age:?number;
}?&?{
??age:?18;
?height:?number;
??weight:?number;
}
const?person:?Person?=?{
?name:?"zhangsan",
??age:?20,??//???不能將類型“20”分配給類型“18”。
??height:?180,
??weight:?60,
}
第二個接口中的age是一個數(shù)字字面量類型，它是number類型的子類型，所以合并之后的類型為字面量類型18。
② 合并聯(lián)合類型
交叉類型另外一個常見的使用場景就是合并聯(lián)合類型?？梢詫⒍鄠€聯(lián)合類型合并為一個交叉類型，這個交叉類型需要同時滿足不同的聯(lián)合類型限制，也就是提取了所有聯(lián)合類型的相同類型成員：
type?A?=?"blue"?|?"red"?|?999; type?B?=?999?|?666; type?C?=?A?&?B;?//?type?C?=?999; const?c:?C?=?999;
如果多個聯(lián)合類型中沒有相同的類型成員，那么交叉出來的類型就是never類型：
type?A?=?"blue"?|?"red"; type?B?=?999?|?666; type?C?=?A?&?B; const?c:?C?=?999;?//???不能將類型“number”分配給類型“never”。
4. 索引類型
在介紹索引類型之前，先來了解兩個類型操作符：索引類型查詢操作符和索引訪問操作符。
（1）索引類型查詢操作符
使用 keyof 操作符可以返回一個由這個類型的所有屬性名組成的聯(lián)合類型：
type?UserRole?=?'admin'?|?'moderator'?|?'author';
type?User?=?{
??id:?number;
??name:?string;
??email:?string;
??role:?UserRole;
}
type?UserKeysType?=?keyof?User;?//?'id'?|?'name'?|?'email'?|?'role';
（2）索引訪問操作符
索引訪問操作符就是[]，其實和訪問對象的某個屬性值是一樣的語法，但是在 TS 中它可以用來訪問某個屬性的類型：
type?User?=?{
??id:?number;
??name:?string;
??address:?{
????street:?string;
????city:?string;
????country:?string;
??};
}
type?Params?=?{
??id:?User['id'],
??address:?User['address']
}
這里我們沒有使用number來描述id屬性，而是使用 User['id'] 引用User中的id屬性的類型，這種類型成為索引類型，它們看起來與訪問對象的屬性相同，但訪問的是類型。
當(dāng)然，也可以訪問嵌套屬性的類型：
type?City?=?User['address']['city'];?//?string
可以通過聯(lián)合類型來一次獲取多個屬性的類型：
type?IdOrName?=?User['id'?|?'name'];?//?string?|?number
（3）應(yīng)用
我們可以使用以下方式來獲取給定對象中的任何屬性：
function?getProperty<T,?K?extends?keyof?T>(obj:?T,?key:?K)?{
??return?obj[key];
}
TypeScript 會推斷此函數(shù)的返回類型為 T[K]，當(dāng)調(diào)用 getProperty 函數(shù)時，TypeScript 將推斷我們將要讀取的屬性的實際類型：
const?user:?User?=?{
??id:?15,
??name:?'John',
??email:?'john@smith.com',
??role:?'admin'
};
getProperty(user,?'name');?//?string
getProperty(user,?'id');???//?number
name屬性被推斷為string類型，age屬性被推斷為number類型。當(dāng)訪問User中不存在的屬性時，就會報錯：
getProperty(user,?'property');?//???類型“"property"”的參數(shù)不能賦給類型“keyof User”的參數(shù)。
5. 條件類型
（1）基本概念
條件類型根據(jù)條件來選擇兩種可能的類型之一，就像 JavaScript 中的三元運算符一樣。其語法如下所示：
T?extends?U???X?:?Y
上述類型就意味著當(dāng) T 可分配給（或繼承自）U 時，類型為 X，否則類型為 Y。
看一個簡單的例子，一個值可以是用戶的出生日期或年齡。如果是出生日期，那么這個值的類型就是 number；如果是年齡，那這個值的類型就是 string。下面定義了三個類型：
type?Dob?=?string; type?Age?=?number; type?UserAgeInformation<T>?=?T?extends?number???number?:?string;
其中 T 是 UserAgeInformation 的泛型參數(shù)，可以在這里傳遞任何類型。如果 T 擴(kuò)展了 number，那么類型就是 number，否則就是 string。如果希望 UserAgeInformation 是 number，就可以將 Age 傳遞給 T，如果希望是一個 string，就可以將 Dob 傳遞給 T：
type?Dob?=?string; type?Age?=?number; type?UserAgeInformation<T>?=?T?extends?number???number?:?string; let?userAge:UserAgeInformation<Age>?=?100; let?userDob:UserAgeInformation<Dob>?=?'25/04/1998';
（2）創(chuàng)建自定義條件類型
單獨使用條件類型可能用處不是很大，但是結(jié)合泛型使用時就非常有用。一個常見的用例就是使用帶有 never 類型的條件類型來修剪類型中的值。
type?NullableString?=?string?|?null; let?itemName:?NullableString; itemName?=?null; itemName?=?"Milk"; console.log(itemName);
其中 NullableString 可以是 string 或 null 類型，它用于 itemName 變量。定義一個名為 NoNull 的類型別名：
type?NoNull<T>
我們想從類型中剔除 null，需要通過條件來檢查類型是否包含 null：
type?NoNull<T>?=?T?extends?null;
當(dāng)這個條件為 true 時，不想使用該類型，返回 never 類型：
type?NoNull<T>?=?T?extends?null???never
當(dāng)這個條件為 false 時，說明類型中不包含 null，可以直接返回 T：
type?NoNull<T>?=?T?extends?null???never?:?T;
將 itemName 變量的類型更改為 NoNull：
let?itemName:?NoNull<NullableString>;
TypeScript 有一個類似的實用程序類型，稱為 NonNullable，其實現(xiàn)如下：
type?NonNullable<T>?=?T?extends?null?|?undefined???never?:?T;
NonNullable 和 NoNull 之間的區(qū)別在于 NonNullable 將從類型中刪除 undefined 以及 null。
（3）條件類型的類型推斷
條件類型提供了一個infer關(guān)鍵字用來推斷類型。下面來定義一個條件類型，如果傳入的類型是一個數(shù)組，則返回數(shù)組元素的類型；如果是一個普通類型，則直接返回這個類型。如果不使用 infer 可以這樣寫：
type?Type<T>?=?T?extends?any[]???T[number]?:?T; type?test?=?Type<string[]>;?//?string type?test2?=?Type<string>;??//?string
如果傳入 Type 的是一個數(shù)組類型，那么返回的類型為T[number]，即該數(shù)組的元素類型，如果不是數(shù)組，則直接返回這個類型。這里通過索引訪問類型T[number]來獲取類型，如果使用 infer 關(guān)鍵字則無需手動獲?。?/p>
type?Type<T>?=?T?extends?Array<infer?U>???U?:?T; type?test?=?Type<string[]>;?//?string type?test2?=?Type<string>;??//?string
這里 infer 能夠推斷出 U 的類型，并且供后面使用，可以理解為這里定義了一個變量 U 來接收數(shù)組元素的類型。
6. 類型推斷
（1）基礎(chǔ)類型
在變量的定義中如果沒有明確指定類型，編譯器會自動推斷出其類型：
let?name?=?"zhangsan"; name?=?123;?//?error?不能將類型“123”分配給類型“string”
在定義變量 name 時沒有指定其類型，而是直接給它賦一個字符串。當(dāng)再次給 name 賦一個數(shù)值時，就會報錯。這里，TypeScript 根據(jù)賦給 name 的值的類型，推斷出 name 是 string 類型，當(dāng)給 string 類型的 name 變量賦其他類型值的時候就會報錯。這是最基本的類型推論，根據(jù)右側(cè)的值推斷左側(cè)變量的類型。
（2）多類型聯(lián)合
當(dāng)定義一個數(shù)組或元組這種包含多個元素的值時，多個元素可以有不同的類型，這時 TypeScript 會將多個類型合并起來，組成一個聯(lián)合類型：
let?arr?=?[1,?"a"]; arr?=?["b",?2,?false];?//?error?不能將類型“false”分配給類型“string?|?number”
可以看到，此時的 arr 中的元素被推斷為string | number，也就是元素可以是 string 類型也可以是 number 類型，除此之外的類型是不可以的。
再來看一個例子：
let?value?=?Math.random()?*?10?>?5???'abc'?:?123 value?=?false?//?error?不能將類型“false”分配給類型“string?|?number”
這里給value賦值為一個三元表達(dá)式的結(jié)果，Math.random() * 10的值為0-10的隨機數(shù)。如果這個隨機值大于5，則賦給 value的值為字符串abc，否則為數(shù)值123。所以最后編譯器推斷出的類型為聯(lián)合類型string | number，當(dāng)給它再賦值false時就會報錯。
（3）上下文類型
上面的例子都是根據(jù)=右側(cè)值的類型，推斷左側(cè)值的類型。而上下文類型則相反，它是根據(jù)左側(cè)的類型推斷右側(cè)的類型：
window.onmousedown?=?function(mouseEvent)?{
??console.log(mouseEvent.a);?//?error?類型“MouseEvent”上不存在屬性“a”
};
可以看到，表達(dá)式左側(cè)是 window.onmousedown(鼠標(biāo)按下時觸發(fā))，因此 TypeScript 會推斷賦值表達(dá)式右側(cè)函數(shù)的參數(shù)是事件對象，因為左側(cè)是 mousedown 事件，所以 TypeScript 推斷 mouseEvent 的類型是 MouseEvent。在回調(diào)函數(shù)中使用 mouseEvent 時，可以訪問鼠標(biāo)事件對象的所有屬性和方法，當(dāng)訪問不存在屬性時，就會報錯。
7. 類型保護(hù)
類型保護(hù)實際上是一種錯誤提示機制，類型保護(hù)是可執(zhí)行運行時檢查的一種表達(dá)式，用于確保該類型在一定的范圍內(nèi)。類型保護(hù)的主要思想是嘗試檢測屬性、方法或原型，以確定如何處理值。
（1）instanceof 類型保護(hù)
instanceof是一個內(nèi)置的類型保護(hù)，可用于檢查一個值是否是給定構(gòu)造函數(shù)或類的實例。通過這種類型保護(hù)，可以測試一個對象或值是否是從一個類派生的，這對于確定實例的類型很有用。
instanceof 類型保護(hù)的基本語法如下：
objectVariable?instanceof?ClassName?;?
來看一個例子：
class?CreateByClass1?{
??public?age?=?18;
??constructor()?{}
}
class?CreateByClass2?{
??public?name?=?"TypeScript";
??constructor()?{}
}
function?getRandomItem()?{
??return?Math.random()?<?0.5?
??????new?CreateByClass1()?
????:?new?CreateByClass2();?//?如果隨機數(shù)小于0.5就返回CreateByClass1的實例，否則返回CreateByClass2的實例
}
const?item?=?getRandomItem();
//?判斷item是否是CreateByClass1的實例
if?(item?instanceof?CreateByClass1)?{?
??console.log(item.age);
}?else?{
??console.log(item.name);
}
這里 if 的判斷邏輯中使用 instanceof 操作符判斷 item 。如果是 CreateByClass1 創(chuàng)建的，那它就有 age 屬性；如果不是，那它就有 name 屬性。
（2）typeof 類型保護(hù)
typeof 類型保護(hù)用于確定變量的類型，它只能識別以下類型：
- boolean
- string
- bigint
- symbol
- undefined
- function
- number
對于這個列表之外的任何內(nèi)容，typeof 類型保護(hù)只會返回 object。typeof 類型保護(hù)可以寫成以下兩種方式：
typeof?v?!==?"typename" typeof?v?===?"typename"
typename 只能是number、string、boolean和symbol四種類型，在 TS 中，只會把這四種類型的 typeof 比較識別為類型保護(hù)。
在下面的例子中，StudentId 函數(shù)有一個 string | number 聯(lián)合類型的參數(shù) x。如果變量 x 是字符串，則會打印 Student；如果是數(shù)字，則會打印 Id。typeof 類型保護(hù)可以從 x 中提取類型：
function?StudentId(x:?string?|?number)?{
????if?(typeof?x?==?'string')?{
????????console.log('Student');
????}
????if?(typeof?x?===?'number')?{
????????console.log('Id');
????}
}
StudentId(`446`);?//?Student
StudentId(446);???//?Id
（3）in 類型保護(hù)
in 類型保護(hù)可以檢查對象是否具有特定屬性。它通常返回一個布爾值，指示該屬性是否存在于對象中。
in 類型保護(hù)的基本語法如下：
propertyName?in?objectName
來看一個例子：
interface?Person?{
??firstName:?string;
??surname:?string;
}
interface?Organisation?{
??name:?string;
}
type?Contact?=?Person?|?Organisation;
function?sayHello(contact:?Contact)?{
??if?("firstName"?in?contact)?{
????console.log(contact.firstName);
??}
}
in 類型保護(hù)檢查參數(shù) contact 對象中是否存在 firstName屬性。如果存在，就進(jìn)入if 判斷，打印contact.firstName的值。
（4）自定義類型保護(hù)
來看一個例子：
const?valueList?=?[123,?"abc"];
const?getRandomValue?=?()?=>?{
??const?number?=?Math.random()?*?10;?//?這里取一個[0,?10)范圍內(nèi)的隨機值
??if?(number?<?5)?{
????return?valueList[0];?//?如果隨機數(shù)小于5則返回valueList里的第一個值，也就是123
??}else?{
????return?valueList[1];?//?否則返回"abc"
??}
};
const?item?=?getRandomValue();
if?(item.length)?{
??console.log(item.length);?//?error?類型“number”上不存在屬性“l(fā)ength”
}?else?{
??console.log(item.toFixed());?//?error?類型“string”上不存在屬性“toFixed”
}
這里，getRandomValue 函數(shù)返回的元素是不固定的，有時返回 number 類型，有時返回 string 類型。使用這個函數(shù)生成一個值 item，然后通過是否有 length 屬性來判斷是 string 類型，如果沒有 length 屬性則為 number 類型。在 JavaScript 中，這段邏輯是沒問題的。但是在 TypeScript 中，因為 TS 在編譯階段是無法識別 item 的類型的，所以當(dāng)在 if 判斷邏輯中訪問 item 的 length 屬性時就會報錯，因為如果 item 為 number 類型的話是沒有 length 屬性的。
這個問題可以通過類型斷言來解決，修改判斷邏輯即可：
if?((<string>item).length)?{
??console.log((<string>item).length);
}?else?{
??console.log((<number>item).toFixed());
}
這里通過使用類型斷言告訴 TS 編譯器，if 中的 item 是 string 類型，而 else 中的是 number 類型。這樣做雖然可以，但是需要在使用 item 的地方都使用類型斷言來說明，顯然有些繁瑣。
可以使用自定義類型保護(hù)來解決上述問題：
const?valueList?=?[123,?"abc"];
const?getRandomValue?=?()?=>?{
??const?number?=?Math.random()?*?10;?//?這里取一個[0,?10)范圍內(nèi)的隨機值
??if?(number?<?5)?return?valueList[0];?//?如果隨機數(shù)小于5則返回valueList里的第一個值，也就是123
??else?return?valueList[1];?//?否則返回"abc"
};
function?isString(value:?number?|?string):?value?is?string?{
??const?number?=?Math.random()?*?10
??return?number?<?5;
}
const?item?=?getRandomValue();
if?(isString(item))?{
??console.log(item.length);?//?此時item是string類型
}?else?{
??console.log(item.toFixed());?//?此時item是number類型
}
首先定義一個函數(shù)，函數(shù)的參數(shù) value 就是要判斷的值。這里 value 的類型可以為 number 或 string，函數(shù)的返回值類型是一個結(jié)構(gòu)為 value is type 的類型謂語，value 的命名無所謂，但是謂語中的 value 名必須和參數(shù)名一致。而函數(shù)里的邏輯則用來返回一個布爾值，如果返回為 true，則表示傳入的值類型為is后面的 type。
使用類型保護(hù)后，if 的判斷邏輯和代碼塊都無需再對類型做指定工作，不僅如此，既然 item 是 string類型，則 else 的邏輯中，item 一定是聯(lián)合類型中的另外一個，也就是 number 類型。
8. 類型斷言
（1）基本使用
TypeScrip的類型系統(tǒng)很強大，但有時它是不如我們更了解一個值的類型。這時，我們更希望 TypeScript 不要進(jìn)行類型檢查，而是讓我們自己來判斷，這時就用到了類型斷言。
使用類型斷言可以手動指定一個值的類型。類型斷言像是一種類型轉(zhuǎn)換，它把某個值強行指定為特定類型，下面來看一個例子：
const?getLength?=?target?=>?{
??if?(target.length)?{
????return?target.length;
??}?else?{
????return?target.toString().length;
??}
};
這個函數(shù)接收一個參數(shù)，并返回它的長度。這里傳入的參數(shù)可以是字符串、數(shù)組或是數(shù)值等類型的值，如果有 length 屬性，說明參數(shù)是數(shù)組或字符串類型，如果是數(shù)值類型是沒有 length 屬性的，所以需要把數(shù)值類型轉(zhuǎn)為字符串然后再獲取 length 值?，F(xiàn)在限定傳入的值只能是字符串或數(shù)值類型的值：
const?getLength?=?(target:?string?|?number):?number?=>?{
??if?(target.length)?{?//?error?類型"string?|?number"上不存在屬性"length"
????return?target.length;?//?error??類型"number"上不存在屬性"length"
??}?else?{
????return?target.toString().length;
??}
};
當(dāng) TypeScript 不確定一個聯(lián)合類型的變量到底是哪個類型時，就只能訪問此聯(lián)合類型的所有類型里共有的屬性或方法，所以現(xiàn)在加了對參數(shù)target和返回值的類型定義之后就會報錯。
這時就可以使用類型斷言，將target的類型斷言成string類型。它有兩種寫法：<type>value 和 value as type：
//?這種形式是沒有任何問題的，建議使用這種形式
const?getStrLength?=?(target:?string?|?number):?number?=>?{
??if?((target?as?string).length)?{??????
????return?(target?as?string).length;?
??}?else?{
????return?target.toString().length;
??}
};
//?這種形式在JSX代碼中不可以使用，而且也是TSLint不建議的寫法
const?getStrLength?=?(target:?string?|?number):?number?=>?{
??if?((<string>target).length)?{??????
????return?(<string>target).length;?
??}?else?{
????return?target.toString().length;
??}
};
類型斷言不是類型轉(zhuǎn)換，斷言成一個聯(lián)合類型中不存在的類型是不允許的。
注意： 不要濫用類型斷言，在萬不得已的情況下使用要謹(jǐn)慎，因為強制把某類型斷言會造成 TypeScript 喪失代碼提示的能力。
（2）雙重斷言
雖然類型斷言是強制性的，但并不是萬能的，在一些情況下會失效:
interface?Person?{
?name:?string;
?age:?number;
}
const?person?=?'ts'?as?Person;?//?Error
這時就會報錯，很顯然不能把 string 強制斷言為一個接口 Person ，但是并非沒有辦法，此時可以使用雙重斷言:
interface?Person?{
?name:?string;
?age:?number;
}
const?person?=?'ts'?as?any?as?Person;
先把類型斷言為 any ，再接著斷言為想斷言的類型就能實現(xiàn)雙重斷言，當(dāng)然上面的例子肯定說不通的，雙重斷言我們也更不建議濫用，但是在一些少見的場景下也有用武之地。
（3）顯式賦值斷言
先來看兩個關(guān)于null和undefined的知識點。
① 嚴(yán)格模式下 null 和 undefined 賦值給其它類型值
當(dāng)在 tsconfig.json 中將 strictNullChecks 設(shè)為 true 后，就不能再將 undefined 和 null 賦值給除它們自身和void 之外的任意類型值了，但有時確實需要給一個其它類型的值設(shè)置初始值為空，然后再進(jìn)行賦值，這時可以自己使用聯(lián)合類型來實現(xiàn) null 或 undefined 賦值給其它類型：
let?str?=?"ts"; str?=?null;?//?error?不能將類型“null”分配給類型“string” let?strNull:?string?|?null?=?"ts";?//?這里你可以簡單理解為，string?|?null即表示既可以是string類型也可以是null類型 strNull?=?null;?//?right strNull?=?undefined;?//?error?不能將類型“undefined”分配給類型“string?|?null”
注意，TS 會將 undefined 和 null 區(qū)別對待，這和 JavaScript 的本意也是一致的，所以在 TS 中，string|undefined、string|null和string|undefined|null是三種不同的類型。
② 可選參數(shù)和可選屬性
如果開啟了 strictNullChecks，可選參數(shù)會被自動加上 |undefined：
const?sum?=?(x:?number,?y?:?number)?=>?{
??return?x?+?(y?||?0);
};
sum(1,?2);?//?3
sum(1);?//?1
sum(1,?undefined);?//?1
sum(1,?null);?//?error?Argument?of?type?'null'?is?not?assignable?to?parameter?of?type?'number?|?undefined'
根據(jù)錯誤信息看出，這里的參數(shù) y 作為可選參數(shù)，它的類型就不僅是 number 類型了，它可以是 undefined，所以它的類型是聯(lián)合類型 number | undefined。
TypeScript 對可選屬性和對可選參數(shù)的處理一樣，可選屬性的類型也會被自動加上 |undefined。
interface?PositionInterface?{
??x:?number;
??b?:?number;
}
const?position:?PositionInterface?=?{
??x:?12
};
position.b?=?"abc";?//?error
position.b?=?undefined;?//?right
position.b?=?null;?//?error
看完這兩個知識點，再來看看顯式賦值斷言。當(dāng)開啟 strictNullChecks 時，有些情況下編譯器是無法在聲明一些變量前知道一個值是否是 null 的，所以需要使用類型斷言手動指明該值不為 null。下面來看一個編譯器無法推斷出一個值是否是null的例子：
function?getSplicedStr(num:?number?|?null):?string?{
??function?getRes(prefix:?string)?{?//?這里在函數(shù)getSplicedStr里定義一個函數(shù)getRes，我們最后調(diào)用getSplicedStr返回的值實際是getRes運行后的返回值
????return?prefix?+?num.toFixed().toString();?//?這里使用參數(shù)num，num的類型為number或null，在運行前編譯器是無法知道在運行時num參數(shù)的實際類型的，所以這里會報錯，因為num參數(shù)可能為null
??}
??num?=?num?||?0.1;?//?這里進(jìn)行了賦值，如果num為null則會將0.1賦給num，所以實際調(diào)用getRes的時候，getRes里的num拿到的始終不為null
??return?getRes("lison");
}
因為有嵌套函數(shù)，而編譯器無法去除嵌套函數(shù)的 null（除非是立即調(diào)用的函數(shù)表達(dá)式），所以需要使用顯式賦值斷言，寫法就是在不為 null 的值后面加個!。上面的例子可以這樣改：
function?getSplicedStr(num:?number?|?null):?string?{
??function?getLength(prefix:?string)?{
????return?prefix?+?num!.toFixed().toString();
??}
??num?=?num?||?0.1;
??return?getLength("lison");
}
這樣編譯器就知道 num 不為 null，即便 getSplicedStr 函數(shù)在調(diào)用的時候傳進(jìn)來的參數(shù)是 null，在 getLength 函數(shù)中的 num 也不會是 null。
（4）const 斷言
const 斷言是 TypeScript 3.4 中引入的一個實用功能。在 TypeScript 中使用 as const 時，可以將對象的屬性或數(shù)組的元素設(shè)置為只讀，向語言表明表達(dá)式中的類型不會被擴(kuò)大（例如從 42 到 number）。
function?sum(a:?number,?b:?number)?{
??return?a?+?b;
}
//?相當(dāng)于?const?arr:?readonly?[3,?4]
const?arr?=?[3,?4]?as?const;
console.log(sum(...arr));?//?7
這里創(chuàng)建了一個 sum 函數(shù)，它以 2 個數(shù)字作為參數(shù)并返回其總和。const 斷言使我們能夠告訴 TypeScript 數(shù)組的類型不會被擴(kuò)展，例如從 [3, 4] 到 number[]。通過 as const，使得數(shù)組成為只讀元組，因此其內(nèi)容是無法更改的，可以在調(diào)用 sum 函數(shù)時安全地使用這兩個數(shù)字。
如果試圖改變數(shù)組的內(nèi)容，會得到一個錯誤：
function?sum(a:?number,?b:?number)?{
??return?a?+?b;
}
//?相當(dāng)于?const?arr:?readonly?[3,?4]
const?arr?=?[3,?4]?as?const;
//?類型“readonly [3, 4]”上不存在屬性“push”。
arr.push(5);
因為使用了 const 斷言，因此數(shù)組現(xiàn)在是一個只讀元組，其內(nèi)容無法更改，并且嘗試這樣做會在開發(fā)過程中導(dǎo)致錯誤。
如果嘗試在不使用 const 斷言的情況下調(diào)用 sum 函數(shù)，就會得到一個錯誤：
function?sum(a:?number,?b:?number)?{
??return?a?+?b;
}
//?相當(dāng)于?const?arr:?readonly?[3,?4]
const?arr?=?[3,?4];
//?擴(kuò)張參數(shù)必須具有元組類型或傳遞給 rest 參數(shù)。
console.log(sum(...arr));?//?????7
TypeScript 警告我們，沒有辦法知道 arr 變量的內(nèi)容在其聲明和調(diào)用 sum() 函數(shù)之間沒有變化。
如果不喜歡使用 TypeScript 中的枚舉，也可以使用 const 斷言作為枚舉的替代品：
//?相當(dāng)于?const?Pages:?{readonly?home:?'/';?readonly?about:?'/about'...}
export?const?Pages?=?{
??home:?'/',
??about:?'/about',
??contacts:?'/contacts',
}?as?const;
如果嘗試更改對象的任何屬性或添加新屬性，就會收到錯誤消息：
//?相當(dāng)于?const?Pages:?{readonly?home:?'/';?readonly?about:?'/about'...}
export?const?Pages?=?{
??home:?'/',
??about:?'/about',
??contacts:?'/contacts',
}?as?const;
//?無法分配到?"about"?，因為它是只讀屬性。
Pages.about?=?'hello';
//?類型“{ readonly home:?"/"; readonly about:?"/about"; readonly contacts:?"/contacts";?}”上不存在屬性“test”。
Pages.test?=?'hello';
需要注意，const 上下文不會將表達(dá)式轉(zhuǎn)換為完全不可變的。來看例子：
const?arr?=?['/about',?'/contacts'];
//?相當(dāng)于?const?Pages:?{readonly?home:?'/',?menu:?string[]}
export?const?Pages?=?{
??home:?'/',
??menu:?arr,
}?as?const;
Pages.menu.push('/test');?//???
這里，menu 屬性引用了一個外部數(shù)組，我們可以更改其內(nèi)容。如果在對象上就地定義了數(shù)組，我們將無法更改其內(nèi)容。
//?相當(dāng)于?const?Pages:?{readonly?home:?'/',?readonly?menu:?string[]}
export?const?Pages?=?{
??home:?'/',
??menu:?['/about'],
}?as?const;
//?類型“readonly ["/about"]”上不存在屬性“push”。
Pages.menu.push('/test');
（5）非空斷言
在 TypeScript 中感嘆號 ( ! ) 運算符可以使編譯器忽略一些錯誤，下面就來看看它有哪些實際的用途的以及何時使用。
① 非空斷言運算符
感嘆號運算符稱為非空斷言運算符，添加此運算符會使編譯器忽略undefined和null類型。來看例子：
const?parseValue?=?(value:?string)?=>?{
????//?...
};
const?prepareValue?=?(value?:?string)?=>?{
????//?...
????parseValue(value);
};
對于 prepareValue 方法的 value 參數(shù)，TypeScript就會報出以下錯誤：
類型“string | undefined”的參數(shù)不能賦給類型“string”的參數(shù)。
不能將類型“undefined”分配給類型“string”。
因為我們希望 prepareValue 函數(shù)中的 value 是 undefined 或 string，但是我們將它傳遞給了 parseValue 函數(shù)，它的參數(shù)只能是 string。所以就報了這個錯誤。
但是，在某些情況下，我們可以確定 value 不會是 undefined，而這就是需要非空斷言運算符的情況：
const?parseValue?=?(value:?string)?=>?{
??//?...
};
const?prepareValue?=?(value?:?string)?=>?{
??//?...
??parseValue(value!);
};
這樣就不會報錯了。但是，在使用它時應(yīng)該非常小心，因為如果 value 的值是undefined ，它可能會導(dǎo)致意外的錯誤。
② 使用示例
既然知道了非空斷言運算符，下面就來看幾個真實的例子。
在列表中搜索是否存在某個項目：
interface?Config?{
??id:?number;
??path:?string;
}
const?configs:?Config[]?=?[
??{
????id:?1,
????path:?"path/to/config/1",
??},
??{
????id:?2,
????path:?"path/to/config/2",
??},
];
const?getConfig?=?(id:?number)?=>?{
??return?configs.find((config)?=>?config.id?===?id);
};
const?config?=?getConfig(1);
由于搜索的內(nèi)容不一定存在于列表中，所以 config 變量的類型是 Config | undefined，我們就可以使用可以使用費控斷言運算符告訴 TypeScript，config 應(yīng)該是存在的，因此不必假設(shè)它是 undefined。
const?getConfig?=?(id:?number)?=>?{
??return?configs.find((config)?=>?config.id?===?id)!;
};
const?config?=?getConfig(1);
這時，config 變量的類型就是 Config。這時再從 config 中獲取任何屬性時，就不需要再檢查它是否存在了。
再來看一個例子，React 中的 Refs 提供了一種訪問 DOM 節(jié)點或 React 元素的方法：
const?App?=?()?=>?{
??const?ref?=?useRef<HTMLDivElement>(null);
??const?handleClick?=?()?=>?{
????if(ref.current)?{
??????console.log(ref.current.getBoundingClientRect());
????}
??};
??return?(
????<div?className="App"?ref={ref}>
??????<button?onClick={handleClick}>Click</button>
????</div>
??);
};
這里創(chuàng)建了一個簡單的組件，它可以訪問 class 為 App 的 DOM 節(jié)點。組件中有一個按鈕，當(dāng)點擊該按鈕時，會顯示元素的大小以及其在視口中的位置。我們可以確定被訪問的元素是在點擊按鈕后掛載的，所以可以在 TypeScript 中添加非空斷言運算符表示這個元素是一定存在的：
const?App?=?()?=>?{
??const?handleClick?=?()?=>?{
????console.log(ref.current!.getBoundingClientRect());
??};
};
當(dāng)使用非空斷言運算符時，就表示告訴TypeScript，我比你更了解這個代碼邏輯，會為此負(fù)責(zé)，所以我們需要充分了解自己的代碼之后再確定是否要使用這個運算符。否則，如果由于某種原因斷言不正確，則會發(fā)生運行時錯誤。
以上就是你需要知道的TypeScript高級類型總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于TypeScript高級類型的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
二維碼作為現(xiàn)代信息傳遞的重要工具,其黑白色調(diào)一直是其標(biāo)志性特征,然而,有時我們可能希望個性化定制二維碼的顏色,以適應(yīng)特定設(shè)計需求或提高可識別性,在這篇文章中,我們將深入探討如何使用Canvas技術(shù)修改二維碼的顏色,為二維碼添加更多創(chuàng)意和個性2023-11-11
微信小程序 自定義復(fù)選框?qū)崿F(xiàn)代碼實例
這篇文章主要介紹了微信小程序 自定義復(fù)選框?qū)崿F(xiàn)代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
javascript 實現(xiàn)頁面加載進(jìn)度條代碼
javascript 實現(xiàn)頁面加載進(jìn)度條代碼，需要的朋友可以參考下。2010-04-04
實現(xiàn)div內(nèi)部滾動條滾動到底部和頂部的代碼
下面筆者就為大家分享一篇實現(xiàn)div內(nèi)部滾動條滾動到底部和頂部的代碼，代碼簡潔，具有很好的參考價值，希望對大家有所幫助2017-11-11
這篇文章主要介紹了JS擴(kuò)展方法,實例分析了javascript擴(kuò)展方法的原理與各種常用的擴(kuò)展應(yīng)用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了javascript實現(xiàn)添加附件功能的方法，在我們編輯信息時，有時候需要附加文件、圖片實現(xiàn)上傳功能，通過本文了解javascript是如何實現(xiàn)附加功能的，請閱讀。2015-11-11
JavaScript中無法通過div.style.left獲取值的解決方法
這篇文章主要介紹了JavaScript中無法通過div.style.left獲取值的問題分析及解決方法,需要的朋友可以參考下2017-02-02
引入 TypeScript 到 Electron 項目可以幫助你捕捉錯誤并在編寫代碼時提供更好的自動完成和文檔，這篇文章主要介紹了electron使用typescript的步驟,需要的朋友可以參考下2024-04-04
firefox下javascript實現(xiàn)高亮關(guān)鍵詞的方法
“點睛”的廣告代碼，很牛B，本想從中找出在FireFox下如何實現(xiàn)findText及pasteHTML類似效果的，我看了大半天，楞是沒有看出個所以然來！還是自己慢慢研究吧。2007-07-07
這篇文章主要為大家詳細(xì)介紹了如何運用js教你輕松制作html音樂播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09