Comprehensive TypeScript guidance covering compiler configuration, advanced types, utility types, type guards, strict mode workflows, and documentation patterns; use when configuring tsconfig, designing complex generics, making illegal states unrepresentable, fixing type errors, or writing testable and maintainable type-safe APIs.
Overall
score
99%
Does it follow best practices?
Validation for skill structure
Utilities for handling nullable types and promises.
Removes null and undefined from a type.
type MaybeString = string | null | undefined;
type DefiniteString = NonNullable<MaybeString>; // string
type MaybeUser = { name: string } | null | undefined;
type DefiniteUser = NonNullable<MaybeUser>; // { name: string }function processValue<T>(value: T): NonNullable<T> {
if (value === null || value === undefined) {
throw new Error('Value cannot be null or undefined');
}
return value;
}
// Filter nulls from arrays
function filterNulls<T>(arr: (T | null | undefined)[]): NonNullable<T>[] {
return arr.filter((item): item is NonNullable<T> =>
item !== null && item !== undefined
);
}Recursively unwraps Promise types.
type P1 = Promise<string>;
type R1 = Awaited<P1>; // string
type P2 = Promise<Promise<number>>;
type R2 = Awaited<P2>; // number (recursive unwrap)
type P3 = Promise<{ data: Promise<User> }>;
type R3 = Awaited<P3>; // { data: Promise<User> } (shallow unwrap)async function fetchUser(): Promise<{ id: string; name: string }> {
// Implementation
return { id: '1', name: 'John' };
}
type User = Awaited<ReturnType<typeof fetchUser>>;
// { id: string; name: string }type PromiseArray = Promise<User>[];
type ResolvedArray = Awaited<typeof Promise.all<PromiseArray>>;
// User[]
async function fetchAll<T>(
promises: Promise<T>[]
): Promise<Awaited<T>[]> {
return Promise.all(promises);
}String manipulation utilities.
type Greeting = 'hello world';
type Loud = Uppercase<Greeting>; // 'HELLO WORLD'
type Quiet = Lowercase<Greeting>; // 'hello world'
type Proper = Capitalize<Greeting>; // 'Hello world'
type Casual = Uncapitalize<'Hello'>; // 'hello'type HTTPMethod = 'get' | 'post' | 'put' | 'delete';
type UpperMethod = Uppercase<HTTPMethod>;
// 'GET' | 'POST' | 'PUT' | 'DELETE'
type EventName = 'click' | 'focus' | 'blur';
type HandlerName = `on${Capitalize<EventName>}`;
// 'onClick' | 'onFocus' | 'onBlur'type AsyncResult<T> = Promise<
| { success: true; data: T }
| { success: false; error: Error }
>;
async function safeAsync<T>(
promise: Promise<T>
): AsyncResult<T> {
try {
const data = await promise;
return { success: true, data };
} catch (error) {
return { success: false, error: error as Error };
}
}
// Extract successful data type
type SuccessData<T> = T extends { success: true; data: infer D }
? D
: never;
type UserData = Awaited<ReturnType<typeof fetchUser>>;type User = {
id: string;
name: string | null;
email?: string;
age: number | undefined;
};
type RequiredUser = {
[K in keyof User]-?: NonNullable<User[K]>
};
// { id: string; name: string; email: string; age: number }interface APIEndpoints {
getUser: () => Promise<User>;
getPosts: () => Promise<Post[]>;
getComments: (postId: string) => Promise<Comment[]>;
}
type ResolvedAPI = {
[K in keyof APIEndpoints]: Awaited<ReturnType<APIEndpoints[K]>>
};
// { getUser: User; getPosts: Post[]; getComments: Comment[] }type DOMEvent = 'click' | 'mouseenter' | 'focus';
type EventHandler<E extends string> = {
[K in E as `on${Capitalize<K>}`]: (event: Event) => void
};
type Handlers = EventHandler<DOMEvent>;
// {
// onClick: (event: Event) => void;
// onMouseenter: (event: Event) => void;
// onFocus: (event: Event) => void;
// }type FormData = {
username: string | null;
email: string | null;
age: number | null;
};
type ValidatedForm = {
[K in keyof FormData]: NonNullable<FormData[K]>
};
function validateForm(data: FormData): ValidatedForm {
const validated: Partial<ValidatedForm> = {};
for (const key in data) {
const value = data[key as keyof FormData];
if (value === null) {
throw new Error(`${key} is required`);
}
(validated as any)[key] = value;
}
return validated as ValidatedForm;
}type DataFetcher = {
user: () => Promise<User>;
posts: (userId: string) => Promise<Post[]>;
comments: (postId: string) => Promise<Comment[]>;
};
type FetcherResults = {
[K in keyof DataFetcher]: Awaited<ReturnType<DataFetcher[K]>>
};
// { user: User; posts: Post[]; comments: Comment[] }❌ Manual null checks without types
function bad(value: string | null) {
if (value !== null) {
// TypeScript doesn't know value is string here
return value;
}
}✅ Type guards with NonNullable
function good<T>(value: T): NonNullable<T> {
if (value === null || value === undefined) {
throw new Error('Null value');
}
return value; // TypeScript knows this is NonNullable<T>
}❌ Ignoring nested promises
type Bad = ReturnType<typeof async1>; // Promise<Promise<T>>✅ Use Awaited
type Good = Awaited<ReturnType<typeof async1>>; // TInstall with Tessl CLI
npx tessl i pantheon-ai/typescript-advancedreferences