TypeScript核心

一、类型注解

  定义:变量后面约定类型的语法，就是类型注解

// 约定变量 age 的类型为 number 类型
let age: number = 18;
age = 19;

• : number 就是类型注解，它为变量提供类型约束。
• 约定了什么类型，就只能给该变量赋值什么类型的值，否则报错。
• 而且：约定类型之后，代码的提示也会非常清晰。

作用:约定类型，明确提示

二、原始类型

let age: number = 18;
let myName: string = '牛马程序员';
let isLoading: boolean = false;
let nullValue: null = null;
let undefinedValue: undefined = undefined;

原始类型：

• 使用简单，完全按照 JS 的类型来书写即可

TS 常用类型：

• JS 已有类型
  • 简单类型，number string boolean null undefined
  • 复杂类型，对象 数组 函数
• TS 新增类型
  • 联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any、泛型 等

三、数组类型

//写法一
let numbers: number[] = [1, 3, 5];
//写法二
let strings: Array<string> = ['a', 'b', 'c'];

推荐 number[ ]写法 

四、联合类型

定义：

• 类型与类型之间使用 | 连接，代表类型可以是它们当中的其中一种，这种类型叫：联合类型

①需求：数组中有 number 和 string 类型，这个数组的类型如何书写？

//解决多种类型方法
let arr: (number | string)[] = [1, 'a', 3, 'b'];

 ②.不加括号,不是一个整体,arr类型为number 和 只能存放字符串类型的数组

let arr: number | string[];

作用:  通过联合类型将多个类型合并为一个类型

五、类型别名

类型别名:

• type 类型别名 = 具体类型 基本语法
• 定义类型别名，遵循大驼峰命名规范，类似于变量
• 使用类型别名，与类型注解的写法一样即可

使用类型别名语法给类型取别字

// let arr: ( number | string )[] = [ 1, 'a', 4]
// 类型别名: type 类型别名 = 具体类型
type CustomArr = (number | string)[];
let arr: CustomArr = [1, 'a', 4];
let arr2: CustomArr = [2, 'b', 8];

 作用:

• 当同一类型（复杂）被多次使用时，可以通过类型别名，简化 该类型的使用

六、函数类型

定义:给函数指定类型，其实是给 参数 和 返回值 指定类型

//分别指定
// 函数声明
function add(num1: number, num2: number): number {
  return num1 + num2;
}

// 箭头函数
const add = (num1: number, num2: number): number => {
  return num1 + num2;
};
//同时指定
type AddFn = (num1: number, num2: number) => number;

const add: AddFn = (num1, num2) => {
  return num1 + num2;
};

作用:减少指定量 

注意：

通过类似箭头函数形式的语法来为函数添加类型，只适用于 函数表达式

 ①void类型 [函数返回值 ]

//如果函数没有返回值，定义函数类型时返回值类型为 void
const say = (): void => {
  console.log('hi');
};
//如果函数没有返回值，且没有定义函数返回值类型的时候，默认是 void
const say = () => {
  console.log('hi');
};
//如果指定返回值类型是 undefined 那返回值必须是 undefined
const add = (): undefined => {
  return undefined;
};

• 在 JS 中如果没有返回值，默认返回的是 undefined
• 但是 void 和 undefined 在 TypeScript 中并不是一回事
• 如果指定返回值类型是 undefined 那返回值必须是 undefined

②可选参数:? 

 使用 ? 将参数标记为可选

如果函数的参数，可以传也可以不传，这种情况就可以使用 可选参数 语法，参数后加 ? 即可 

//必选参数不能位于可选参数后 (start?: number, end: number) 这样是不行的
const mySlice = (start?: number, end?: number) => {
  console.log('起始Index:', start, '结束Index:', end);
};
mySlice();
mySlice(1);
mySlice(1, 2);

 注意:

• 必选参数不能位于可选参数后 (start?: number, end: number) 

 作用: void 是不确定函数的返回值

           ?     是可选参数

七、对象类型

• TS 的对象类型，其实就是描述对象中的 属性 方法 的类型，因为对象是由属性和方法组成的。

// 空对象
let person: {} = {};

// 有属性的对象
let person: { name: string } = {
  name: '同学',
};

// 有属性和方法，一行书写多个属性 ; 分隔
let person: { name: string; sayHi(): void } = {
  name: 'jack',
  sayHi() {},
};

