查漏补缺「typescript」基础

forever_Mamba
284 阅读3分钟

这是我参与8月更文挑战的第23天，活动详情查看：8月更文挑战

前言

“八月的色彩是用金子铸就的，明亮而珍贵；八月的色彩是用阳光酿造的，芬芳而灿烂。”

未来的日子，愿你把自己调至最佳状态，缓缓努力，慢慢变好 Y(^o^)Y

五种原始数据类型

  • 布尔值

    let loading: boolean = false;

  • 数值

    let loading: number = 1;

  • 字符串

    let name: string = 'Tom'

  • 空值 JavaScript 没有空值（Void）的概念，在 TypeScript 中，可以用 void 表示没有任何返回值的函数

    function alertName(): void {
  alert('My name is Tom');
}

    声明一个 void 类型的变量没有什么用，在 --strictNullChecks 未指定时，你只能将它赋值为 undefined 和 null

    let u: void = undefined;

  • Null和Undefined

    let u: undefined = undefined;
let n: null = null;

    undefined 和 null 是所有类型的子类型，undefined 类型的变量，可以赋值给 number 类型的变量

    ✅
let num: number = undefined;
✅
let u: undefined;
let num: number = u;

    void 类型的变量不能赋值给 number 类型的变量

    ❌
let u: void;
let num: number = u;
// Type 'void' is not assignable to type 'number'.

任意值 any

声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值。

let myFavoriteNumber: any = 'seven';
✅
myFavoriteNumber = 7;

变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型（类型推断）

let something;  === let something: any;

类型推论

当一个变量没有被声明类型而直接被赋值后，typescript会推断出它的类型

let num = 7;  === let num: number = 7;
❌
num = 'tom'; 
index.ts(2,1): error TS2322: Type 'string' is not assignable to type 'number'.

联合类型

联合类型（Union Types）表示取值可以为多种类型中的一种。

let something: string | number;
✅
something = 'tom';
something = 6;
❌
something = false;
// index.ts(4,1): error TS2322: Type 'boolean' is not assignable to type 'string | number'.
// Type 'boolean' is not assignable to type 'number'.

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法。

对象的类型

接口

在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型

  • 接口一般首字母大写
  • 建议接口的名称加上 I 前缀
  • 赋值的时候，变量的形状必须和接口的形状保持一致
  • 不允许添加未定义的属性
  • 一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集
interface IPerson {
    name: string;
    age?: number;
    [propName: string]: string | number;
}
✅
let tom: IPerson = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};
❌ 赋值的时候，变量的形状必须和接口的形状保持一致
let tom: IPerson = {
    name: 'Tom',
    age: "25", // Type 'string' is not assignable to type 'number'
    gender: 'male'
};

数组

1.「类型 + 方括号」表示法

✅
let array: number[] = [1, 1, 2, 3, 5];
❌
let array: number[] = [1, '1', 2, 3, 5];
// Type 'string' is not assignable to type 'number'.
  1. 数组泛型 我们也可以使用数组泛型（Array Generic） Array<elemType> 来表示数组
let array: Array<number> = [1, 1, 2, 3, 5];
  1. 用接口表示数组
interface NumberArray {
  [index: number]: number;
}
let array: NumberArray = [1, 1, 2, 3, 5];

NumberArray 表示：只要索引的类型是数字时，那么值的类型必须是数字。这种方式比较复杂，用的很少。

  1. any 在数组中的应用

用 any 表示数组中允许出现任意类型，是一种比较常见的用法

let list: any[] = ['tom', 25, { website: 'http://baidu.com' }];

类型断言

类型断言（Type Assertion）可以用来手动指定一个值的类型。

语法：

值 as 类型 === <类型>值

用法：

  • 联合类型可以被断言为其中一个类型
  • 父类可以被断言为子类
  • 任何类型都可以被断言为 any
  • any 可以被断言为任何类型

结语

如果这篇文章帮到了你，欢迎点赞👍和关注⭐️。

文章如有错误之处，希望在评论区指正🙏🙏。

avatar
文章
阅读
粉丝