TypeScript

TS零基础通俗易懂手册

TS零基础通俗易懂手册（纯干货入门）

作者：洋柿子·2026-09-01·共 1 篇 · 当前 1

TS零基础通俗易懂手册（纯干货入门）

一、TS是什么？（大白话解释）

1.1 官方全称

TS：TypeScript 超集脚本语言

1.2 最简单理解

  1. TS = 加强版JS，JavaScript有的东西TS全部都有。
  2. 最大区别：TS增加了类型约束，写代码必须规定数据类型。
  3. TS不能直接在浏览器、Node运行，必须编译成纯JS才能执行。

1.3 通俗直白比喻（承接前端三剑客）

  • JS = 毛坯房：自由随性、没有规矩、随便改造，容易出错。
  • TS = 精装规范房：强制标准、固定格式、约束规范，杜绝低级错误。
  • 一句话：TS是给JS加枷锁，让代码更严谨、不出bug。

二、TS 核心特点

  1. JS超集：所有JS代码都是合法TS代码，无缝兼容。
  2. 静态类型：写代码时就要确定类型，提前报错（JS运行才报错）。
  3. 需要编译：ts文件不能直接运行，必须编译为js。
  4. 面向大型项目：适合团队开发、大项目，不适合简单小脚本。
  5. 生态通用：Vue3、React、Deno原生全部支持TS。

三、TS 和 JS 本质区别（必背）
对比项 JavaScript(JS) TypeScript(TS)
类型机制 弱类型，随便赋值 强类型，强制规定类型
报错时机 代码运行后才报错 写代码时就提示错误
运行环境 浏览器/Node直接运行 必须编译成JS再运行
适用场景 小脚本、简单页面、小型项目 团队协作、中大型企业项目
学习难度 简单宽松 严谨、多一套类型语法

四、TS 安装与编译（实操必备）

4.1 安装命令（依赖Node环境）

# 全局安装ts编译器
npm install -g typescript

4.2 编译命令

# 将 index.ts 编译成 index.js
tsc index.ts

4.3 运行逻辑

手写TS代码 → tsc编译 → 生成纯净JS → 浏览器/Node运行

五、TS 基础语法（对比JS通俗易懂）

5.1 变量类型注解（TS核心）

TS可以手动指定变量类型，一旦定义，不能随意修改类型。

// JS写法（无约束，随意改）
let num = 10;
num = "我变成字符串了"; // 不报错

// TS写法（强制约束）
let count: number = 10;
count = 20;       // 正确
count = "文字";   // 直接红线报错，禁止修改类型

5.2 常用基础类型（和JS一致，写法更严谨）

let str: string = "文字";        // 字符串
let age: number = 18;           // 数字
let flag: boolean = true;       // 布尔
let n: null = null;             // 空
let u: undefined = undefined;   // 未定义

5.3 任意类型 any（新手过渡神器）

any = 放弃TS类型校验，写了any就变回JS。

let data: any = 100;
data = "随便改"; // 不报错
// 不推荐滥用，仅限新手过渡、兼容旧JS代码

六、TS 三大核心进阶语法（企业必用）

6.1 数组类型

// 写法1：类型[]
let arr: number[] = [1,2,3];
// 写法2：Array<类型>
let list: Array<string> = ["a","b"];

6.2 接口 interface（重中之重）

接口 = 自定义对象模板，规定对象必须有哪些属性、属性是什么类型。

interface User {
  id: number;
  name: string;
  age?: number; // ? 代表可选属性
}

let u: User = {
  id: 1,
  name: "张三"
};

6.3 函数类型约束

TS强制约束：参数类型 + 返回值类型。

// 语法：函数名(参数:类型):返回值类型
function add(a:number, b:number):number{
  return a + b;
}

七、TS 为什么企业强制使用？

  1. 提前纠错：编码阶段报错，不用等到运行bug。

  2. 代码规范：所有人变量、对象格式统一，不乱写。

  3. 智能提示：类型明确，编辑器提示极其精准。

  4. 团队协作：多人开发不冲突，接手别人代码无压力。

  5. 框架刚需：Vue3、React、小程序主流框架原生适配TS。

八、直白行业现状（国内就业实话）

  1. 现在前端找工作必须会TS：中大型公司、外包、互联网公司全部要求。

  2. 纯JS只能做简单静态页面，面试必问TS。

  3. Vue3 + TS、React + TS 是目前行业标配技术栈。

  4. 入门简单，难在复杂泛型、高级类型，新手掌握基础即可就业。

九、新手常见坑（直白避雷）

  1. 混淆TS和JS：TS不能直接运行，必须编译。

  2. 滥用any：写一堆any等于白学TS，失去类型意义。

  3. 类型随意赋值：数字赋值字符串，新手高频报错。

  4. 忽略分号、格式：TS语法校验比JS严格无数倍。

  5. 跳过基础直接学框架：不懂TS原生，框架代码看不懂。

十、通俗易懂总结（终极人话）

  1. TS不是替代JS，是升级加强JS。

  2. 核心本质：给JS加类型、加约束、加规范。

  3. 执行流程：TS编写 → 编译JS → 线上运行。

  4. 就业要求：现在前端 = JS + TS + 主流框架。

  5. 学习顺序：JS吃透 → 类型注解 → 接口 → 泛型 → 框架搭配TS。

← 返回课程首页