typescript-expert - typescript-cheatsheet

TypeScript 速查表

类型基础

// Primitivesconstname:string='John'constage:number=30constisActive:boolean=trueconstnothing:null=nullconstnotDefined:undefined=undefined// Arraysconstnumbers:number[]=[1,2,3]conststrings:Array<string>=['a','b','c']// Tupleconsttuple:[string,number]=['hello',42]// Objectconstuser:{name:string;age:number}={name:'John',age:30}// Unionconstvalue:string|number='hello'// Literalconstdirection:'up'|'down'|'left'|'right'='up'// Any vs UnknownconstanyValue:any='anything'// ❌ AvoidconstunknownValue:unknown='safe'// ✅ Prefer, requires narrowing

类型别名与接口

// Type AliastypePoint={x:numbery:number}// Interface (preferred for objects)interfaceUser{id:stringname:stringemail?:string// OptionalreadonlycreatedAt:Date// Readonly}// ExtendinginterfaceAdminextendsUser{permissions:string[]}// IntersectiontypeAdminUser=User&{permissions:string[]}

泛型

// Generic functionfunctionidentity<T>(value:T):T{returnvalue}// Generic with constraintfunctiongetLength<Textends{length:number}>(item:T):number{returnitem.length}// Generic interfaceinterfaceApiResponse<T>{data:Tstatus:numbermessage:string}// Generic with defaulttypeContainer<T=string>={value:T}// Multiple genericsfunctionmerge<T,U>(obj1:T,obj2:U):T&U{return{...obj1,...obj2}}

工具类型

interfaceUser{id:stringname:stringemail:stringage:number}// Partial - all optionaltypePartialUser=Partial<User>// Required - all requiredtypeRequiredUser=Required<User>// Readonly - all readonlytypeReadonlyUser=Readonly<User>// Pick - select propertiestypeUserName=Pick<User,'id'|'name'>// Omit - exclude propertiestypeUserWithoutEmail=Omit<User,'email'>// Record - key-value maptypeUserMap=Record<string,User>// Extract - extract from uniontypeStringOrNumber=string|number|booleantypeOnlyStrings=Extract<StringOrNumber,string>// Exclude - exclude from uniontypeNotString=Exclude<StringOrNumber,string>// NonNullable - remove null/undefinedtypeMaybeString=string|null|undefinedtypeDefinitelyString=NonNullable<MaybeString>// ReturnType - get function return typefunctiongetUser(){return{name:'John'}}typeUserReturn=ReturnType<typeofgetUser>// Parameters - get function parameterstypeGetUserParams=Parameters<typeofgetUser>// Awaited - unwrap PromisetypeResolvedUser=Awaited<Promise<User>>

条件类型

// Basic conditionaltypeIsString<T>=Textendsstring?true:false// Infer keywordtypeUnwrapPromise<T>=TextendsPromise<inferU>?U:T// Distributive conditionaltypeToArray<T>=Textendsany?T[]:nevertypeResult=ToArray<string|number>// string[] | number[]// NonDistributivetypeToArrayNonDist<T>=[T]extends[any]?T[]:never

模板字面量类型

typeColor='red'|'green'|'blue'typeSize='small'|'medium'|'large'// CombinetypeColorSize=`${Color}-${Size}`// 'red-small' | 'red-medium' | 'red-large' | ...// Event handlerstypeEventName='click'|'focus'|'blur'typeEventHandler=`on${Capitalize<EventName>}`// 'onClick' | 'onFocus' | 'onBlur'

映射类型

// Basic mapped typetypeOptional<T>={[KinkeyofT]?:T[K]}// With key remappingtypeGetters<T>={[KinkeyofTas`get${Capitalize<string&K>}`]:()=>T[K]}// Filter keystypeOnlyStrings<T>={[KinkeyofTasT[K]extendsstring?K:never]:T[K]}

类型守卫

// typeof guardfunctionprocess(value:string|number){if(typeofvalue==='string'){returnvalue.toUpperCase()// string}returnvalue.toFixed(2)// number}// instanceof guardclassDog{bark(){}}classCat{meow(){}}functionmakeSound(animal:Dog|Cat){if(animalinstanceofDog){animal.bark()}else{animal.meow()}}// in guardinterfaceBird{fly():void}interfaceFish{swim():void}functionmove(animal:Bird|Fish){if('fly'inanimal){animal.fly()}else{animal.swim()}}// Custom type guardfunctionisString(value:unknown):valueisstring{returntypeofvalue==='string'}// Assertion functionfunctionassertIsString(value:unknown):assertsvalueisstring{if(typeofvalue!=='string'){thrownewError('Not a string')}}

可辨识联合（Discriminated Unions）

// With type discriminanttypeSuccess<T>={type:'success';data:T}typeError={type:'error';message:string}typeLoading={type:'loading'}typeState<T>=Success<T>|Error|Loadingfunctionhandle<T>(state:State<T>){switch(state.type){case'success':returnstate.data// Tcase'error':returnstate.message// stringcase'loading':returnnull}}// Exhaustive checkfunctionassertNever(value:never):never{thrownewError(`Unexpected value:${value}`)}

品牌类型（Branded Types）

// Create branded typetypeBrand<K,T>=K&{__brand:T}typeUserId=Brand<string,'UserId'>typeOrderId=Brand<string,'OrderId'>// Constructor functionsfunctioncreateUserId(id:string):UserId{returnidasUserId}functioncreateOrderId(id:string):OrderId{returnidasOrderId}// Usage - prevents mixingfunctiongetOrder(orderId:OrderId,userId:UserId){}constuserId=createUserId('user-123')constorderId=createOrderId('order-456')getOrder(orderId,userId)// ✅ OK// getOrder(userId, orderId) // ❌ Error - types don't match

模块声明

// Declare module for untyped packagedeclaremodule'untyped-package'{exportfunctiondoSomething():voidexportconstvalue:string}// Augment existing moduledeclaremodule'express'{interfaceRequest{user?:{id:string}}}// Declare globaldeclareglobal{interfaceWindow{myGlobal:string}}

TSConfig 要点

{"compilerOptions":{// Strictness"strict":true,"noUncheckedIndexedAccess":true,"noImplicitOverride":true,// Modules"module":"ESNext","moduleResolution":"bundler","esModuleInterop":true,// Output"target":"ES2022","lib":["ES2022","DOM"],// Performance"skipLibCheck":true,"incremental":true,// Paths"baseUrl":".","paths":{"@/*":["./src/*"]}}}

最佳实践

// ✅ Prefer interface for objectsinterfaceUser{name:string}// ✅ Use const assertionsconstroutes=['home','about']asconst// ✅ Use satisfies for validationconstconfig={api:'https://api.example.com'}satisfies Record<string,string>// ✅ Use unknown over anyfunctionparse(input:unknown){if(typeofinput==='string'){returnJSON.parse(input)}}// ✅ Explicit return types for public APIsexportfunctiongetUser(id:string):User|null{// ...}// ❌ Avoidconstdata:any=fetchData()data.anything.goes.wrong// No type safety