TypeScript?類型收窄的具體使用
更新時間：2026年03月18日 09:29:41 作者：兆子龍
類型收窄是TypeScript類型系統(tǒng)中最為核心和強大的特性之一,本文主要介紹了TypeScript?類型收窄的具體使用,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧
一、類型收窄概述
類型收窄是 TypeScript 類型系統(tǒng)中最為核心和強大的特性之一。它允許 TypeScript 在特定的代碼路徑中，根據條件判斷自動縮小變量的類型范圍，從而提供更精確的類型信息和更安全的類型檢查。
在日常開發(fā)中，我們經常需要處理聯(lián)合類型、可選屬性、字面量類型等復雜類型場景。如果沒有類型收窄，我們不得不在每次使用時都進行類型斷言，這不僅繁瑣，還容易引入運行時錯誤。類型收窄機制讓 TypeScript 能夠智能地推斷變量在特定上下文中的具體類型，大大提升了開發(fā)效率和代碼質量。
理解類型收窄不僅能幫助你寫出更簡潔的代碼，還能讓你在面對復雜類型時游刃有余。本文將從基礎概念出發(fā)，深入講解各種類型收窄技巧，并通過大量實例幫助你建立完整的類型收窄知識體系。
二、類型守衛(wèi)與類型收窄
2.1 什么是類型守衛(wèi)
類型守衛(wèi)（Type Guard）是一種特殊的表達式或函數(shù)，它能夠告訴 TypeScript 編譯器某個變量在特定條件下具有更具體的類型。類型守衛(wèi)是實現(xiàn)類型收窄的主要手段。
TypeScript 內置了多種類型守衛(wèi)機制，包括 typeof 操作符、instanceof 操作符、in 操作符等。同時，我們也可以通過自定義類型守衛(wèi)函數(shù)來創(chuàng)建更復雜的類型判斷邏輯。
// typeof 類型守衛(wèi)
function processValue(value: string | number) {
if (typeof value === 'string') {
// 在這個分支中，value 被收窄為 string 類型
return value.toUpperCase();
} else {
// 在這個分支中，value 被收窄為 number 類型
return value * 2;
}
}
// instanceof 類型守衛(wèi)
class Dog {
bark() {
console.log('Woof!');
}
}
class Cat {
meow() {
console.log('Meow!');
}
}
function makeSound(animal: Dog | Cat) {
if (animal instanceof Dog) {
animal.bark();
} else {
animal.meow();
}
}
2.2 自定義類型守衛(wèi)
當內置的類型守衛(wèi)無法滿足需求時，我們可以創(chuàng)建自定義的類型守衛(wèi)函數(shù)。自定義類型守衛(wèi)的返回值類型使用 value is Type 的形式，告訴 TypeScript 返回 true 時變量的具體類型。
interface Fish {
swim(): void;
hasFins: boolean;
}
interface Bird {
fly(): void;
hasWings: boolean;
}
function isFish(animal: Fish | Bird): animal is Fish {
return (animal as Fish).swim !== undefined;
}
function handleAnimal(animal: Fish | Bird) {
if (isFish(animal)) {
// animal 被收窄為 Fish 類型
animal.swim();
console.log('Has fins:', animal.hasFins);
} else {
// animal 被收窄為 Bird 類型
animal.fly();
console.log('Has wings:', animal.hasWings);
}
}
自定義類型守衛(wèi)在處理復雜類型判斷時非常有用，可以將類型判斷邏輯封裝成可復用的函數(shù)，使代碼更加清晰和易于維護。
2.3 類型守衛(wèi)的組合使用
在實際開發(fā)中，我們經常需要組合使用多個類型守衛(wèi)來處理復雜的類型判斷場景。TypeScript 能夠正確地追蹤多個類型守衛(wèi)的組合效果，實現(xiàn)多層類型收窄。
type Shape =
| { kind: 'circle'; radius: number }
| { kind: 'square'; side: number }
| { kind: 'rectangle'; width: number; height: number };
function calculateArea(shape: Shape): number {
if (shape.kind === 'circle') {
// 收窄為 circle
return Math.PI * shape.radius ** 2;
}
if (shape.kind === 'square') {
// 收窄為 square
return shape.side ** 2;
}
// 收窄為 rectangle
return shape.width * shape.height;
}
// 組合使用多個條件
function describeShape(shape: Shape): string {
if (shape.kind === 'circle' && shape.radius > 10) {
return 'Large circle';
}
if (shape.kind === 'square' || shape.kind === 'rectangle') {
if ('side' in shape) {
return 'Square with side ' + shape.side;
}
return `Rectangle ${shape.width}x${shape.height}`;
}
return 'Unknown shape';
}
三、可辨識聯(lián)合與類型收窄
3.1 可辨識聯(lián)合模式
可辨識聯(lián)合（Discriminated Union）是 TypeScript 中處理相關類型的一種強大模式。它通過一個共有的字面量屬性（可辨識屬性）來區(qū)分聯(lián)合中的不同成員，TypeScript 可以根據這個屬性的值進行精確的類型收窄。
// 定義可辨識聯(lián)合類型
type PaymentStatus =
| { status: 'pending' }
| { status: 'processing' }
| { status: 'success'; transactionId: string }
| { status: 'failed'; errorCode: number; message: string };
// 處理支付狀態(tài)
function handlePayment(status: PaymentStatus) {
switch (status.status) {
case 'pending':
console.log('Payment is pending...');
break;
case 'processing':
console.log('Payment is being processed...');
break;
case 'success':
// status 被收窄為 { status: 'success'; transactionId: string }
console.log('Payment successful! Transaction ID:', status.transactionId);
break;
case 'failed':
// status 被收窄為 { status: 'failed'; errorCode: number; message: string }
console.log('Payment failed:', status.message, 'Code:', status.errorCode);
break;
}
}
可辨識聯(lián)合模式的核心在于可辨識屬性的選擇。這個屬性應該是每個類型成員都擁有的字面量類型，且不同成員的值應該互不相同。這樣 TypeScript 才能準確地區(qū)分和收窄類型。
3.2 窮盡性檢查
可辨識聯(lián)合的一個強大特性是支持窮盡性檢查（Exhaustiveness Checking）。當我們在 switch 語句或 if-else 鏈中處理所有可能的類型成員時，TypeScript 能夠確保我們不會遺漏任何情況。
type HTTPMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
function handleRequest(method: HTTPMethod, url: string, body?: unknown) {
switch (method) {
case 'GET':
return fetch(url, { method: 'GET' });
case 'POST':
return fetch(url, {
method: 'POST',
body: body ? JSON.stringify(body) : undefined
});
case 'PUT':
return fetch(url, {
method: 'PUT',
body: body ? JSON.stringify(body) : undefined
});
case 'DELETE':
return fetch(url, { method: 'DELETE' });
default:
// 窮盡性檢查：如果遺漏了任何情況，這里會報錯
const _exhaustive: never = method;
throw new Error(`Unknown HTTP method: ${_exhaustive}`);
}
}
當添加新的 HTTPMethod 類型時，default 分支會產生類型錯誤，提示開發(fā)者需要處理新的情況。這種機制能夠有效防止遺漏處理新添加的類型成員。
3.3 嵌套可辨識聯(lián)合
復雜的業(yè)務場景往往需要使用嵌套的可辨識聯(lián)合來處理多層次的數(shù)據結構。TypeScript 能夠正確地追蹤多層嵌套的類型收窄。
type APIResponse<T> =
| { success: true; data: T }
| { success: false; error: { code: number; message: string } };
type User = {
id: number;
name: string;
email: string;
};
type Order = {
orderId: string;
items: Array<{ productId: string; quantity: number }>;
total: number;
};
type UserResponse = APIResponse<User>;
type OrderResponse = APIResponse<Order>;
function handleResponse<T>(
response: APIResponse<T>,
onSuccess: (data: T) => void,
onError: (error: { code: number; message: string }) => void
) {
if (response.success) {
// response 被收窄為 { success: true; data: T }
onSuccess(response.data);
} else {
// response 被收窄為 { success: false; error: { code: number; message: string } }
onError(response.error);
}
}
// 使用示例
const userResponse: UserResponse = {
success: true,
data: { id: 1, name: 'John', email: 'john@example.com' }
};
handleResponse(
userResponse,
(user) => console.log('User:', user.name),
(error) => console.error('Error:', error.message)
);
四、類型謂詞與類型斷言
4.1 類型謂詞詳解
類型謂詞（Type Predicate）是自定義類型守衛(wèi)的核心語法，形式為 parameterName is Type。它允許我們精確地控制 TypeScript 如何收窄參數(shù)的類型。
interface Admin {
role: 'admin';
permissions: string[];
}
interface User {
role: 'user';
username: string;
}
interface Guest {
role: 'guest';
visitCount: number;
}
type AuthenticatedUser = Admin | User | Guest;
// 類型謂詞函數(shù)
function isAdmin(user: AuthenticatedUser): user is Admin {
return user.role === 'admin';
}
function isUser(user: AuthenticatedUser): user is User {
return user.role === 'user';
}
function isGuest(user: AuthenticatedUser): user is Guest {
return user.role === 'guest';
}
// 使用類型謂詞
function getUserPermissions(user: AuthenticatedUser): string[] {
if (isAdmin(user)) {
// user 被收窄為 Admin
return user.permissions;
}
if (isUser(user)) {
// user 被收窄為 User
return []; // 普通用戶沒有特殊權限
}
// user 被收窄為 Guest
return [];
}
類型謂詞的強大之處在于它可以表達復雜的類型判斷邏輯，而不僅僅局限于簡單的屬性檢查。這使得我們可以創(chuàng)建高度定制化的類型守衛(wèi)。
4.2 類型斷言的使用場景
類型斷言（Type Assertion）允許我們顯式地告訴 TypeScript 某個值的類型。與類型收窄不同，類型斷言是開發(fā)者主動告訴編譯器「我知道這個類型是什么」，而不是讓編譯器通過代碼邏輯推斷。
// 使用 as 語法進行類型斷言
const myCanvas = document.getElementById('myCanvas') as HTMLCanvasElement;
const ctx = myCanvas.getContext('2d'); // 現(xiàn)在可以訪問 Canvas API
// 使用尖括號語法（僅在 .tsx 文件外可用）
const myInput = document.getElementById('myInput') as HTMLInputElement;
const value = myInput.value;
// 非空斷言
const elements = document.querySelectorAll('.item')!;
elements.forEach(el => el.textContent);
// 類型斷言 vs 類型守衛(wèi)
interface APIResponse {
data: unknown;
}
function handleResponse(response: APIResponse) {
// 類型斷言：開發(fā)者確信 data 是 User 類型
const user = response.data as User;
console.log(user.name);
// 類型守衛(wèi)：通過代碼邏輯驗證類型
if (isUser(response.data)) {
console.log(response.data.name); // TypeScript 已知這是 User
}
}
需要注意的是，類型斷言是信任開發(fā)者的，如果斷言錯誤，可能導致運行時錯誤。因此，應該優(yōu)先使用類型守衛(wèi)進行類型收窄，只有在確實知道類型的情況下才使用類型斷言。
4.3 雙重斷言與類型斷言的風險
在某些情況下，我們需要使用雙重斷言來繞過 TypeScript 的類型檢查。但這種做法存在風險，應該謹慎使用。
// 雙重斷言：從 A 類型斷言到 unknown，再斷言到目標類型
const value = someValue as unknown as TargetType;
// 示例：處理 DOM 元素
const element = document.getElementById('my-element');
// 正常情況
const input = element as HTMLInputElement;
// 雙重斷言：當你確定元素是特定類型，但 TypeScript 無法推斷時
const widget = element as unknown as CustomWidget;
// 使用雙重斷言的風險
// 如果元素實際上不是 CustomWidget 類型，運行時可能出錯
雙重斷言應該作為最后手段使用。在使用之前，應該考慮是否有更好的類型設計方式，或者是否可以通過類型守衛(wèi)來實現(xiàn)類型收窄。
五、索引訪問類型與映射類型
5.1 索引訪問類型
索引訪問類型（Indexed Access Types）允許我們通過索引獲取類型的成員，從而創(chuàng)建更靈活的類型定義。
interface Person {
name: string;
age: number;
address: {
city: string;
zip: string;
};
}
// 獲取單個屬性類型
type PersonName = Person['name']; // string
type PersonAge = Person['age']; // number
// 獲取嵌套屬性類型
type PersonCity = Person['address']['city']; // string
// 使用聯(lián)合類型作為索引
type PersonAddressKeys = Person['address'][keyof Person['address']]; // string
// 獲取數(shù)組元素類型
type StringArray = string[];
type StringArrayElement = StringArray[number]; // string
// 在函數(shù)中使用索引訪問類型
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}
const person: Person = {
name: 'Alice',
age: 30,
address: { city: 'NYC', zip: '10001' }
};
const name = getProperty(person, 'name'); // string
const city = getProperty(person, 'address'); // { city: string; zip: string }
5.2 映射類型
映射類型（Mapped Types）允許我們基于現(xiàn)有類型創(chuàng)建新類型，對類型的每個屬性進行轉換。
interface Original {
id: number;
name: string;
age: number;
email: string;
}
// 將所有屬性變?yōu)榭蛇x
type Partial<T> = {
[P in keyof T]?: T[P];
};
type PartialPerson = Partial<Person>;
// { id?: number; name?: string; age?: number; email?: string }
// 將所有屬性變?yōu)橹蛔x
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};
type ReadonlyPerson = Readonly<Person>;
// { readonly id: number; readonly name: string; ... }
// 將所有屬性變?yōu)榭蛇x且只讀
type OptionalReadonly<T> = {
readonly [P in keyof T]?: T[P];
};
// 映射類型的內置實現(xiàn)
type Pick<T, K extends keyof T> = {
[P in K]: T[P];
};
type PersonBasic = Pick<Person, 'id' | 'name'>;
// { id: number; name: string }
type Omit<T, K extends keyof T> = {
[P in keyof T as P extends K ? never : P]: T[P];
};
type PersonWithoutEmail = Omit<Person, 'email'>;
// { id: number; name: string; age: number }
5.3 條件類型與分布式特性
條件類型（Conditional Types）是 TypeScript 類型系統(tǒng)中最靈活的特性之一，它允許我們根據條件選擇不同的類型。
// 條件類型基本語法
type IsString<T> = T extends string ? true : false;
type Test1 = IsString<string>; // true
type Test2 = IsString<number>; // false
// 分布式條件類型
// 當 T 是聯(lián)合類型時，條件類型會分別應用于每個成員
type ToArray<T> = T[];
type Test3 = ToArray<string | number>; // string[] | number[]
// 正確實現(xiàn)：分布式
type ToArrayDistributed<T> = T extends any ? T[] : never;
type Test4 = ToArrayDistributed<string | number>; // string[] | number[]
// 實際應用：根據類型選擇不同的處理方式
type Response<T> = T extends string
? { type: 'text'; content: T }
: { type: 'binary'; data: T };
type TextResponse = Response<string>;
// { type: 'text'; content: string }
type BinaryResponse = Response<Blob>;
// { type: 'binary'; data: Blob }
六、模板字面量類型與類型收窄
6.1 模板字面量類型基礎
TypeScript 4.1 引入了模板字面量類型（Template Literal Types），允許我們在類型級別使用模板字面量語法。這為類型系統(tǒng)帶來了很大的字符串處理能力。
// 基本模板字面量類型
type Greeting = `Hello, ${string}`;
// 匹配任何以 "Hello, " 開頭的字符串
type Email = `${string}@${string}.${string}`;
// 匹配基本的 email 格式
// 使用聯(lián)合類型
type EventName = `on${'Click' | 'Hover' | 'Focus'}`;
// "onClick" | "onHover" | "onFocus"
// 模板字面量類型與收窄
type CSSProperty =
| `${'margin' | 'padding'}-${'top' | 'right' | 'bottom' | 'left'}`;
// "margin-top" | "margin-right" | ... | "padding-left"
function setCSSProperty(prop: CSSProperty, value: string) {
// 在函數(shù)內部，prop 被收窄為具體的 CSS 屬性名
document.documentElement.style.setProperty(`--${prop}`, value);
}
setCSSProperty('margin-top', '10px'); // OK
setCSSProperty('padding-left', '20px'); // OK
// setCSSProperty('border-radius', '5px'); // Error
6.2 模板字面量類型的高級用法
模板字面量類型可以與條件類型、映射類型等組合使用，創(chuàng)建復雜的類型轉換邏輯。
// 使用 infer 進行類型推斷
type GetReturnType<T> = T extends (...args: any[]) => infer R ? R : never;
type Func1 = () => number;
type Func2 = (x: string) => boolean;
type Func3 = (a: number, b: string) => { name: string };
type R1 = GetReturnType<Func1>; // number
type R2 = GetReturnType<Func2>; // boolean
type R3 = GetReturnType<Func3>; // { name: string }
// 模板字面量類型中的 infer
type ExtractEventParams<T> = T extends `on${infer Event}` ? Event : never;
type Events = 'onClick' | 'onHover' | 'onSubmit' | 'customEvent';
type EventNames = ExtractEventParams<Events>;
// "Click" | "Hover" | "Submit" | "customEvent"
// 組合使用：創(chuàng)建完整的 API 路徑類型
type HTTPMethod = 'get' | 'post' | 'put' | 'delete';
type BasePath = '/api' | '/v2';
type Resource = 'users' | 'posts' | 'comments';
type APIEndpoint = `${Uppercase<HTTPMethod>} ${BasePath}/${Resource}`;
// "GET /api/users" | "GET /api/posts" | ... | "DELETE /v2/comments"
6.3 字符串類型收窄的實際應用
模板字面量類型在處理字符串字面量類型時特別有用，可以實現(xiàn)精確的字符串類型收窄。
// 狀態(tài)機類型
type State =
| { kind: 'idle' }
| { kind: 'loading' }
| { kind: 'success'; data: unknown }
| { kind: 'error'; message: string };
// 使用模板字面量類型創(chuàng)建 Action 類型
type Action =
| { type: 'FETCH_START' }
| { type: 'FETCH_SUCCESS'; payload: unknown }
| { type: 'FETCH_ERROR'; error: string }
| { type: 'RESET' };
// Action 處理函數(shù)
function reducer(state: State, action: Action): State {
switch (action.type) {
case 'FETCH_START':
return { kind: 'loading' };
case 'FETCH_SUCCESS':
return { kind: 'success', data: action.payload };
case 'FETCH_ERROR':
return { kind: 'error', message: action.error };
case 'RESET':
return { kind: 'idle' };
default:
// 窮盡性檢查
const _: never = action;
return state;
}
}
七、類型收窄在泛型中的應用
7.1 泛型約束與類型收窄
泛型與類型收窄的結合是 TypeScript 類型系統(tǒng)的高級應用。通過泛型約束和類型守衛(wèi)，我們可以創(chuàng)建靈活且類型安全的通用函數(shù)。
interface HasId {
id: number;
}
interface HasName {
name: string;
}
type WithId<T> = T extends HasId ? T : never;
type WithName<T> = T extends HasName ? T : never;
// 條件類型實現(xiàn)類型收窄
function processItem<T>(item: T): T extends HasId ? T : never {
if ('id' in item) {
return item as T extends HasId ? T : never;
}
throw new Error('Item must have id');
}
// 使用泛型約束
function getId<T extends HasId>(item: T): number {
return item.id;
}
function getName<T extends HasName>(item: T): string {
return item.name;
}
// 泛型函數(shù)中的類型收窄
function firstItem<T>(arr: T[]): T | undefined {
return arr[0];
}
function processArray<T extends HasId>(arr: T[]): number[] {
const first = firstItem(arr);
if (first) {
// first 被收窄為 T & HasId
return [first.id];
}
return [];
}
7.2 多泛型參數(shù)的類型收窄
當函數(shù)有多個泛型參數(shù)時，類型收窄變得更加復雜。我們需要考慮不同參數(shù)之間的類型關系。
// 關聯(lián)類型的類型收窄
function pair<T, U extends T>(first: T, second: U): [T, U] {
return [first, second];
}
const p1 = pair('hello', 'world'); // [string, string]
const p2 = pair(42, 100); // [number, number]
// const p3 = pair('hello', 42); // Error: second must extend first
// 使用類型守衛(wèi)進行多泛型收窄
function isSameType<T, U>(a: T, b: U): a is T & U {
return typeof a === typeof b;
}
function merge<T, U>(a: T, b: U): T & U {
if (isSameType(a, b)) {
// a 和 b 被收窄為相同類型
return { ...a, ...b } as T & U;
}
return { ...a, ...b } as T & U;
}
7.3 泛型工廠函數(shù)中的類型收窄
泛型工廠函數(shù)是創(chuàng)建類型安全對象的強大工具，結合類型收窄可以實現(xiàn)復雜的類型轉換邏輯。
// 工廠函數(shù)模式
interface Factory<T> {
create(): T;
}
class StringFactory implements Factory<string> {
create() {
return 'default string';
}
}
class NumberFactory implements Factory<number> {
create() {
return 42;
}
}
function createFactory<T>(factory: Factory<T>): T {
return factory.create();
}
// 使用泛型工廠
const str = createFactory(new StringFactory()); // string
const num = createFactory(new NumberFactory()); // number
// 泛型與條件類型
type FactoryReturn<T> = T extends Factory<infer R> ? R : never;
type StringReturn = FactoryReturn<StringFactory>; // string
type NumberReturn = FactoryReturn<NumberFactory>; // number
八、類型收窄的最佳實踐
8.1 何時使用類型收窄
類型收窄應該成為 TypeScript 開發(fā)的日常實踐。以下是一些適合使用類型收窄的場景。
處理聯(lián)合類型時，類型收窄是最自然的選擇。無論是可選屬性、可空值還是多態(tài)類型，類型收窄都能提供精確的類型信息。
// 處理可選屬性
interface User {
name: string;
email?: string;
}
function sendEmail(user: User) {
if (user.email) {
// user.email 被收窄為 string（不再是 string | undefined）
sendToAddress(user.email);
}
}
// 處理 null | undefined
function processValue(value: string | null | undefined) {
if (value != null) {
// value 被收窄為 string
console.log(value.toUpperCase());
}
}
8.2 避免過度類型斷言
雖然類型斷言是 TypeScript 的重要特性，但應該優(yōu)先使用類型收窄。類型斷言相當于告訴編譯器「我知道我在做什么」，這意味著放棄了 TypeScript 的類型檢查。
// 不推薦：過度使用類型斷言
function badExample(value: unknown) {
const str = value as string; // 危險！如果 value 不是 string，運行時可能出錯
return str.toUpperCase();
}
// 推薦：使用類型守衛(wèi)
function goodExample(value: unknown) {
if (typeof value === 'string') {
return value.toUpperCase();
}
return 'Not a string';
}
// 如果必須使用類型斷言，使用類型斷言函數(shù)封裝
function assertString(value: unknown): asserts value is string {
if (typeof value !== 'string') {
throw new Error('Expected string');
}
}
function anotherExample(value: unknown) {
assertString(value);
// 現(xiàn)在 value 被收窄為 string
return value.toUpperCase();
}
8.3 利用類型系統(tǒng)發(fā)現(xiàn)潛在問題
類型收窄不僅是一種編碼技巧，更是一種發(fā)現(xiàn)潛在問題的工具。當 TypeScript 無法正確收窄類型時，往往意味著代碼中存在設計問題或邏輯漏洞。
// TypeScript 無法收窄時，可能需要重新設計類型
type Response<T> =
| { success: true; data: T }
| { success: false; error: string };
function handleResponse<T>(response: Response<T>) {
if (response.success) {
return response.data;
}
// 在這里，response 被收窄為 { success: false; error: string }
// 如果忘記處理 error 情況，TypeScript 不會報錯
// 但我們可以添加默認處理
throw new Error(response.error || 'Unknown error');
}
九、總結
類型收窄是 TypeScript 類型系統(tǒng)的核心特性，它讓我們能夠在代碼中實現(xiàn)精確的類型推斷和安全的類型檢查。從簡單的 typeof 檢查到復雜的可辨識聯(lián)合，從類型謂詞到模板字面量類型，TypeScript 提供了豐富的工具來處理各種類型場景。
掌握類型收窄不僅能寫出更安全的代碼，還能提升開發(fā)效率。當你熟悉了類型收窄的技巧后，你會發(fā)現(xiàn)處理復雜類型變得自然而直觀。同時，類型收窄也是理解 TypeScript 高級類型系統(tǒng)的基礎，對于深入學習 TypeScript 至關重要。
在實際開發(fā)中，應該養(yǎng)成使用類型收窄的習慣，優(yōu)先選擇類型守衛(wèi)而非類型斷言，讓 TypeScript 的類型系統(tǒng)為你的代碼保駕護航。
到此這篇關于TypeScript 類型收窄的具體使用的文章就介紹到這了,更多相關TypeScript 類型收窄內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
JavaScript分析、壓縮工具JavaScript Analyser
這篇文章主要介紹了JavaScript分析、壓縮工具JavaScript Analyser,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了JavaScript定時顯示廣告代碼分享,本文直接給出實現(xiàn)代碼,需要的朋友可以參考下2015-03-03
比較簡單實用的使用正則三種版本的js去空格處理方法...2007-11-11
JavaScript實現(xiàn)一鍵復制文本功能的示例代碼
這篇文章主要為大家介紹兩種javascript實現(xiàn)文本復制（將文本寫入剪貼板）的方法，文中的示例代碼講解詳細，大家可以根據需求特點選用2023-03-03
這篇文章主要介紹了詳解Webpack4多頁應用打包方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
js立即執(zhí)行函數(shù): (function ( ){})( ) 與 (function ( ){}( )) 有什么區(qū)別?
這篇文章主要介紹了js立即執(zhí)行函數(shù): (function ( ){})( ) 與 (function ( ){}( )) 有什么區(qū)別,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了js如何獲取url中"?"后面的字串,需要的朋友可以參考下2014-05-05
JS實現(xiàn)上傳圖片的三種方法并實現(xiàn)預覽圖片功能
在用戶注冊頁面，需要用戶在本地選擇一張圖片作為頭像，并同時預覽，實現(xiàn)思路有兩種，具體實現(xiàn)方法和實例代碼大家參考下本文2017-07-07
這篇文章主要為大家詳細介紹了javascript正則表達式，由淺入深的幫助大家學習正則表達式，感興趣的小伙伴們可以參考一下2016-03-03
JavaScript中的Window.open()用法示例詳解
這篇文章主要給大家介紹了關于JavaScript中Window.open()用法的相關資料,今天在項目中用到了彈出子窗口,就想到了用JavaScript實現(xiàn)的兩種方法,其中一個就是window.open(),需要的朋友可以參考下2023-07-07