JS为什么还要学

零、先回答一个根本问题：你写 TS 写 React，为什么还要学 JS 语法？

因为 TS 的运行时就是 JS。 你把 .tsx 文件编译后，类型标注全部被擦掉，剩下的代码就是纯 JS。你在 React 组件里写的 const [v, setV] = useState(0)、{items.map(i => <Item key={i.id} />)}、onClick={() => fn(x)}——这些全部是 JS 语法，TS 只是给变量加了个 : 类型。

所以当你看到：

 
 
 
const handleClick = (id: number): void => {
 
 
 
    const user = users.find(u => u.id === id);
 
 
 
    user && setSelected(user.name);
 
 
 
};
 
 
 

把类型标注去掉，剩下的是纯 JS：

 
 
 
const handleClick = (id) => {
 
 
 
    const user = users.find(u => u.id === id);
 
 
 
    user && setSelected(user.name);
 
 
 
};
 
 
 

这篇笔记就是教你看懂去掉类型的纯 JS 代码里，每一行在干什么。

---

速记卡（面试闪卡）

Q1：一句话讲清「JS为什么还要学」到底是什么？

A：学 TS 和 React 仍要懂 JS，因为 TS 编译后类型被擦除，跑的还是纯 JS 代码。

Q2：一、TS 的运行时就是 JS —— 怎么理解？

A：你把 .tsx 编译后，类型标注全部消失，剩下的就是纯 JS。TS 只是给变量加了个”: 类型”，运行时一个类型都不存在——懂 JS 才懂”去掉糖衣后到底跑的是什么”。

Q3：二、React 里全是 JS 语法 —— 怎么理解？

A：组件里的 const [v,setV]=useState(0)、items.map(i=>)、onClick={()=>fn(x)} 全是 JS 语法，TS 只加了类型。把类型去掉，每一行仍是合法 JS，React 只是套在外面的框架。

Q4：三、为什么这篇笔记存在 —— 怎么理解？

A：它教你”看懂去掉类型的纯 JS 里每行在干什么”。面试或读源码时，类型只是辅助，真正执行的是 JS 语义——把类型和运行时混为一谈，就会在运行期踩坑。

Q5：四、一句话记住 —— 怎么理解？

A：TS 是 JS 的超集，类型只在编译期帮忙，运行时不存在。学 TS 别只学类型，底层 JS（作用域、闭包、原型、事件循环）才是真功夫。

Q6：核心速记主线有哪些？

• TS 运行时就是 JS，类型编译后擦除

• React Hook/map/箭头函数全是 JS 语法

• 类型只在编译期，运行时不存在

• 读源码/面试要懂纯 JS 语义

• JS 底层（闭包/原型/事件循环）是真功夫

口诀

A：TS 编译糖衣落，

底层仍是纯 JS 核；

类型只管编译期，

运行时里全无它。

相关链接

• 📋 目录：00-JavaScript

• 📚 学习清单：八股文学习路线图