# 基础类型

使用 typescript 最重要的一点就是静态类型检测, 配合 eslint 可以提高开发效率,减少类型问题导致的一些列 bug

# 概述

最简单的数据单元:number, string, boolean, function, undefined, null, any, object 等等。

# string, number, boolean

最基本的三个类型,可以使用类型注解,也可以直接使用字面量,ts 编译器可以推断出类型

const name: string = "your name"; // 使用 类型注解
const nickname = "nick name"; // 通过字面量进行类型推断
const age: number = 20;
const length = 192;
const isMale: boolean = true;
const isMarried = true;

# Arrays

两种写法

const ages: number[] = [20, 30, 40]; // 推荐
const lengths: Array<number> = [193, 185, 173]; // 现在普遍不推荐这种写法了,要注意
const sizes = [1, 3, 4]; // 推断为 number[]

# 元组 Tuple

元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。

let latlng: [number, number] = [120, 32];

元组与数组类似,但又不完全相同,如上面例子,元组要求长度必须是 2,并且是数字。

另外元组中的每一项类型可以不一样

let ret: [string, number, boolean] = ["yourname", 20, true];

# any

代表任意值,会跳过编译器的类型检测,通常在接口调用时使用,注意不要滥用。

const res = await fetchList();
if (res.code === 0) {
  // TODO 展示列表
  setList(res.data);
}

在这里, res.coderes.data 都不会报错,编辑器也不会给出任何的提示,所以你需要比编译器更了解代码

# unknown

表示未知类型,这类似于 any 类型,但更安全,因为对未知值做任何事情都是不合法的:

function safeParse(s: string): unknown {
  return JSON.parse(s);
}

// Need to be careful with 'obj'!
const obj = safeParse(someRandomString);

在使用的时候需要做类型断言,当然了,你必须比 ts 更加了解这段代码。

# object

object 表示非原始类型,也就是除 numberstringbooleansymbolnullundefined 之外的类型。

object 不等同于 any, object 只能使用 object 中存在的方法,使用 object 类似于装箱

# Function

函数类型,这个是比较抽象的,并不会对入参和出参的类型进行判断。

# void

某种程度上来说,void 类型像是与 any 类型相反,它表示没有任何类型。 当一个函数没有返回值时,你通常会见到其返回值类型是 void

function setUser(name: string, age: number): void {
  // todo 去搞事情吧
}

# never

never 类型表示的是那些永不存在的值的类型,通常表示抛出异常的的函数返回类型。

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
  throw new Error(message);
}

never 是任何类型的子类型,可以赋值给任何类型,但是任何类型都不能赋值给 neverany 也 TMD 不行。

# nullundefined

JavaScript 有两个原始值用来表示没有值或未初始化值:nullundefined

然而空值的检测受到 strictNullChecks 配置的影响,当 strictNullChecks 的配置为 on 的时候,ts 会严格的检测空值(建议为 on),在使用包含空值的变量时,需要自行排除空值情况

function doSomething(x: string | null) {
  if (x === null) {
    // do nothing
  } else {
    console.log("Hello, " + x.toUpperCase());
  }
}

# 非空断言

function callback(value: string | null) {
  console.log(value!.length); // 如果你确保 value 不会为空
}

# 类型的注解和推断

在变量的后面加 :Type 成为注解,显示的声明变量的类型,但是通过值的字面量 ts 也可以推断出类型。

const nickname = "nick name"; // 通过字面量进行类型推断
const age: number = 20;
const length = 192;