TypeScript，说白了就是给 JavaScript 加了个“保险”，让你写代码的时候少犯低级错误。你懂的，JS 是动态类型，写的时候爽，跑起来可Neng就“爽”到报错。TS 就是来治这个“爽”的，提前在编译阶段就给你揪出来问题，省心多了。

害，咱就是说TypeScript 真的香。尤其是你项目大了之后JS 那种“自由”就容易变成“混乱”。TS 就像一个靠谱的老大哥，帮你把关，代码质量直接拉满。

一、环境搭建，说干就干

你得有 Node.js，这个不用多说吧？没装的赶紧去装一个，v14 以上就行。然后全局安装 TypeScript：

npm install -g typescript

装完之后验证一下：

tsc -v

kan到版本号，说明你Yi经成功一半了哈哈。

接下来我们来初始化一个项目：

mkdir ts-project && cd ts-project
npm init -y

然后生成 TypeScript 的配置文件：

tsc --init

这个命令会生成一个 tsconfig.json 文件，这个文件就是 TS 的“灵魂”了。你Ke以在这里配置编译目标、模块规范、输出目录等等。

比如你Ke以在里面改一下这些配置：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  },
  "include": 
}

说实话，这个配置你得好好kan，尤其是 strict: true，这个是 TS 的灵魂开关，一定要开！

二、编译运行，走起

写完代码之后编译一下：

tsc

或者你懒一点，监听文件变化自动编译：

tsc --watch

然后运行编译后的 JS 文件：

node dist/index.js

是不是hen简单？你懂的，TS 就是这么贴心，编译完的 JS 你随便跑，浏览器、Node.js、甚至嵌入式设备dou行。

三、实战项目：TodoList

来我们搞个小项目练练手。比如一个 TodoList，纯 TS 实现，不掺任何框架，练手专用。

项目结构大概是这样：

ts-todolist/
├── src/
│   ├── types.ts   # 类型定义
│   ├── todo.ts    # 业务逻辑
│   └── index.ts   # 入口
├── tsconfig.json
└── package.json

先定义类型：

// src/types.ts
export interface Todo {
  id: number;
  content: string;
  completed: boolean;
  createTime: Date;
}
export type TodoAction =
  | { type: "ADD"; payload: string }
  | { type: "TOGGLE"; payload: number }
  | { type: "DELETE"; payload: number };

然后是业务逻辑：

// src/todo.ts
import { Todo, TodoAction } from "./types";
let todos: Todo = ;
function todoReducer: Todo {
  switch  {
    case "ADD":
      return ;
    case "TOGGLE":
      return state.map(todo =>
        todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
      );
    case "DELETE":
      return state.filter;
    default:
      return state;
  }
}
export const addTodo =  => {
  todos = todoReducer;
};
export const toggleTodo =  => {
  todos = todoReducer;
};
export const deleteTodo =  => {
  todos = todoReducer;
};
export const getTodos =  => ;

Zui后是入口文件：

// src/index.ts
import { addTodo, toggleTodo, deleteTodo, getTodos } from "./todo";
addTodo;
addTodo;
toggleTodo;
deleteTodo;
console.log);

运行一下：

tsc && node dist/index.js

控制台输出类型安全的 Todo 列表，任何类型错误编译时直接报错。你懂的，TS 就是这么靠谱。

四、TypeScript + React 实战

接下来我们搞个 React + TS 的项目。用 Vite 初始化一个 React + TS 项目：

npm create vite@latest ts-react-todo -- --template react-ts

然后进入项目目录，安装依赖：

cd ts-react-todo
npm install

启动项目：

npm run dev

然后我们来写个 TodoItem 组件，先定义类型：

// src/types/index.ts
export interface Todo {
  id: number;
  text: string;
  done: boolean;
}

然后是组件：

// src/components/TodoItem.tsx
import { Todo } from "../types";
interface TodoItemProps {
  todo: Todo;
  onToggle:  => void;
  onDelete:  => void;
}
const TodoItem: React.FC =  => {
  return (
    

       onToggle}
      />
      {todo.text}
       onDelete}>删除
    
  );
};
export default TodoItem;

App.tsx 里写上状态和事件绑定：

// src/App.tsx
import { useState } from "react";
import { Todo } from "./types";
import TodoItem from "./components/TodoItem";
function App {
  const  = useState();
  const  = useState;
  const addTodo =  => {
    e.preventDefault;
    if ) return;
    const newTodo: Todo = {
      id: Date.now,
      text: inputText,
      done: false
    };
    setTodos;
    setInputText;
  };
  return (
    

      

         setInputText}
          placeholder="输入任务"
        />
        添加
      
      {todos.map(todo => (
         setTodos)}
          onDelete={ => setTodos)}
        />
      ))}
    
  );
}
export default App;

你kankan，组件的 Props、状态、事件全dou有类型约束，编辑器自动补全，重构零风险。你懂的，这不比 JS 香多了？

五、为什么百度不收录？

说实话，这个问题我也被问过好几次了。你写的内容百度不收录，可Neng有以下几个原因：

内容质量不高，重复、搬运、无价值的内容百度不待见。

网站权重低，新站收录慢，老站也得持续geng新高质量内容。

网站结构混乱，没有 sitemap，robots.txt 配置错误。

内容geng新频率低，百度喜欢活跃的网站。

外链少，没有推广，百度蜘蛛不来爬你。

解决办法就是：内容为王，结构清晰，定期geng新，外链建设，别想一步到位，慢慢来。

害，百度收录这事儿，急不得。你写的内容再好，也得慢慢等它来爬。你懂的，SEO 这事儿，是个长期活儿。

TS 真的香，尤其是你项目大了之后JS 那种“自由”就容易变成“混乱”。TS 就像一个靠谱的老大哥，帮你把关，代码质量直接拉满。

咱就是说TypeScript 实战，从环境搭建到项目开发，再到框架集成，每一步dou稳扎稳打。你只要掌握了基础类型、接口、泛型，再结合实战项目练手，Zui后结合 React/Vue/NestJS 落地企业级开发，那你就牛了。

别怕，TS 不是洪水猛兽，它就是 JS 的加强版，你懂的，学它，稳赚不亏。

---