理解Typescript｜青训营笔记

evosoon
86 阅读6分钟

JavaScript & TypeScript

TypeScript 是 JavaScript 的超集，它包含了 JavaScript 的所有元素，并扩展了 JavaScript 的语法。TS增加了静态类型 ，类 ，模块 ，接口 ，泛型注解 等特性。TS需要编译为 JS，再交给 JS解析器执行。

image.png

基础语法

数据类型

  • number 表示数字，可以是整数或浮点数。例如：let num: number = 123;

  • string 表示字符串，可以使用单引号或双引号来定义。例如：let str: string = 'hello';

  • boolean 布尔值，只有两个值：true 和 false。例如：let isTrue: boolean = true;

  • null undefined 表示空值和未定义。它们的类型分别为 null 和 undefined。例如：let n: null = null; let u: undefined = undefined;

  • symbol 表示独一无二的值。例如：let sym1 = Symbol(); let sym2 = Symbol('key');

  • Array 表示一组相同类型的值。可以使用 类型[] 或 Array<类型> 来定义。例如：let arr1: number[] = [1, 2, 3]; let arr2: Array<number> = [1, 2, 3];

  • Object 表示一个对象，可以使用接口(interface)或类型别名来定义对象的类型。

  • Enum 用于定义一组命名的常数。当一个变量有几种可能的取值时，可以将它定义为枚举类型。枚举成员默认从 0 开始递增，也可以手动指定成员的值

  • never 表示永不存在的值的类型，常用于抛出异常或无限循环的函数返回值类型。

  • any 表示任意类型，可以赋予任意类型的值。例如：let notSure: any = 6; notSure = 'I am string'; notSure = false;

  • unknown 类型与 any 类型类似，但更安全，因为在对 unknown 类型的值进行操作之前，需要先进行类型判断。

  • void 表示没有任何返回值的函数返回值类型。function warnUser(): void{ ... }

  • Tuple 用来表示一个已知元素数量和类型的数组，各元素的类型不必相同。例如，你可以定义一个元组，它包含一个 string 类型元素和一个 number 类型元素 let tuple: [string, number];

函数类型

image.png

interface

接口 用来规范对象类型

  • 可选属性：接口里的属性不全都是必需的。带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个?符号。
  • 可读属性：readonly
  • 可以描述自定义属性
  • 可以描述函数类型： interface AddFunc { (num1: number, num2: number): number; }

ts_类

与js差不多，增加了一些定义。

  • 增加了private, public, protected修饰符

  • 抽象类：1、只能被继承，不能被实例化。2、作为基类，抽象方法必须被子类实现。

  • interface约束类，使用implements关键字

高级类型

联合类型与交叉类型

联合类型：联合类型通过 | 符号连接多个类型从而生成新的类型。它主要是取多个类型的交集，即多个类型共有的类型才是联合类型最终的类型。联合类型可以是多个类型其中一个，可做选择。

交叉类型：交叉类型由一组有序的成员类型构成，交叉类型表示类型同时为多个类型，等同于运算符 &&，类似于数学运算中的乘法。交叉类型也是通过交叉类型字面量来定义的。 image.png

类型断言

类型断言的主要作用是在你比 TypeScript 更清楚某个值的类型的情况下，手动指定一个值的类型。这样可以避免 TypeScript 编译器报错，同时也可以让你更好地利用 TypeScript 的类型系统。

类型断言是 TypeScript 中的一个概念，它允许你手动指定一个值的类型。类型断言有两种形式。一种是“尖括号”语法：

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

另一种是 as 语法：

typescript
复制代码
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

两种形式是等价的。需要注意的是，在使用 JSX 时，只有 as 语法断言是被允许的。

类型别名（type vs interface）

二者都是给类型起别名。 相同点：都可以定义对象或函数，都允许继承

不同点：

  • interface是用来定义对象，type用来定义别名方便使用。
  • type可以定义基本类型，interface不行。
  • interface可以合并重复声明，type不行

