TS入门教程TypeScript 是微软推出的一种 JavaScript 超集，添加了静态类型检查，可编译为纯 Java

一、TypeScript 简介

TypeScript（TS） 是微软推出的一种 JavaScript 超集，添加了静态类型检查，可编译为纯 JavaScript。
适合中大型项目开发，解决了 JS 中类型不明确、运行时报错多等问题。

TS 优势

支持 静态类型检查，开发阶段发现错误
更好的 代码提示与补全
强类型约束提升 代码可维护性
更适合 团队协作 与 大型项目

示例：

let age: number = 25;
// age = 'hello'; // 报错：不能将 string 赋值给 number

二、为什么要使用 TypeScript？

JS 存在的问题

动态类型 → 容易出错
属性拼写错误 → 无提示，运行时报错
条件逻辑冗余 → 不易发现逻辑死区

示例：

// JavaScript 中不会报错，但运行时出错
const user = { name: "Tom" };
console.log(user.age.toFixed(2)); // 运行时报错

// TypeScript 中编译报错
interface User {
  name: string;
}
const user: User = { name: "Tom" };
console.log(user.age.toFixed(2)); // 报错：age 不存在

三、TypeScript 编译与配置

TSC 编译命令

tsc index.ts → 编译单个文件
tsc → 使用 tsconfig.json 自动编译整个项目
tsc --watch → 监听文件变化，自动编译

tsconfig.json 示例

{
  "compilerOptions": {
    "target": "es6",
    "strict": true,
    "outDir": "./dist"
  },
  "include": ["src"]
}

四、基础类型

类型	描述	示例
`string`	字符串类型	`let name: string = "Alice";`
`number`	数字类型（整数/浮点数）	`let age: number = 30;`
`boolean`	布尔值	`let isDone: boolean = false;`
`void`	无返回值（用于函数）	`function log(): void { console.log('hi'); }`
`any`	任意类型，关闭类型检查	`let value: any = 5; value = "hello";`
`unknown`	表示未知类型，需判断再用	见下示例
`never`	表示永远不会返回的值	见下示例

五、特殊类型详解

`any` vs `unknown`

let a: any = 123;
a = "abc";
a.toUpperCase(); // ✅ 不报错，但存在隐患

let b: unknown = "abc";
b.toUpperCase(); // ❌ 报错，需要先判断

if (typeof b === 'string') {
  console.log(b.toUpperCase()); // ✅ 类型缩小后使用
}

`never` 类型

用于函数永远不会返回值的情况，例如死循环或抛错：

function error(message: string): never {
  throw new Error(message);
}

`void` 类型

用于无返回值的函数：

function greet(name: string): void {
  console.log("Hello, " + name);
}

六、类型推断与包装对象

类型推断

TypeScript 会根据初始值推断类型：

let count = 10;  // 推断为 number

基本类型 vs 包装对象

let str: string = 'hello';  // 原始类型，推荐
let strObj: String = new String('hello'); // 包装对象，不推荐

访问属性时，JS 会隐式地将原始类型自动装箱：

let name = "Alice";
console.log(name.length); // 实际调用的是包装对象的 length 属性

七、自定义类型

使用 `type` 或 `interface`

type User = {
  id: number;
  name: string;
}

interface Product {
  id: number;
  title: string;
}

支持嵌套与联合类型：

type Response = string | number | boolean;

八、实战建议与最佳实践

尽量避免使用 any
合理使用 unknown 提高安全性
使用 interface/type 约束对象结构
区分 void 和 undefined，注意语义差异
利用 tsconfig.json 优化开发体验

结语

TypeScript 能显著提升代码质量，是现代前端工程化的重要工具。理解其类型系统、编译机制和错误提示机制，能帮助开发者在项目中更加游刃有余。

TS入门教程