TypeScript怎么用？新手入门实战指南

TypeScript怎么用？从零开始上手

你是不是也遇到过这种情况：写了一堆JavaScript代码，运行时突然报错，翻来覆去查半天，结果发现是某个函数传了个字符串，却当成数字用了。这种低级但致命的错误，在项目一大就特别头疼。

TypeScript就是来解决这个问题的。它不是一门全新的语言，而是JavaScript的“加强版”，给变量、函数加上了类型约束，让你在写代码的时候就能发现问题，而不是等到用户反馈才去修。

安装TypeScript

你的电脑得先装好Node.js，然后打开终端，输入下面这行命令：

npm install -g typescript

装完之后，可以用tsc命令把TypeScript文件编译成JavaScript。

写第一个.ts文件

新建一个文件叫app.ts，写点简单的代码：

function greet(name: string): string {
    return "Hello, " + name;
}

console.log(greet("小明"));

注意这里的name: string，意思是这个参数必须是字符串。如果你传个数字进去，比如greet(123)，编辑器立马就会标红提醒你错了。

编译成JavaScript

在终端运行：

tsc app.ts

它会自动生成一个app.js文件，内容就是普通的JavaScript，可以直接在浏览器或Node.js里跑。

在网站项目中使用TypeScript

大多数现代前端框架都原生支持TypeScript。比如你用Vite创建一个React项目，初始化时选TypeScript模板就行：

npm create vite@latest my-app -- --template react-ts

这样生成的组件文件就是.tsx结尾的，你可以给props定义类型：

interface Props {
  title: string;
  count?: number;
}

const MyComponent = ({ title, count = 0 }: Props) => {
  return <div><h1>{title}</h1><p>次数：{count}</p></div>;
};

这样别人调用这个组件时，如果传了个布尔值当title，编辑器马上就会提示类型不匹配。

常用类型示例

平时用得多的类型就这么几种：

let username: string = "张三";
let age: number = 25;
let isActive: boolean = true;
let scores: number[] = [85, 90, 78];
let user: { name: string; id: number } = { name: "李四", id: 101 };
let callback: (arg: string) => void;

这些类型写熟了，大部分场景都能覆盖。

配合Webpack或Vite使用

实际项目里不会手动一个个编译ts文件。你只需要在构建工具里加个loader，比如Vite默认就支持，Webpack则需要装ts-loader或babel-loader。配置好之后，所有.ts和.tsx文件都会自动编译。

别忘了根目录加个tsconfig.json，这是TypeScript的配置文件：

{
  "compilerOptions": {
    "target": "ES2016",
    "module": "ESNext",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"]
}

这个文件告诉编译器该怎么处理你的代码。

刚开始可能会觉得写类型有点麻烦，多敲几次就顺手了。尤其是团队协作时，别人一看函数签名就知道怎么用，不用再翻文档猜参数类型。

你现在就可以试着把一个小功能用TypeScript重写一遍，感受下类型带来的安全感。等项目大了，你会感谢现在开始用它的自己。