TypeScript

npm i typescript -g
tsc -v

一、基础类型

tsc --init  // 会生成 tsconfig.json
tsc -w

打开另一个终端

node index.js

let num: number = 123;
let str: string = "小满";
let b: boolean = true;
let n: null = null;
let u: undefined = undefined;
// let v1: void = null;
let v2: void = undefined;

// 函数没有返回值
function myFn(): void {
  // 不能 return 任何值
}

二、任意类型

npm i ts-node -g

生成 package.json

npm init -y

声明文件

npm i @types/node -D

现在可以只开一个控制台，执行

ts-node index.ts

any 任意类型；unknown 不知道类型

1. top type：顶级类型 any unknown，可以包含下面所以类型

2. Object

3. 自身实例：Number String Boolean

4. number string boolean

5. 1 '小满' false

6. never

let a: any = [];
let a: unknown = [];
a = 1;
a = "123";
a = false;
a = Symbol(1);

// unknown 和 any 也是有一定区别的：
let a: any = 1;
let b: number = 5;

a = b;
b = a;

（1）unknown 不可以赋值给别的类型的，只能赋值给自身或者 any

let a: unknown = 1;
let b: number = 5;

a = b;
b = a; // 报错

（2）unknown 没有办法读取任何属性，方法也不可以调用

let xiaoman: unknown = { shuai: true, open: () => 123 };
xiaoman.shuai; // 报错
xiaoman.open; // 报错

// any 类型则不报错

三、Object、object 以及 {}

1. Object

所有原始类型以及对象类型都指向 Object

在 ts 中，Object 表示包含所有类型

let a: Object = 123;
let a1: Object = "123";
let a2: Object = [];
let a3: Object = {};
let a4: Object = () => 123;

2. object

常用于泛型约束，代表非原始类型的一种类型，不支持 原始类型，支持所有 引用类型

let a: object = 123; // 错误 原始类型
let a1: object = "123"; // 错误 原始类型
let a2: object = false; // 错误 原始类型
let a3: object = []; // 正确
let a4: object = {}; // 正确
let a5: object = () => 123; // 正确

3. {}

可以理解成 new Object，和第一个一样，原始类型 和 引用类型 都可以

let a: {} = 123;
let a1: {} = "123";
let a2: {} = [];
let a3: {} = {};
let a4: {} = () => 123;

虽然字面量模式可以赋值任意类型，但是赋值之后无法修改

let a: {} = { name: 1 };

// 无法对变量进行任何操作
a.age = 2; // 报错，没有办法 增加

最好少用

四、接口和对象类型

使用 interface 来定义一种约束，让数据的结构满足约束的格式

不能多属性，也不能少属性

1. 重名，重合

interface Axx {
  name: string;
  age: number;
}

interface Axx {
  Ikun: string;
}

等同于

interface Axx {
  name: string;
  age: number;
  Ikun: string;
}

2. 定义任意 key

索引签名

interface Axx {
  name: string;
  age: number;
  [propName: string]: any;
}

let a: Axx = {
  name: "小满",
  age: 88,
  a: 1,
  b: 2,
  c: 3,
};

3. 可选操作符 & readonly

interface Axx {
  name: string;
  age?: number; // 可选操作符
  readonly id: number;
  readonly callback: () => boolean;
}

let a: Axx = {
  name: "小满",
  id: 1,
  callback: () => {
    return false;
  },
};

a.callback();

// 以下报错
a.callback = () => {
  return true;
};

一般函数或者 id 会写 readonly，不能随便改

4. 接口继承

interface Axx extends B {
  name: string;
  age?: number; // 可选操作符
  readonly id: number;
  readonly callback: () => boolean;
}

interface B {
  xxx: string;
}

let a: Axx = {
  xxx: "xxx",
  name: "小满",
  id: 1,
  callback: () => {
    return false;
  },
};

A 继承 B，A 与 B 合并，a 必须具备 xxx 属性

5. 定义函数类型

interface Fn {
  (name: string): number[];
}

const fn: Fn = function (name: string) {
  return [1];
};

五、数组类型

1. 数组普通类型

let arr: number[] = [1, 2, 3, 4, 5];
let arr1: boolean[] = [true, false];

泛型方式

let arr2: Array<boolean> = [true, false];

2. 定义对象数组，使用 interface

interface X {
  name: string;
  age?: number;
}

let arr: X[] = [{ name: "小满" }, { name: "胡萝卜" }];

3. 二维数组

let arr: number[][] = [[1], [2], [3]];

泛型方式

let arr1: Array<Array<number>> = [[1], [2], [3]];

4. 大杂烩数组

let arr: any = [1, "sadsad", true, {}];

5. 数组在函数中的用法

// ... 是拓展运算符，可用于将函数参数收集后转为一个数组实例
function a(...args: string[]) {
  console.log(args); // ['1','2']
}

a("1", "2");

arguments 是类数组，但是没有数组上的方法

function b(...args: string[]) {
  console.log(arguments); // {'0':'1','1':'2'}
  let b: IArguments = arguments;
}

b("1", "2");

// IArguments 原理
interface A {
  callee: Function;
  length: number;
  [index: number]: any;
}

六、函数类型

1. 函数定义类型和返回值

function add(a: number, b: number): number {
  return a + b;
}

console.log(add(1, 1)); // 2

箭头函数定义类型和返回值

const add = (a: number, b: number): number => a + b;

console.log(add(1, 1)); // 2

2. 函数默认的参数

function add(a: number = 10, b: number = 20): number {
  return a + b;
}

console.log(add()); // 30

函数可选参数

function add(a: number = 10, b?: number): number {
  return a + b;
}

console.log(add()); // NaN

3. 参数是一个对象如何定义

interface User {
  name: string;
  age: number;
}

function add(user: User): User {
  return user;
}

console.log(add({ name: "小满", age: 24 })); // { name: '小满', age: 24 }

4. 函数 this 类型

interface Obj {
  user: number[];
  add: (this: Obj, num: number) => void;
}

// ts 可以定义 this 的类型，必须是第一个参数定义 this 的类型
// js 种无法使用
let obj: Obj = {
  user: [1, 2, 3],
  add(this: Obj, num: number) {
    this.user.push(num);
  },
};

obj.add(4);
console.log(obj); // { user: [ 1, 2, 3, 4 ], add: [Function: add] }

5. 函数重载

let user: number[] = [1, 2, 3];
function findNum(add: number[]): number[]; // 如果传的是一个 number 类型的数组，那就做添加
function findNum(id: number): number[]; // 如果传入了 id， 就是单个查询
function findNum(): number[]; // 如果没有传入东西就是查询全部

function findNum(ids?: number | number[]): number[] {
  if (typeof ids == "number") {
    return user.filter((v) => v == ids);
  } else if (Array.isArray(ids)) {
    user.push(...ids);
    return user;
  } else {
    return user;
  }
}

console.log(findNum()); // [ 1, 2, 3 ]
console.log(findNum(3)); // [ 3 ]
console.log(findNum([4, 5, 6])); //[ 1, 2, 3, 4, 5, 6 ]

七、联合类型 | 类型断言 | 交叉类型