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

简单了解TypeScript

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。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.dtcms.com/a/252900.html

相关文章:

  • Java实现10大经典排序算法
  • 【操作系统】macOS软件提示“已损坏,打不开”的解决方案
  • 数字ic后端设计从入门到精通8(含fusion compiler, tcl教学)ULVTLL、LVT、ULVT详解及应用
  • 游戏技能编辑器界面优化设计
  • AEO:从搜索引擎到答案引擎,AI时代搜索优化的新战场
  • MSPM0G3507学习笔记(三)软硬I2C任意切换,兼容HAL:oled与mpu6050
  • RK 安卓10/11平台 HDMI-IN 调试
  • SSRF4 SSRF-gopher 协议扩展利用-向内网发起 GET/POST 请求
  • Java中间件使用方式与实战应用
  • 基于深度学习的智能文本摘要系统:技术与实践
  • 【音视频】SIP基础、搭建服务器和客户端
  • uniapp 配置devserver代理
  • P6 QT项目----汽车仪表盘(6.4)
  • C++ vector深度剖析与模拟实现:探索模板的泛型应用
  • 腾讯云国际站缩容:策略、考量与实践
  • 智慧园区建设资料合集(Wordppt原件)
  • Spring Boot 中的条件装配:@Conditional 系列注解详解
  • 答辩讲解387基于Spring Boot的心理健康管理系统
  • 【Python系列PyCharm实战】ModuleNotFoundError: No module named ‘sklearn’ 系列Bug解决方案大全
  • Windows Server系统只有命令行不显示桌面的解决方法
  • 【超详细】讯飞智能车PC电脑烧录指南(高级系统部署与恢复)
  • LDPC码校验矩阵和生成矩阵的生成
  • Java在IDEA中终端窗口输出正常,但打包成JAR后中文乱码问题
  • 《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- 实战基于CSI2 Rx 构建高性能摄像头输入系统
  • 51c嵌入式~电路~合集2
  • 【沉浸式解决问题】优化MySQL中多表union速度慢的问题
  • 数字化零售如何全面优化顾客体验
  • 深度融合数智化,百胜软件联合华为云加速零售行业转型升级
  • 删除大表数据注意事项
  • 字符操作函数续上