一、TypeScript快速搭建

1.1 快速搭建指令

-- 安装TypeScript
npm i -g typescript

-- 查看TypeScript的版本
tsc -v 

-- 全局安装ts-node
npm i -g ts-node

-- 快速创建一个tsconfig.json
tsc --init

1.2 HelloWorld入门

1）新建一个HelloWorld.ts文件

function say(word: string) {
    console.log(word)
}
say('Hello, World')

2）指令运行

--可以使用tsc命令将.ts转换成.js
tsc HelloWorld.ts --strict --alwaysStrict false --watch

--注意：
  指定转译的目标文件后，tsc 将忽略当前应用路径下的 tsconfig.json 配置，
  因此我们需要通过显式设定如下所示的参数，让 tsc 以严格模式检测并转译 TypeScript 代码。
  同时，我们可以给 tsc 设定一个 watch 参数监听文件内容变更，实时进行类型检测和代码转译

--可以直接用ts-node运行
ts-node HelloWord.ts

二、TypeScript深入学习

2.1 基础类型：TypeScirpt 与 JavaScript 有何不同

JavaScript 基础类型包含： string、number、bigint、boolean、undefined 、 symbol 和 null
【TypeScript对应JavaScript底层类型】

a）string类型

let firstname: string = 'Captain'; // 字符串字面量
let familyname: string = String('S'); // 显式类型转换
let fullname: string = `my name is ${firstname}.${familyname}`; // 模板字符串

b）数字类型

/** 十进制整数 */
let integer: number = 6;
/** 十进制整数 */
let integer2: number = Number(42);
/** 十进制浮点数 */
let decimal: number = 3.14;
/** 二进制整数 */
let binary: number = 0b1010;
/** 八进制整数 */
let octal: number = 0o744;
/** 十六进制整数 */
let hex: number = 0xf00d;
如果使用较少的大整数，那么我们可以使用bigint类型来表示，如下代码所示。

let big: bigint =  100n;

--number和bigint都表示数字，两个类型不兼容。

c）布尔值

const flag : boolean = false

d）Symbol

ES6后，TypeScript 开始支持新的Symbol原始类型，通过Symbol构造函数，创建一个唯一标识

const symbol1: symbol = Symbol();
const symbol2: symbol = Symbol('42');

e）Array

const arr1: number[] = [1, 2, 3];
--等同于 const arr1: Array<number> = [1, 2, 3];

const arr2: string[] = ['x', 'y', 'z'];
--等同于 const arr2: Array<string> = ['x', 'y', 'z'];

f）Tuple

元组最重要的特性是可以限制数组元素的个数和类型，适合用来实现多值返回。
在 JavaScript 中并没有元组的概念，作为一门动态类型语言，它的优势是天然支持多类型元素数组。
出于较好的扩展性、可读性和稳定性考虑，我们往往会更偏向于把不同类型的值通过键值对的形式塞到一个对象中，再返回这个对象（尽管这样会增加代码量），而不是使用没有任何限制的数组。
TypeScript 的元组类型正好弥补了这个不足，使得定义包含固定个数元素、每个元素类型未必相同的数组成为可能。

type TupleDemo = [string, number]
const tupleDemo : TupleDemo = ['a', 1]
console.log(tupleDemo[0], tupleDemo[1])
----------------------------------------
--类型不匹配会报错 
const tupleDemo : TupleDemo = [2, 'c']
--要满足个数和类型符合

不可变元组：

元素值不可变，不可再增删改元素值

type tupleDemo = readonly [string, number]
-----------------------------
或者通过as const声明为常量
const enumDemp = ['1', 2] as const

---------------------------------

g) any、 unknown、never

any 指的是一个任意类型，选择性绕过静态类型检测的作弊方式。

let a : any = 0
---等同于
let a = 0

任意类型可以给any赋值，any也可以给任意类型赋值【尽量避免使用any】

unknown，描述类型并不确定的变量。
任意类型可以给unknown赋值，但unknown只能给unknown或any赋值

let b : unknown = 40
---错误
b.toFixed(2)  //error
b.length  //error
--配合类型保护或类型断言才能对其操作，否则在编译阶段就会报错
--类型断言
let c : unknown;
c = 'a';
(c as string).length
--类型保护
let c : unknown;
c = 'hello';
if (typeof c === 'string') {
  c.length
}

