TypeScript 简单入门

let binaryLiteral: number = 0b1010; // 二进制
let octalLiteral: number = 0o744;    // 八进制
let decLiteral: number = 6;    // 十进制
let hexLiteral: number = 0xf00d;    // 十六进制

2. 字符串类型(String)

使用 string

let name: string = "blog";
let years: number = 5;
let words: string = `您好，今年是 ${ name } 发布 ${ years + 1} 周年`;

3. 布尔类型(Boolean)

最基本的数据类型就是简单的 true/false 值，在JavaScript 和 TypeScript 里叫做 boolean

let flag: boolean = true;

4. 数组类型(Array)

TypeScript 像 JavaScript 一样可以操作数组元素。有两种方式可以定义数组：

// 在元素类型后面加上[]
let arr: number[] = [1, 2];

// 或者使用数组泛型
let arr: Array<number> = [1, 2];

5. 函数类型

// 在函数上直接声名 参数any 和 返回值boolean 
function isFalsy(val:): boolean {
    return val === 0 ? false : !val;
}

// 函数没有返回值则使用void
function hello(str:): void {
    alert(str);
}

6. 任意类型(any)

声明为 any 的变量可以赋予任意类型的值，意味着不做任何类型检查，失去TS的意义（尽量避免使用）

一般使用场景：第三方库没有提供类型文件时可以使用 any 类型转换遇到困难或者数据结构太复杂难以定义

let x: any = 1;    // 数字类型
x = 'hello';    // 字符串类型
x = false;    // 布尔类型

7. void类型

用于标识方法返回值的类型，表示该方法没有返回值或返回 undefined

function warnUser(): void {
    console.log("This is my warning message");
}

8. null 和 undefined

null

在 JavaScript 中 null 表示 “什么都没有”
null是一个只有一个值的特殊类型。表示一个空对象引用
用 typeof 检测 null 返回是 object

undefined

在 JavaScript 中, undefined 是一个没有设置值的变量。
typeof 一个没有值的变量会返回 undefined。
Null 和 Undefined 是其他任何类型（包括 void）的子类型，可以赋值给其它类型，如数字类型，此时，赋值后的类型会变成 null 或 undefined。

let x: number;

x = 1; // 运行正确
x = undefined;    // 运行错误
x = null;    // 运行错误

上面的例子中变量 x 只能是数字类型。如果一个类型可能出现 null 或 undefined，可以用 | 来支持多种类型，示例代码如下：

let x: number | null | undefined;

x = 1; // 运行正确
x = undefined;    // 运行正确
x = null;    // 运行正确

9. object

object表示非原始类型，也就是除 number，string，boolean，symbol，null 或 undefined 之外的类型

function hello(obj: object | null): void {
    console.log(obj);
}

hello({ name: 'zhangsan' });
hello(null);

10. 元组类型(tuple)

Tuple

let x: [string, number];

x = ['hello', 10]; // OK
x = [10, 'hello']; // Error

x[2] = 'world'; // OK, 字符串可以赋值给(string | number)类型
x[3] = true; // Error, 布尔不是(string | number)类型

11. 枚举类型(Enum)

enum

// 普通枚举 初始值默认为 0 其余的成员会会按顺序自动增长 可以理解为数组下标
enum Color {
  RED,
  PINK,
  BLUE,
}

const pink: Color = Color.PINK;
console.log(pink); // 1

// 设置初始值
enum Color {
  RED = 10,
  PINK,
  BLUE,
}
const pink: Color = Color.PINK;
console.log(pink); // 11

// 字符串枚举 每个都需要声明
enum Color {
  RED = "红色",
  PINK = "粉色",
  BLUE = "蓝色",
}

const pink: Color = Color.PINK;
console.log(pink); // 粉色

// 常量枚举 它是使用 const 关键字修饰的枚举，常量枚举与普通枚举的区别是，整个枚举会在编译阶段被删除 我们可以看下编译之后的效果
const enum Color {
  RED,
  PINK,
  BLUE,
}

const color: Color[] = [Color.RED, Color.PINK, Color.BLUE];

//编译之后的js如下：
var color = [0 /* RED */, 1 /* PINK */, 2 /* BLUE */];
// 可以看到我们的枚举并没有被编译成js代码 只是把color这个数组变量编译出来了

12. never类型

never

let x: never;
let y: number;

// 运行错误，数字类型不能转为 never 类型
x = 123;

// 运行正确，never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();

// 运行正确，never 类型可以赋值给 数字类型
y = (()=>{ throw new Error('exception')})();

// 返回值为 never 的函数可以是抛出异常的情况
function error(message:): never {
    throw new Error(message);
}

// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {
    while (true) {}
}

TypeScript 类型推论

理论上来说在我们声明任何变量的时候都需要声明类型（包括普通变量、函数、组件、react hook 等），声明函数、组件、react hook 等需要声明参数和返回值的类型

但是在很多情况下，TS可以帮助我们自动推断，我们就不用声明了，比如：

1. 变量的类型推论

这里虽然没有显示声明，但是ts自动推断这个变量是 string 类型：

TypeScript 简单入门_赋值_03

可以看到，定义变量 str 时并没有指定它的类型，而是直接赋值一个字符串，当再给它赋一个数值时就会报错。这里 typescript 就根据我们赋给 str 的值的类型，推断出我们的 str 的类型，是字符串类型，所以不可以将数值类型赋给它。

这个就是最基本的类型推论，根据右侧的值推断左侧变量的类型。

2. 返回值的类型推论

ts自动推断函数返回值这是个 number 类型：

TypeScript 简单入门_javascript_04

3. 多类型联合

当我们定义一个数组或者元组这种包含多个元素的值的时候，多个元素可以有不同的类型，这时候 typescript 会将多个类型合并起来，组成一个联合类型，例如：

const arr = [1, 'a']
arr.push(false) // error，类型“false”的参数不能赋给类型“string | number”的参数

此时的 arr 的元素被推断为 string | number，也就是元素可以是 string 类型也可以是 number 类型，除此之外的类型是不可以的。

再一个例子：

let value = Math.random() * 10 > 5 ? 123 : 'abc'
value = false // error，不能将类型“false”分配给类型“string | number”。

value 的值是随机的，但是只能是 string 或者 number，它的类型被推断出是 string | number，所以不能赋值 false。

4. 上下文类型

前面讲的例子都是根据 = 符号右边值的类型，推断出左侧变量的类型。现在还有一种是根据左侧的类型推断右侧的类型，这就是上下文类型。官网的例子：

window.onmousedown = function (mouseEvent) {
    console.log(mouseEvent.abc); // error，mouseEvent 上不存在属性 abc
};

表达式左侧是 window.onmousedown (鼠标按下时发生事件)，因此 TypeScript 会推断赋值表达式右侧函数的参数是事件对象，且是 MouseEvent。在回调函数中使用 mouseEvent 的时候，你可以访问鼠标事件对象的所有属性和方法，当访问不存在属性的时候，就会报错。