TypeScript-易混淆点解读

文章目录

TypeScript-易混淆点解读

字面量类型
类型字面量
可辨识联合类型
类型别名与接口的异同点

相同点
不同点

字面量类型

字面量是JavaScript本身提供的一个准确变量，其主要分为字符串字面量类型、数字字面量类型、真值字面量类型、枚举字面量类型、大整数字面量类型。

// 字符串字面量类型
let foo: 'Hello';
foo = 'Bar'; // Error: 'bar' 不能赋值给类型 'Hello'

// 数字字面量类型组成的联合类型
type OneToFive = 1 | 2 | 3 | 4 | 5;

// 真值字面量类型组成的联合类型
type Bools = true | false;

字面量类型的要和实际的值的字面量一一对应，否则就会报错。

字面量类型本身并不是很实用，但是可以在一个联合类型中组合创建一个强大的（实用的）抽象，比如：

type CardinalDirection = 'North' | 'East' | 'South' | 'West';

function move(distance: number, direction: CardinalDirection) {
  // ...
}

move(1, 'North'); // ok
move(1, 'Nurth'); // Error

类型字面量

类型字面量与JavaScript对象字面量语法相近

type IUser = {
  name: string;
  age: number;
  eat(food: string): void;
}

这个结构我们使用 interface 同样可以实现，那么在一定程度上 类型字面量 这种类型别名是可以替代接口的。

两者的区别我们放到下文中说明。

可辨识联合类型

当类中含有字面量成员时，我们可以用该类的属性来辨识联合类型。

interface Square {
  kind: 'square'; // 字面量类型
  size: number;
}

interface Rectangle {
  kind: 'rectangle'; // 字面量类型
  width: number;
  height: number;
}

type Shape = Square | Rectangle;

如果你使用类型保护风格的检查（==、===、!=、!==）或者使用具有判断性的属性（在这里是 kind），TypeScript 将会认为你会使用的对象类型一定是拥有特殊字面量的，并且它会为你自动把类型范围变小

function area(s: Shape) {
  if (s.kind === 'square') {
    // 现在 TypeScript 知道 s 的类型是 Square
    // 所以你现在能安全使用它
    return s.size * s.size;
  } else {
    // 不是一个 square ？因此 TypeScript 将会推算出 s 一定是 Rectangle
    return s.width * s.height;
  }
}

其实看到这里我们很容易想到 redux 中 reducer 的使用

import { createStore } from 'redux';

// action中的type为字符串字面量类型
type Action =
  | {
      type: 'INCREMENT';
    }
  | {
      type: 'DECREMENT';
    };
function counter(state = 0, action: Action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

// Create a Redux store holding the state of your app.
// Its API is { subscribe, dispatch, getState }.
let store = createStore(counter);

// You can use subscribe() to update the UI in response to state changes.
// Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly.
// However it can also be handy to persist the current state in the localStorage.

store.subscribe(() => console.log(store.getState()));

// The only way to mutate the internal state is to dispatch an action.
// The actions can be serialized, logged or stored and later replayed.
store.dispatch({ type: 'INCREMENT' });
// 1
store.dispatch({ type: 'INCREMENT' });
// 2
store.dispatch({ type: 'DECREMENT' });
// 1

类型别名与接口的异同点

类型别名的语法如下：

type SomeName = someValidTypeAnnotation

相同点

1. 都可以描述一个对象或者函数的形状

interface IUser {
 name: string
 age: number
}
 
interface ISetUser {
 (name: string, age: number): void;
}

type TUser = {
 name: string
 age: number
};
 
type TSetUser = (name: string, age: number): void;

2. 都允许拓展（extends）

interface 和 type 都可以拓展，并且两者并不是相互独立的，也就是说 interface 可以 extends type, type 也可以 extends interface，但是两者的语法是不一样的。

// interface extends interface
interface IName { 
 name: string; 
}
interface IUser extends IName { 
 age: number; 
}

// type extends type
type TName = { 
 name: string; 
}
type TUser = TName & { age: number };

// interface extends type
type TName = { 
 name: string; 
}
interface IUser extends TName { 
 age: number; 
}

// type extends interface
interface IName { 
 name: string; 
}
type TUser = IName & { 
 age: number; 
}

不同点

1. type 可以而 interface 不行

type 可以声明基本类型别名，联合类型，元组等类型

type TName = string
type TText = string | { text: string };
type TCoordinates = [number, number];

type 语句中还可以使用 typeof 获取实例的类型进行赋值

// 当你想获取一个变量的类型时，使用 typeof
let fn = (str: string) => str;
type TFn = typeof fn; // type TFn = (str: string) => string

2. interface 可以而 type 不行

interface 能够声明合并

interface IUser {
 name: string
 age: number
}
 
interface IUser {
 sex: string
}
 
/*
interface IUser {
 name: string
 age: number
 sex: string 
}
*/

建议：可以使用 interface 时则使用 interface，否则使用 type

来源：CSDN

作者：roamingcode

链接：https://blog.csdn.net/roamingcode/article/details/104142770

标签

typescript

string

字面量