TypeScript 常用类型

typescript 常用类型

1. js 已有类型

   • 原始类型：number \ string \ boolean \ null \ underfined \ symbol

   • 对象类型：object（包括数组、对象、函数等对象）

2. ts 新增类型

   • 联合类型、自定义类型（类型别名）、接口、元组、字面量类型、枚举、void 、any 等

 

联合类型

let arr: (number | string)[] = [1, 'a', 2]; //联合类型声明

类型别名

// 使用 type 关键字来创建类型别名
// 类型别名，可以是任何合法的变量名称
// 创建类型别名后，直接使用该类型别名作为变量的类型注解 即可
type CustomArray = (number | string)[];
 
let arr1: CustomArray = [1, 2, 'a', 'b'];

函数类型

// 定义 参数 和 返回值 类型
function add(num1: number, num2: number): number {
    return num1 + num2
}
​
// 函数表达式声明函数
const add1 = (num1: number, num2: number): number => {
    return num1 + num2
}
​
const add2: (num1: number, num2: number) => number = (num1, num2) => {
    return num1 + num2
}
​
// 如果函数没有返回值，函数返回值类型为 void
function greet(name: string): void {
    console.log('hello');
}
​
// 可选参数
// 参数名称后面添加 ？
// 必选参数不可以在可选参数之后
function mySlice(start?: number, end?: number): void {
    console.log(start, end);
}

对象类型

// 如果一行代码只指定一个属性类型，可以去掉分号 ；
// 方法的类型也可以使用箭头函数形式
let person: { name: string; age: number; sayHi(): void; greet(name: string): void } = {
    name: '刘老师',
    age: 18,
    sayHi() { },
    greet(name) { },
}
​
let person1: {
    name: string;
    age: number;
    sayHi: () => void
    greet: (name: string) => void
} = {
    name: '刘老师',
    age: 18,
    sayHi() { },
    greet(name) { },
}
​
// 对象可选属性
function myAxios(config: { url: string; method?: string }) { }
​
myAxios({
    url: '',
    // method: 
})

接口类型

// 使用 interface 关键字声明接口, 描述对象的类型，达到复用的目的
interface IPerson {
    name: string
    age: number
    sayHi(): void
}
​
let person2: IPerson = {
    name: '李老师',
    age: 18,
    sayHi() { },
}
​
let person3: IPerson = {
    name: '李老师',
    age: 18,
    sayHi() { },
}
​
// 接口 interface 和 类型别名 type 的区别
// 相同点：都可以给对象指定类型
// 不同点：接口，只能为对象指定类型；类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名
type IPerson2 = {
    name: string
    age: number
    sayHi(): void
}
​
let person4: IPerson2 = {
    name: '李老师',
    age: 18,
    sayHi() { },
}
​
// 两个接口有相同的属性或方法，可以将公共的属性或方法抽离出来,通过继承来实现复用
interface Point2D { x: number; y: number }
​
// 使用继承实现复用
interface Point3D extends Point2D {
    z: number
}
​
let p3: Point3D = {
    x: 1,
    y: 2,
    z: 3
}

元组类型

// 是另一种类型的数组，它确切地知道包含多少个元素，以及特定索引对应的类型
let position : [number, number] = [1, 2];

类型推断

// 类型推论的两个场景：1.声明变量并初始化值；2.函数返回值
// 能省略类型注解的地方就省略
let a = 18 //不用写类型注解

类型断言

const aLink = document.getElementById('link');
// 注意：该方法返回值的类型是 HTMLElement，该类型只包含所有标签公共的属性或方法，不包含 a 标签特有的 href 等属性
// 因此，这个类型太宽泛(不具体)，无法操作 href 等 a 标签特有的属性或方法
// 解决方式：这种情况下就需要使用类型断言指定更加具体的类型
// 使用类型断言：
const aLink = document.getElementById('link') as HTMLAnchorElement;
// 解释:
// 使用 as 关键字实现类型断言
// 关键字 as 后面的类型是一个更加具体的类型（HTMLAnchorElement 是 HTMLElement 的子类型）
// 通过类型断言，aLink 的类型变得更加具体，这样就可以访问 a 标签特有的属性或方法了
// 另一种语法，使用 <> 语法，这种语法形式不常用知道即可:
// 该语法，知道即可：在react的jsx中使用会报错
const aLink = <HTMLAnchorElement>document.getElementById('link');

字面量类型

字面量类型配合联合类型一起使用。

// 字面量类型
 
let str1 = '张三';
const str2 = '张三';

type Direction = 'left' | 'right' | 'up' | 'down';
 
// 使用自定义类型:
 
function changeDirection(direction: Direction) {
  console.log(direction);
}
 
// 调用函数时，会有类型提示：
changeDirection('up');

枚举

枚举的功能类似于字面量类型+联合类型组合的功能，也可以表示一组明确的可选值。

数字枚举：

• 枚举成员的值为数字的枚举；
• 枚举成员是有值的，默认为：从 0 开始自增的数值；

字符串枚举：

• 枚举成员的值为字符串的枚举
• 字符串枚举没有自增长行为，因此，字符串枚举的每个成员必须有初始值

一般情况下，推荐使用字面量类型+联合类型组合的方式，因为相比枚举，这种方式更加直观、简洁、高效

// 创建枚举
enum Direction2 {
  Up,
  Down,
  Left,
  Right,
}
 
// 使用枚举类型
function changeDirection2(direction: Direction2) {
  console.log(direction);
}
 
// 调用函数时，需要应该传入：枚举 Direction 成员的任意一个
// 类似于 JS 中的对象，直接通过 点（.）语法 访问枚举的成员
changeDirection2(Direction2.Up);

// 数字枚举
enum Direction {
  Up = 2,
  Down = 4,
  Left = 6,
  Right = 8,
}

// 字符串枚举
enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT',
}

// 枚举实现原理
enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}
 
// 会被编译为以下 JS 代码：
var Direction;
 
(function (Direction) {
  Direction['Up'] = 'UP'
  Direction['Down'] = 'DOWN'
  Direction['Left'] = 'LEFT'
  Direction['Right'] = 'RIGHT'
})(Direction || Direction = {})

void

不推荐使用 any

let obj: any = { x: 0 };
 
obj.bar = 100;
obj();
const n: number = obj;

Typeof 运算符

使用 typeof 操作符来获取变量 的类型

typeof 出现在类型注解的位置（参数名称的冒号后面）所处的环境就在类型上下文(区别于 JS 代码)

注意：typeof 只能用来查询变量或属性的类型，无法查询其他形式的类型（比如，函数调用的类型）

使用场景：根据已有变量的值，获取该值的类型，来简化类型书写

let p = { x: 1, y: 2 };
function formatPoint(point: { x: number; y: number }) {}
formatPoint(p);
 
function formatPoint(point: typeof p) {}