TS入门教程

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

---