never，描述表示不应存在的状态
适用场景：1. 无返回值的函数 2. 抛出异常错误函数

const foo = () : never => {
    while (true) {} // 死循环，永远也不会结束
}
const bar = () : never => {
  throw new Error()
}

h) void、 null、 undefined

void 类型：仅适用于表示没有返回值的函数。
undefined 类型：表示一个可缺省、未定义的属性。
null类型：表示对象或属性可能是空值

2.2 TypeScript常用官方类型

2.2.1 Omit

定义：剔除/省略
使用：对已定义对象中剔除自己不需要的一部分形成新的定义类型

type SelectPickTuple = {
  value: string,
  text: string,
  children: Array<SelectChoseTuple>
}

type SelectPickChild = Omit<SelectPickTuple, 'children'>

2.2.2 Pick

定义：采集
使用：采集已定义对象中需要的部分形成新的定义类型

type TabTuple = {
  name: string,
  value: number
}

// 定义菜单子项类
type MenuItem = {
  url: string,
  value: string,
} & Pick<TabTuple, 'name'>

2.2.1 Partial

定义：转换为可选项
使用：将定义好的对象（包含必选+可选）转换为可选项

type TabTuple = {
  name: string,
  value: number
}

type newTabTuple: Partial<TabTuple> = {
  name : '123'
}

// 等同于
type TabTuple = {
  name?: string,
  value?: number
}

2.2.3 Required

定义：转换为必选项
使用：将定义好的对象（包含必选+可选）转换为必选项

type TabTuple = {
  name: string,
  value?: number
}

type newTabTuple: Required<TabTuple> = {
  name : '123',
  value : 1
}

// 等同于
type TabTuple = {
  name: string,
  value: number
}

2.2.4 Readonly

定义：只读
使用：Readonly 就是为类型对象每一项添加前缀 Readonly

type TabTuple = {
  readonly name: string,
  value?: number
}

type newTabTuple: Readonly<TabTuple> = {
  name : '123',
  value : 1
}

// 等同于
type TabTuple = {
  readonly name: string,
  readonly value: number
}

2.2.5 Exclude

定义：排除/不包含
使用：一般用于处理联合类型

type TupType = '1' | '2' | '3' // 联合类型

const TupleObj : Exclude<TupType, '1' | '2'> = '3'

//  从第一个联合类型参数中，将第二个联合类型中出现的联合项全部排除，只留下没有出现过的参数
type A = "age" | "name";
type B = "like" | "name";
type C = Exclude<A, B>;
// 解析：第一项是A，从第二项B开始，对比A中是否存在B项的类型，如果有，删除相同项，并返回剩余项

// 相对于
type C ='age'
------------------------------------------------------------
type A = "age" | "name";
type B = "age" | "name" | "height";
type C = Exclude<A, B>;

// 相对于
type C = never

2.2.6 Extract

定义：提取/包括
使用：一般用于处理联合类型

type TupType = '1' | '2' | '3' // 联合类型

const TupleObj : Extract<TupType, '1' | '2'> = '1'

type A = "age" | "name";
type B = "like" | "eat";
type C = Extract<A, B>;
// 解析：第一项是A，从第二项B开始，对比A中是否存在B项的类型，如果有, 提取相同项，并返回提取项

//相当于 
type C = nerver
-----------------------------------------------------------------------------------
  
type A = "age" | "name";
type B = "like" | "eat" | "name";
type C = Extract<A, B>;
//相当于 
type C = "name"

2.2.7 ReturnType

定义：获取函数返回值的类型

// 正确用法
const myFun = () => ({
    name: 'zhangsan',
    age: 233,
    sex: '1',
    tel: 123456789,
    fun: () => {
        return 233;
    },
    arr: [1,2,3,4,5,6]
});

type Test2 = ReturnType<typeof myFun>;

2.2.8 NonNullable

定义：排除null和undefined

type TabTuple = {
  name: string | null | undefined,
  value: number | null
}

type noNullTabTuple : NonNullable<TabTuple>

//等同于
type TabTuple = {
  name: string,
  value: number
}

TypeScript入门