总结：interface是一个接口的概念，用来描述对象。type别名的概念，用来对各个别名定义。

image.png

ts—泛型-什么时候需要泛型？

1、泛型是 TypeScript 中的一个重要概念，它允许你在定义函数、接口、类时不预先指定具体的类型，而是在使用时指定类型。泛型可以用来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

2、泛型的语法是使用尖括号 <> 来包裹类型变量，一般可以用 T 来表示或者其他任何表示。T 相当于一个占位符或者变量，在使用时把定义的类型像参数传入。泛型可以在定义函数、接口或类时不预先指定类型，而是使用时指定类型。

3、使用时有两种方法指定类型： 当使用泛型时，有两种方法可以指定类型：

  • 显式指定类型：在调用泛型函数或实例化泛型类时，可以在尖括号 <> 中显式指定类型。例如：
function identity<T>(arg: T): T {
  return arg
 }

let output = identity<string>("myString");
  • 类型推断：在调用泛型函数或实例化泛型类时，如果不显式指定类型，TypeScript 编译器会根据传入的参数自动推断出类型。例如：
function identity<T>(arg: T): T {
  return arg
 }
let output = identity("myString");

在这个例子中，虽然我们没有显式指定类型，但 TypeScript 编译器会根据传入的参数 "myString" 推断出 T 的类型为 string。

4、泛型的作用：临时占位，通过传过来的类型进行临时推导。

如何使用泛型来定义一个函数：

function identity<T>(arg: T): T {
  return arg;
}

在这个例子中，我们定义了一个名为 identity 的函数，它接收一个类型为 T 的参数 arg 并返回一个类型为 T 的值。当我们调用这个函数时，可以指定 T 的具体类型：

let output = identity<string>("myString");

泛型-基础操作符

在 TypeScript 中，有一些基础操作符可以用来操作泛型类型：

typeof typeof 操作符可以用来获取一个变量的类型。例如：

let s = "hello";
type TypeOfS = typeof s; // TypeOfS 的类型为 string

keyof keyof 操作符可以用来获取一个对象类型的所有键。例如：

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

type PersonKeys = keyof Person; // PersonKeys 的类型为 "name" | "age"

in in 操作符可以用来遍历枚举类型。例如：

type Keys = "a" | "b" | "c";
type Obj = { [p in Keys]: any }; // Obj 的类型为 { a: any, b: any, c: any }

T[K] 索引访问操作符 T[K] 可以用来获取对象类型 T 的属性 K 的类型。例如：

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

type NameType = Person["name"]; // NameType 的类型为 string

extends 条件类型中的 extends 关键字可以用来判断一个类型是否能够赋值给另一个类型。例如：

interface Animal {
  name: string;
}

interface Cat extends Animal {
  meow(): void;
}

type IsCat<T> = T extends Cat ? true : false;

type A = IsCat<Cat>; // A 的类型为 true
type B = IsCat<Animal>; // B 的类型为 false

image.png

ts—泛型-常用工具类型

image.png

四、ts实战

明文件

在 TypeScript 中，当我们使用第三方库时，通常需要提供一个声明文件来描述这个库的类型信息。声明文件通常以 .d.ts 为后缀，它包含了第三方库的类型定义。

  • declare：declare 关键字用来定义一个全局变量。例如：
declare var $: any;
  • .d.ts：声明文件通常以 .d.ts 为后缀，它包含了第三方库的类型定义。例如：
// jquery.d.ts
declare var $: any;
  • @types：@types 是一个 npm 包，它包含了许多第三方库的声明文件。你可以通过安装对应的 @types 包来获取第三方库的类型定义。例如：
npm install @types/jquery
  • tsconfig.json：在 tsconfig.json 文件中，你可以配置 TypeScript 编译器的相关选项，包括声明文件的相关配置。例如：
{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types"]
  }
}

泛型约束后端接口类型

image.png

总结

TS作为JS的超集，增强了类型安全，提高了生产力

avatar
文章
阅读
粉丝