网站被百度k开发人员公众号
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();// 处理点击
};
总结
TypeScript 为 JavaScript 开发带来了类型安全性和更好的开发体验。从基础类型到高级特性，再到与 React 的集成，TypeScript 都能显著提升代码质量和开发效率。渐进式采用策略使得现有 JavaScript 项目可以平滑迁移到 TypeScript。