当前位置：首页 > news >正文

简单了解TypeScript

news 2025/8/11 8:15:32

1. TypeScript 介绍

TypeScript 是 JavaScript 的超集，由微软开发并维护，它添加了可选的静态类型系统和基于类的面向对象编程。

核心优势：

类型检查：在编译时捕获错误，减少运行时错误
更好的代码提示：IDE 可以提供更准确的自动完成和文档提示
代码可维护性：类型注解使代码更易于理解和维护
渐进式采用：可以逐步将 JavaScript 项目迁移到 TypeScript

2. TypeScript 初体验

安装与配置

npm install -g typescript
tsc --init  # 生成 tsconfig.json

基本使用示例

// 定义接口
interface User {name: string;age: number;
}// 类型注解
function greet(user: User): string {return `Hello, ${user.name}!`;
}// 使用
const currentUser = { name: "Alice", age: 25 };
console.log(greet(currentUser));

3. TypeScript 常用类型

基础类型

let isDone: boolean = false;
let count: number = 42;
let name: string = "TypeScript";// 数组
let list: number[] = [1, 2, 3];
let genericList: Array<number> = [1, 2, 3]; // 泛型语法// 元组
let tuple: [string, number] = ["hello", 10];// 枚举
enum Color { Red, Green, Blue }
let c: Color = Color.Green;

特殊类型

// any - 跳过类型检查
let notSure: any = 4;
notSure = "maybe a string";// void - 表示没有返回值
function warnUser(): void {console.log("This is a warning");
}// never - 表示永远不会返回
function error(message: string): never {throw new Error(message);
}

接口与类型别名

// 接口
interface Point {x: number;y: number;z?: number; // 可选属性readonly id: number; // 只读属性
}// 类型别名
type PointType = {x: number;y: number;
};// 函数类型
interface SearchFunc {(source: string, subString: string): boolean;
}

4. TypeScript 高级类型

联合类型与交叉类型

// 联合类型
let padding: string | number;// 交叉类型
interface A { a: number }
interface B { b: string }
type C = A & B; // { a: number, b: string }

泛型

function identity<T>(arg: T): T {return arg;
}// 泛型接口
interface GenericIdentityFn<T> {(arg: T): T;
}// 泛型类
class GenericNumber<T> {zeroValue: T;add: (x: T, y: T) => T;
}

条件类型

type IsString<T> = T extends string ? true : false;
type A = IsString<string>; // true
type B = IsString<number>; // false

映射类型

type Readonly<T> = {readonly [P in keyof T]: T[P];
};type Partial<T> = {[P in keyof T]?: T[P];
};

5. TypeScript 类型声明文件

声明文件 (.d.ts)

// 声明全局变量
declare const __VERSION__: string;// 声明模块
declare module "*.css" {const classes: { [key: string]: string };export default classes;
}// 声明命名空间
declare namespace Express {interface Request {user?: User;}
}

使用 DefinitelyTyped

npm install --save-dev @types/lodash

6. 在 React 中使用 TypeScript

组件 Props 和 State

interface Props {name: string;age?: number;
}interface State {count: number;
}class MyComponent extends React.Component<Props, State> {state: State = {count: 0};render() {return <div>{this.props.name}</div>;}
}

函数组件

interface Props {message: string;
}const FunctionComponent: React.FC<Props> = ({ message }) => {return <div>{message}</div>;
};

Hooks 类型

const [count, setCount] = useState<number>(0);const user = useRef<User | null>(null);useEffect(() => {// 副作用逻辑
}, [count]);

事件处理

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {console.log(e.target.value);
};const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {e.preventDefault();// 处理点击
};