TypeScript — JavaScript with Syntax for Types
TypeScript is a superset of JavaScript that adds static types, interfaces, generics, and modern ES features, compiled down to plain JavaScript. Created by Anders Hejlsberg at Microsoft. Used by Airbnb, Slack, Asana, and a huge share of modern web projects.
Agent 可直接安装
这个资产可安装;Agent 先选择当前运行时、检查安装计划,再运行匹配命令。
npx -y tokrepo@latest install 1b748b68-35fe-11f1-9bc6-00163e2b0d79 --target codex先 dry-run 确认安装计划,再运行此命令。
What it is
TypeScript is a superset of JavaScript created by Anders Hejlsberg at Microsoft that adds static types, interfaces, generics, and modern ES features. It compiles down to plain JavaScript and runs anywhere JavaScript runs.
TypeScript is best for web developers, backend engineers, and teams working on medium-to-large JavaScript projects where type safety prevents bugs and improves refactoring confidence.
How it saves time or tokens
TypeScript catches type errors at compile time instead of runtime. Refactoring a function signature automatically flags every caller that needs updating. IDE autocompletion powered by type information speeds up development. Teams report fewer production bugs and faster onboarding because types serve as documentation.
How to use
- Install TypeScript:
npm i -D typescript
npx tsc --init
- Write typed code:
interface User {
id: number;
email: string;
role: 'admin' | 'user';
}
function greet(user: User): string {
return `Hello, ${user.email} (${user.role})`;
}
- Compile and run:
npx tsc # Compile once
npx tsc --watch # Watch mode
Example
// Generic API response type
interface ApiResponse<T> {
data: T;
error: string | null;
status: number;
}
async function fetchUser(id: number): Promise<ApiResponse<User>> {
const res = await fetch(`/api/users/${id}`);
if (!res.ok) {
return { data: null as any, error: res.statusText, status: res.status };
}
const data = await res.json();
return { data, error: null, status: 200 };
}
// Type narrowing
const result = await fetchUser(1);
if (result.error) {
console.error(result.error);
} else {
console.log(result.data.email); // TypeScript knows data is User here
}
Related on TokRepo
- AI coding tools — development productivity tools
- Testing tools — type-safe testing frameworks
Common pitfalls
- Using
anytype everywhere, which defeats the purpose of TypeScript - Not enabling strict mode in tsconfig.json, missing many type safety benefits
- Over-engineering types with complex generics when simpler types would suffice
常见问题
Yes. TypeScript is a superset of JavaScript, so valid JS is valid TS. Rename files from .js to .ts one at a time, fix type errors, and increase strictness gradually. The allowJs option lets JS and TS coexist.
No. TypeScript types are erased at compile time. The output is plain JavaScript with no runtime type checking. The compiled code runs at the same speed as hand-written JavaScript.
TypeScript provides excellent React support. Use .tsx files for JSX. Type your props with interfaces, use generic hooks like useState<Type>(), and get full autocompletion for component APIs.
Both define object shapes. Interfaces support declaration merging and are slightly better for object types. Types support unions, intersections, and mapped types. In practice, either works for most use cases.
For very small scripts, plain JavaScript may be faster to write. For anything with more than a few files or any code that other people will read, TypeScript pays for itself through better tooling and documentation.
引用来源 (3)
- TypeScript GitHub— TypeScript superset of JavaScript by Microsoft
- TypeScript Documentation— TypeScript documentation and handbook
- TypeScript Wiki— TypeScript design goals
讨论
相关资产
ts-reset — A CSS Reset for TypeScript Types
A library that fixes common TypeScript type annoyances by providing stricter, more useful default types for built-in JavaScript methods like .json(), .filter(), and .includes().
Babel — The JavaScript Compiler for Next Generation Code
Babel is a JavaScript compiler that lets you use the latest ECMAScript features today by transforming modern syntax into backwards-compatible code. It powers JSX transformation, TypeScript stripping, and polyfill injection across the web ecosystem.
Turbopack — Rust-Powered Incremental Bundler for JavaScript and TypeScript
Turbopack is a Rust-based incremental bundler for JavaScript and TypeScript projects, designed as the successor to Webpack. It is integrated into Next.js for development builds.
Lerna — Monorepo Management for JavaScript Projects
Lerna is a fast modern build system for managing and publishing multiple JavaScript and TypeScript packages from a single repository with built-in versioning and changelog generation.