0002、ts中常见的数据类型

本文介绍了TypeScript,微软开发的JavaScript超集,其引入了类型系统和其他特性。文章详细讲解了基础类型、枚举、任意类型、空值等数据类型,以及类型断言、类型别名和接口等概念,强调了TypeScript如何通过编译时检查提升代码质量和团队协作效率。

TypeScript 是一种由微软开发的开源语言,它是 JavaScript 的一个超集,添加了类型系统和一些其他特性。在 TypeScript 中,类型是你的代码中变量和函数值的形状的描述。使用类型可以帮助你在编译期间而非运行时捕获错误。以下是 TypeScript 中常见的数据类型:

1. 基础类型

  • Boolean: 最基本的数据类型,只有 truefalse 两个值。

    let isDone: boolean = false;
    
  • Number: TypeScript 和 JavaScript 一样,所有数字都是浮点数。

    let decimal: number = 6;
    
  • String: 文本数据类型,可以使用双引号(")、单引号(')或者模板字符串(``)。

    let color: string = "blue";
    
  • Array: 数组类型可以有两种表示方法:元素类型[] 或者 Array<元素类型>

    let list: number[] = [1, 2, 3];
    let list2: Array<number> = [1, 2, 3];
    
  • Tuple: 元组类型允许你表达一个已知元素数量和类型的数组,各元素的类型不必相同。

    let x: [string, number];
    x = ["hello", 10];
    

2. 枚举

  • Enum: 枚举是一种给一组数值赋予更友好名称的方式。
    enum Color {Red, Green, Blue}
    let c: Color = Color.Green;
    

3. 任意类型

  • Any: 用于那些我们不希望类型检查器进行检查的变量。
    let notSure: any = 4;
    

4. 空值

  • Void: 通常用于那些不返回值的函数。
    function warnUser(): void {
      console.log("This is a warning message");
    }
    

5. Null 和 Undefined

  • Null 和 Undefined: TypeScript 里,nullundefined 有各自的类型,分别叫做 nullundefined
    let u: undefined = undefined;
    let n: null = null;
    

6. Never

  • Never: 表示那些永不存在的值的类型,例如,那些总是抛出异常或根本就不会有返回值的函数表达式的返回值类型。
    function error(message: string): never {
      throw new Error(message);
    }
    

7. 对象

  • Object: 非原始类型,即非 numberstringbooleansymbolnullundefined
    declare function create(o: object | null): void;
    

8. 类型断言

  • 类型断言: 一种类型转换,告诉编译器“我知道我在做什么”,它不执行类型检查或重新结构数据,只在编译阶段起作用。
    let someValue: any = "this is a string";
    let strLength: number = (someValue as string).length;
    

9. 类型别名和接口

  • 类型别名(Type Aliases)和接口(Interfaces): 用于定义对象类型。
    type User = {
      name: string;
      id: number;
    };
    interface User {
      name: string;
      id: number;
    }
    

结论

TypeScript 提供了丰富的类型系统,允许你在编写代码时进行严格的类型检查。这对于大型项目和团队协作非常有用,因为它可以在编译时捕捉到潜在的错误,提高代码的质量和可维护性。

TypeScript 中对接口数据类型进行封装与验证,通常涉及到两个核心目标:一是确保接口返回的数据结构符合预期,二是通过类型系统提供良好的类型提示和编译时检查。以下是几种常见的实现方法。 ### 接口数据类型的封装 接口数据类型通常通过定义接口(`interface`)或类型别名(`type`)来实现。例如,定义一个用户信息接口: ```typescript interface User { id: number; name: string; email: string; } ``` 随后在调用接口时,可以将该类型与 `axios` 或 `fetch` 等请求库结合使用。以 `axios` 为例,可以通过泛型方式传递类型: ```typescript import axios from 'axios'; const fetchUser = async (): Promise<User> => { const response = await axios.get<User>('/api/user'); return response.data; }; ``` 这种方式确保了返回数据的结构符合 `User` 类型定义,并在开发过程中提供自动补全和类型检查[^1]。 ### 接口数据的验证 TypeScript 提供了多种方式进行运行时类型验证,确保数据在运行时也符合预期结构。 #### 1. 使用类型守卫(Type Guards) 类型守卫是一种在运行时进行类型检查的函数。例如,可以定义一个函数来验证某个对象是否是 `User` 类型: ```typescript function isUser(obj: any): obj is User { return ( typeof obj.id === 'number' && typeof obj.name === 'string' && typeof obj.email === 'string' ); } ``` 在获取数据后,可以使用该函数进行验证: ```typescript const response = await axios.get('/api/user'); if (isUser(response.data)) { // 正确类型 } else { // 类型不匹配 } ``` #### 2. 使用 `zod` 或 `io-ts` 等第三方库 对于更复杂的类型验证需求,可以借助第三方库如 `zod` 或 `io-ts`,它们提供了更强大的运行时类型验证能力: ```typescript import { z } from 'zod'; const UserSchema = z.object({ id: z.number(), name: z.string(), email: z.string(), }); type User = z.infer<typeof UserSchema>; const response = await axios.get('/api/user'); const parsed = UserSchema.safeParse(response.data); if (parsed.success) { // 验证成功 } else { // 验证失败 } ``` 这种方式提供了更强大的错误提示和验证逻辑,适合大型项目或复杂数据结构的验证[^2]。 #### 3. 使用泛型封装请求函数 可以进一步封装请求函数,使其支持泛型传入,从而实现类型安全的请求调用: ```typescript const request = <T>(config: { url: string }): Promise<T> => { return axios.get<T>(config.url).then((res) => res.data); }; request<User>({ url: '/api/user' }).then((res) => { console.log(res.id); // 编译时可访问 id 属性 }); ``` 这种封装方式结合泛型和类型守卫,可以在请求层面实现类型安全和结构验证[^3]。 ### 总结 TypeScript 接口数据类型的封装与验证可以通过以下方式实现: - 定义接口或类型别名,提供类型提示和结构约束。 - 使用类型守卫函数进行运行时类型验证。 - 借助第三方库如 `zod` 或 `io-ts` 实现更复杂的验证逻辑。 - 封装通用请求函数,支持泛型传入,提升类型安全性和可维护性。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值