// 换行写可以省略 ; 符号
let person: {
  name: string;
  sayHi(): void;
} = {
  name: 'jack',
  sayHi() {},
};

 对象类型中，①函数使用箭头函数类型，②属性设置可选，③使用类型别名。

//函数使用箭头函数类型
let person: {
  name: string
  sayHi: () => void
} = {
  name: 'jack',
  sayHi() {},
};
//对象属性可选
// 例如：axios({url,method}) 如果是 get 请求 method 可以省略
const axios = (config: { url: string; method?: string }) => {};

//使用类型别名
// {} 会降低代码可阅读性，建议对象使用类型别名
// const axios = (config: { url: string; method?: string }) => {};
type Config = {
  url: string;
  method?: string;
};
const axios = (config: Config) => {};

八、接口 interface

 interface 声明对象类型,

• 接口声明是命名对象类型的另一种方式

// 通过interface定义对象类型
interface Person {
  name: string;
  age: number;
  sayHi: () => void;
}
// 使用类型
let person: Person = {
  name: 'jack',
  age: 19,
  sayHi() {},
};

作用: 

①.interface 继承

使用 extends 实现接口继承，有多个接口，有相同的属性或者函数,达到类型复用

interface Point2D {
  x: number;
  y: number;
}
// 继承 Point2D
interface Point3D extends Point2D {
  z: number;
}
// 继承后 Point3D 的结构：{ x: number; y: number; z: number }

总结: 

• 接口继承的语法：interface 接口A extends 接口B { }
• 继承后 接口A 拥有 接口B 的所有属性和函数的类型声明

 ②.type 交叉类型

      使用 交叉类型 实现接口的继承效果

// 使用 type 来定义 Point2D 和 Point3D
type Point2D = {
  x: number;
  y: number;
};

// 使用 交叉类型 来实现接口继承的功能：
// 使用 交叉类型 后，Point3D === { x: number; y: number; z: number }
type Point3D = Point2D & {
  z: number;
};

let o: Point3D = {
  x: 1,
  y: 2,
  z: 3,
};

• 使用 & 可以合并连接的对象类型，也叫：交叉类型

 ③.interface vs type

interface	type
支持：对象类型	支持：对象类型，其他类型
复用：可以继承	复用：交叉类型

不同:type 不能重复定义，interface 可以重复会合并

• type 不可重复定义

• type Person = {
    name: string;
  };
  // 标识符“Person”重复  Error
  type Person = {
    age: number;
  };
  

• interface 重复定义会合并

• interface Person {
    name: string;
  }
  interface Person {
    age: number;
  }
  // 类型会合并，注意：属性类型和方法类型不能重复定义
  const p: Person = {
    name: 'jack',
    age: 18,
  };
  

九、类型推断

在 TS 中存在类型推断机制，在没有指定类型的情况下，TS 也会给变量提供类型。

• 声明变量并初始化时
• 决定函数返回值时

建议：

• 将来在开发项目的时候，能省略类型注解的地方就省略，充分利用TS推断 的能力，提高开发效率。
• 在你还没有熟悉 ts 类型的时候建议都加上类型，比如今天第一次写 ts 最好都写上
• 如果你不知道类型怎么写，可以把鼠标放至变量上，可以通过 Vscode 提示看到类型

十、字面量类型

• js 字面量如：18 'jack' ['a'] {age: 10} 等等。
• 使用 js字面量 作为变量类型，这种类型就是字面量类型。

• // : 'jack' 是字面量类型
  let name: 'jack' = 'jack';
  // : 18 是字面量类型
  let age: 18 = 18;
  
  // 报错：不能将类型“19”分配给类型“18”
  age = 19;
  

  
  //str1 类型是 string
  let str1 = 'Hello TS';
  
  // str2 类型是 Hello TS
  const str2 = 'Hello TS';
  
  //str2 是 const 声明的，值只能是 Hello TS，所以类型只能是 Hello TS

作用: 

• 字面量类型配合联合类型来使用，表示：一组明确的可选的值

• // 使用自定义类型:
  type Direction = 'up' | 'down' | 'left' | 'right'
  
  function changeDirection(direction: Direction) {
    console.log(direction)
  }
  
  // 调用函数时，会有类型提示：
  changeDirection('up')
  

• 解释：参数 direction 的值只能是 up/down/left/right 中的任意一个
• 优势：相比于 string 类型，使用字面量类型更加精确、严谨

十一、any类型

