Typescript

TypeScript

Overview

TypeScript is JavaScript with static typing. It adds a compile-time type checker; runtime behavior is JavaScript. Learning JavaScript applies to TypeScript for runtime tasks (e.g. sorting a list, DOM, async). Use TypeScript for types, interfaces, generics, and better tooling.

Core idea: Types describe shape and contracts; the compiler catches type errors before run time. Enable strict in tsconfig.json as a best practice.

---

Quick reference

---

Everyday types

• Primitives: string, number, boolean, bigint, symbol.
• Arrays: number[] or Array<number>.
• Any: any — disables checking; avoid when possible. Prefer unknown for truly unknown data and narrow before use.
• Type annotations (postfix): const name: string = "x", function greet(name: string): string { return "Hi " + name }.
• Object types: { name: string; age?: number } or interface User { name: string; age?: number }.
• Unions: string | number; literal types: "a" | "b".

---

Narrowing

Narrow types with conditionals so TypeScript can infer:

• typeof: if (typeof x === "string") { ... }
• Truthiness: if (value) { ... }
• Equality: if (x === null) { ... }
• in: if ("name" in obj) { ... }
• Type guards: function isFish(pet: Fish | Bird): pet is Fish { ... }
• Discriminated unions: Use a common literal field (e.g. kind: "circle") and switch on it.

---

Functions

• Signatures: (a: string, b?: number) => boolean; void for no return value.
• Overloads: Multiple call signatures + one implementation.
• Generics: function first<T>(arr: T[]): T \| undefined.
• Constraints: function longest<T extends { length: number }>(a: T, b: T): T.

---

Object types & type manipulation

• Interfaces: interface Point { x: number; y: number }; extends for extension.
• Index signatures: [key: string]: number.
• keyof: type K = keyof User → union of keys.
• typeof: type C = typeof config (value → type).
• Indexed access: type Name = User["name"].
• Mapped types: type Readonly<T> = { readonly [K in keyof T]: T[K] }.
• Conditional types: type F = T extends string ? number : boolean.
• Template literal types: ` type E = on${Capitalize<Event>} `.
• Utility types: Partial<T>, Required<T>, Pick<T, K>, Omit<T, K>, Record<K, V>, Exclude<T, U>, Extract<T, U>, NonNullable<T>, ReturnType<F>, Parameters<F>.

---

Classes

• Members: class C { prop: number; method(): void {} }.
• Constructor: constructor(public name: string) {} (parameter property).
• Implements: class D implements I {}.
• Extends: class Child extends Parent {}.
• Readonly, private, protected as needed.

---

Modules

• ES modules: import { x } from "./file", export const x = 1, export type { T }.
• Default export: export default App, import App from "./App".
• Namespace (legacy): Prefer ES modules.

---

Project configuration: tsconfig.json

• strict: Set "strict": true (recommended). Enables strictNullChecks, noImplicitAny, strictFunctionTypes, etc.
• target: e.g. "ES2022" or "ESNext".
• module: e.g. "ESNext", "NodeNext" for Node.
• moduleResolution: "bundler" (with bundler), "NodeNext" for Node.
• paths: "@/*": ["./src/*"] for path aliases.
• include / exclude: Which files are compiled.
• References: Use project references for large monorepos.

See reference.md for official TSConfig Reference link.

---

Best practices

• Enable strict mode.
• Prefer interfaces for object shapes that may be extended; type for unions, mapped types, and aliases.
• Prefer const and readonly where possible.
• Use unknown instead of any for external data; narrow before use.
• Use generics to keep functions reusable and type-safe.
• For runtime validation + types, use a schema library (e.g. Zod) and infer types with z.infer<typeof schema>.

---

Common mistakes

• any: Avoid; use unknown and narrow, or proper types.
• Non-null assertion (`!`): Use sparingly; prefer narrowing or optional chaining.
• Type assertions (`as`): Prefer type guards or schema validation when data comes from outside.
• Strict off: Keep strict: true; fix errors rather than disabling.

---

Additional resources

• reference.md — Official documentation links (Handbook, Reference, TSConfig, Cheat Sheets).
• Official: https://www.typescriptlang.org/docs — Get Started, Handbook, Reference, TSConfig.

License

Skill License - Free Use

This skill (the documentation, structure, and implementation) was created by Ender Puentes <Endev/> and is provided for free and open use. You are free to:

• Use this skill in any project, personal or commercial
• Modify the skill to fit your needs
• Distribute the skill to others
• Share modified versions of the skill
• Include this skill in your own skill collections

No restrictions apply – this skill is available for unrestricted use. Attribution is appreciated but not required.

Note: This skill documents and references TypeScript; the skill itself is an independent work. TypeScript is a separate work with its own license (Apache 2.0).

TypeScript — Reference & Official Documentation

This file complements the typescript skill with official documentation links for indexing and deep reference.

Official documentation (indexable)

• Docs home: https://www.typescriptlang.org/docs
• Get Started
• From scratch: https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html
• TypeScript in 5 minutes (func): https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-func.html
• For JS programmers: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
• Handbook
• The Basics: https://www.typescriptlang.org/docs/handbook/2/basic-types.html
• Everyday Types: https://www.typescriptlang.org/docs/handbook/2/everyday-types.html
• Narrowing: https://www.typescriptlang.org/docs/handbook/2/narrowing.html
• More on Functions: https://www.typescriptlang.org/docs/handbook/2/functions.html
• Object Types: https://www.typescriptlang.org/docs/handbook/2/objects.html
• Type Manipulation (Generics, Keyof, Typeof, Conditional, Mapped, Template Literal): https://www.typescriptlang.org/docs/handbook/2/types-from-types.html
• Classes: https://www.typescriptlang.org/docs/handbook/2/classes.html
• Modules: https://www.typescriptlang.org/docs/handbook/modules.html
• Reference
• Utility Types: https://www.typescriptlang.org/docs/handbook/utility-types.html
• Cheat Sheets: https://www.typescriptlang.org/docs/handbook/cheat-sheets
• JSX: https://www.typescriptlang.org/docs/handbook/jsx.html
• Type Inference: https://www.typescriptlang.org/docs/handbook/type-inference.html
• Type Compatibility: https://www.typescriptlang.org/docs/handbook/type-compatibility.html
• Project configuration
• What is tsconfig.json: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
• TSConfig Reference: https://www.typescriptlang.org/tsconfig
• tsc CLI: https://www.typescriptlang.org/docs/handbook/compiler-options.html
• Declaration files
• Introduction: https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html
• JavaScript
• Type checking JS: https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html
• JSDoc: https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html

Learning path

• New to TS: Get Started → Handbook (Basics, Everyday Types, Narrowing, Functions, Object Types).
• Need types from types: Handbook → Creating Types from Types (Generics, keyof, typeof, Conditional, Mapped, Template Literal).
• Config: tsconfig.json and TSConfig Reference.
• React/JSX: Reference → JSX.

Relationship to JavaScript

TypeScript shares syntax and runtime with JavaScript. For “how do I do X in TypeScript?” (e.g. sort a list, fetch API), the answer is usually the same as in JavaScript; TypeScript adds types and compile-time checks. Use JS resources when the question is about runtime behavior.