Skills2026年4月11日·1 分钟阅读

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 可直接安装

这个资产可安装;Agent 先选择当前运行时、检查安装计划,再运行匹配命令。

Native · 98/100策略:允许
Agent 入口
任意 MCP/CLI Agent
类型
Skill
安装
Single
信任
信任等级:Established
入口
step-1.md
直接安装命令
npx -y tokrepo@latest install 1b748b68-35fe-11f1-9bc6-00163e2b0d79 --target codex

先 dry-run 确认安装计划,再运行此命令。

TL;DR
TypeScript is a typed superset of JavaScript that compiles to plain JS, catching errors before runtime.
§01

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.

§02

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.

§03

How to use

  1. Install TypeScript:
npm i -D typescript
npx tsc --init
  1. Write typed code:
interface User {
  id: number;
  email: string;
  role: 'admin' | 'user';
}

function greet(user: User): string {
  return `Hello, ${user.email} (${user.role})`;
}
  1. Compile and run:
npx tsc           # Compile once
npx tsc --watch   # Watch mode
§04

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
}
§05

Related on TokRepo

§06

Common pitfalls

  • Using any type 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

常见问题

Can I adopt TypeScript gradually in an existing JavaScript project?+

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.

Does TypeScript have runtime overhead?+

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.

How does TypeScript work with React?+

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.

What is the difference between type and interface?+

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.

Should I use TypeScript for small projects?+

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)

讨论

登录后参与讨论。
还没有评论,来写第一条吧。

相关资产