any 类型的作用是逃避 TS 的类型检查

• ①显式any情况：当变量的类型指定为 any 的时候，不会有任何错误，也不会有代码提示，TS会忽略类型检查

• let obj: any = { age: 18 }
  obj.bar = 100
  obj()
  const n: number = obj
  

• ②隐式any的情况：声明变量不给类型或初始值，函数参数不给类型或初始值

• // 声明变量不给类型或初始值
  let a;
  // 函数参数不给类型或初始值
  const fn = (n) => {}
  

• any 的使用越多，程序可能出现的漏洞越多，因此不推荐使用 any 类型，尽量避免使用。

十二、类型断言

有时候你会比 TS 更加明确一个值的类型，此时，可以使用类型断言来指定更具体的类型。 比如，

// aLink 的类型 HTMLElement，该类型只包含所有标签公共的属性或方法
// 这个类型太宽泛，没包含 a 元素特有的属性或方法，如 href
const aLink = document.getElementById('link')

• 但是我们明确知道获取的是一个 A 元素，可以通过 类型断言 给它指定一个更具体的类型。

const aLink = document.getElementById('link') as HTMLAnchorElement

• 解释:
  1. 使用 as 关键字实现类型断言
  2. 关键字 as 后面的类型是一个更加具体的类型（HTMLAnchorElement 是 HTMLElement 的子类型）
  3. 通过类型断言，aLink 的类型变得更加具体，这样就可以访问 a 标签特有的属性或方法了

例如：

const img = document.getElementById('img') as HTMLImageElement
// 如果不知道标签的类型：document.querySelector('div') 鼠标摸上去就可以看见

十三、泛型

TIP

• 软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。
• 在TypeScript中，泛型是一种创建可复用代码组件的工具。这种组件不只能被一种类型使用，而是能被多种类型复用。类似于参数的作用，泛型是一种用以增强类型（types）、接口（interfaces）、函数类型等能力的非常可靠的手段。

• 泛型：定义类型别名后加上<类型参数> 就是泛型语法， 使用的时候传入具体的类型即可

① 泛型别名

泛型别名基本使用，实现类型复用

// 对后台返回的数据进行类型定义
type User = {
  name: string;
  age: number;
}

type Goods = {
  id: number;
  goodsName: string;
}

type Data<T> = {
  msg: string;
  code: number;
  data: T
}

// 使用类型
type UserData = Data<User>
type GoodsData = Data<Goods>

• <T> 是一个变量，可以随意命名，建议遵循大驼峰即可。
• 和类型别名配合，在类型别名后加上泛型语法，然后类型别名内就可以使用这个类型参数
• 泛型可以提高类型的复用性和灵活性

 ②泛型接口

泛型接口基本使用，实现类型复用，了解内置泛型接口

// 对象，获取单个ID函数，获取所有ID函数，ID的类型肯定是一致的，但是可能是数字可能是字符串
interface IdFn<T> {
  id: () => T;
  ids: () => T[];
}

const idObj: IdFn<number> = {
  id() { return 1 },
  ids() { return [1, 2] },
};

//内置的泛型接口：
const arr = [1, 2, 3];
// TS有自动类型推断，其实可以看做：const arr: Array<number> = [1, 2, 3]
arr.push(4);
arr.forEach((item) => console.log(item));

在接口名称的后面添加 <类型变量>，那么，这个接口就变成了泛型接口，接口中所有成员都可以使用类型变量

 ③泛型函数

泛型函数基本使用，保证函数内类型复用，且保证类型安全

// 函数的参数是什么类型，返回值就是什么类型
function getId<T>(id: T): T {
  return id
}

let id1 = getId<number>(1)
let id2 = getId('2')
// TS会进行类型推断，参数的类型作为泛型的类型 getId<string>('2')

小结

• 泛型函数语法？
  • 函数名称后加上 <T> ， T是类型参数，是个类型变量，命名建议遵循大驼峰即可。
• T 什么时候确定？
  • 当你调用函数的时候，传入具体的类型，T 或捕获到这个类型，函数任何位置均可使用。
• 泛型函数好处？
  • 让函数可以支持不同类型（复用），且保证类型是安全的。
• 调用函数，什么时候可以省略泛型？
  • 传入的数据可以推断出你想要的类型，就可以省略。

// 我需要的类型 { name: string, age?: number } 但是推断出来是 { name: string}
let id2 = getId({name:'jack'})