深入浅出 TypeScript ｜青训营笔记

努力的小Qin
69 阅读4分钟

深入浅出 TypeScript（讲师：贺庆阳）

01 为什么学习TS

TS VS JS：

image.png

TS带来了什么：

image.png

TS推荐：

Awesome TypeScript

TypeScript Playground

02 TS基础

基础类型：

TypeScript是一种类型化的编程语言，支持类、接口、泛型和模块等特性。在TypeScript中，有以下基础类型：

  1. 数字类型（number）：表示数字，包括整数和浮点数。

  2. 字符串类型（string）：表示文本字符串，可以使用单引号或双引号。

  3. 布尔类型（boolean）：表示 true 或 false。

  4. 数组类型（array）：表示同一类型元素的数组，可以使用 [] 或 Array 两种语法形式来定义。

  5. 元组类型（tuple）：表示一个已知长度和类型的数组，例如 [string, number] 表示由一个字符串和一个数字组成的元组。

  6. 枚举类型（enum）：表示一组命名的常量序列，默认情况下从0开始编号，也可以手动指定编号。

  7. Any类型（any）：表示任意类型，可以设置为任意值，包括原始类型、对象类型、函数类型等。

  8. Void类型（void）：表示没有返回值的函数类型，通常用于定义回调函数。

  9. Null和Undefined类型（null和undefined）：表示 null 和 undefined 两个特殊的类型，所有类型都可以赋值为null或undefined。

  10. Never类型（never）：表示永不存在的值的类型，通常用于函数抛出异常或无限循环等场景。

下面是一些基础类型的示例：

let num: number = 123;
let str: string = 'hello';
let flag: boolean = true;
let arr1: number[] = [1, 2, 3];
let arr2: Array<number> = [4, 5, 6];
let tuple: [string, number] = ['world', 2023];
enum Color { Red, Green, Blue };
let color: Color = Color.Red;
let anything: any = 'anything goes';
let nothing: void = undefined;
let nullable: null | string = null;
function neverReturn(): never {
  throw new Error('never');
}

需要注意的是，TypeScript中的类型是静态类型，在编译时就已经确定了。这使得TypeScript可以提供更好的开发工具支持和更强的类型检查功能，从而减少了一些常见的运行时错误。

函数类型：

在 TypeScript 中，函数类型是一种类型，可以用来对函数的参数和返回值进行约束。函数类型包括函数声明、函数表达式和箭头函数等多种形式。

下面是几个函数类型的示例：

  1. 函数声明
function add(x: number, y: number): number {
  return x + y;
}

上述代码中，add 函数接受两个参数 x 和 y，都是 number 类型，并返回一个 number 类型的值。

  1. 函数表达式
let multiply = function(x: number, y: number): number {
  return x * y;
};

函数表达式将一个匿名函数赋值给变量 multiply，其函数类型为 (x: number, y: number) => number，表示接受两个参数 x 和 y，都是 number 类型，并返回一个 number 类型的值。

  1. 箭头函数
let divide = (x: number, y: number): number => x / y;

箭头函数是一种更简洁的函数表达式形式，上述代码定义了一个箭头函数 divide，其函数类型为 (x: number, y: number) => number。它接受两个参数 x 和 y，都是 number 类型，并返回一个 number 类型的值。

除了上述示例，还有一些高级的函数类型，如可选参数、默认参数、剩余参数和函数重载等。这些特性可以更加灵活地定义函数类型，以适应各种编程场景。

interface:

在 TypeScript 中，interface 是一种定义对象类型的方式，可以用来描述一个对象的形状（即属性名和属性值的类型）、方法和类等。

interface 的语法形式为：

interface InterfaceName {
  property1: type1;
  property2?: type2;
  [property3: string]: any;
  method1(param1: type3, param2: type4): returnType;
}

其中，InterfaceName 是接口名称，property1、property2 等是属性名称，type1、type2 等是属性值类型，param1、param2 等是方法参数名称，type3、type4 等是方法参数类型，returnType 是方法返回值类型。

下面是几个接口的示例：

  1. 定义只读属性的接口
interface Person {
  readonly name: string;
  age: number;
}

上述代码中，Person 接口定义了两个属性：name 是只读属性，类型为 string；age 是可写属性，类型为 number。

  1. 定义可选属性的接口
interface Car {
  brand: string;
  model?: string;
}

上述代码中，Car 接口定义了两个属性：brand 是必填属性，类型为 string；model 是可选属性，类型为 string 或者 undefined。

  1. 定义可索引类型的接口
interface Dictionary {
  [key: string]: number;
}

上述代码中，Dictionary 接口定义了一个字符串索引签名，任意字符串都可以作为属性名，属性值必须为 number 类型。

avatar
文章
阅读
粉丝