首页 > 其他分享 >TypeScript划重点【纯干货版】

TypeScript划重点【纯干货版】

时间:2024-03-25 14:58:48浏览次数:26  
标签:TypeScript console string number value 干货 类型 重点 name

7年前端因为不会吹牛逼在家待业中,有同学帮忙内推个职位吗?中级开发就行,不挑食(真tm卑微!!!)

TypeScript 的主要特点包括:

  • 静态类型:TypeScript 允许开发者为变量、函数参数和返回值指定类型。这有助于在编译时捕捉错误,而不是在运行时。
  • 类和接口:TypeScript 支持基于类的面向对象编程,允许定义类、接口和继承。这有助于组织复杂的代码结构。
  • 模块系统:TypeScript 有一个模块系统,允许将代码分割成可重用的模块。这有助于管理依赖关系并提高代码的可维护性。
  • 装饰器:TypeScript 支持装饰器,这是一种在声明类、方法、属性或参数时添加注解的高级特性。
  • 泛型:TypeScript 的泛型允许创建可重用的组件,这些组件可以在不同的类型之间通用。
  • 编译目标:TypeScript 可以编译到不同版本的 JavaScript,包括 ES3、ES5、ES6(ES2015)、ESNext 等。
  • 工具支持:TypeScript 有丰富的工具链支持,包括 Visual Studio Code、WebStorm、Sublime Text 等流行的编辑器和 IDE。
  • 社区和生态系统:TypeScript 有一个活跃的社区和不断增长的生态系统,提供了大量的库和框架支持。

长话短说,只搞重点和干货,ts就是js的超集,就是在js的基础上做了封装和拓展。

基础类型

Number、String、Boolean、Object、Null、Undefined没意思不多说
any也没什么说的,ts的救命类型,但是不建议大量使用
void表示没有任何类型。 一般用于给函数没有返回值时
never类型表示的是那些永不存在的值的类型

数组Array【重点】

// 元素类型[ ]
let list: number[] = [1, 2, 3];

// Array<元素类型>
let list: Array<number> = [1, 2, 3];

元组Tuple

其实就是数组的一种,简单说就是可以定义多种类型的数组,并且已知元素数量和类型,各元素的类型不必相同。

let t1: [string, number]
t1 = ['hello', 10] // OK
t1 = [10, 'hello'] // Error

枚举enum

枚举可以定义一些带名字的常量。

enum Color {
  Red,
  Green,
  Blue
}
 
// 枚举数值默认从0开始依次递增
// 根据特定的名称得到对应的枚举数值
let myColor: Color = Color.Green  // 0
console.log(myColor, Color.Red, Color.Blue)

枚举使用场景

状态管理

使用枚举来表示不同的状态,例如 enum Status { Pending, Active, Inactive }。

enum Status {
  Pending,
  Active,
  Inactive
}

function updateStatus(entity: { status: Status }) {
  switch (entity.status) {
    case Status.Pending:
      console.log('Processing the entity...');
      break;
    case Status.Active:
      console.log('The entity is active.');
      break;
    case Status.Inactive:
      console.log('The entity is inactive.');
      break;
    default:
      console.log('Unknown status.');
  }
}

const entity = { status: Status.Pending };
updateStatus(entity);
方向

表示方向或方位,例如 enum Direction { Up, Down, Left, Right }。

enum Direction {
  Up,
  Down,
  Left,
  Right
}

class Player {
  direction: Direction;

  move(d: Direction) {
    this.direction = d;
    console.log(`Player moved to the ${Direction[this.direction]}`);
  }
}

const player = new Player();
player.move(Direction.Right); // 输出: Player moved to the Right
错误码

定义错误代码和消息,例如 enum ErrorCode { NotFound = 404, BadRequest = 400 }。

enum ErrorCode {
  NotFound = 404,
  BadRequest = 400,
  InternalServerError = 500
}

function handleError(code: ErrorCode) {
  switch (code) {
    case ErrorCode.NotFound:
      console.log('The resource was not found.');
      break;
    case ErrorCode.BadRequest:
      console.log('There was an error with the request.');
      break;
    case ErrorCode.InternalServerError:
      console.log('The server encountered an internal error.');
      break;
  }
}

handleError(ErrorCode.InternalServerError); // 输出: The server encountered an internal error.
配置选项

在配置文件中使用枚举来定义配置选项的合法值。

enum ConfigurationOption {
  DarkMode = 'dark',
  LightMode = 'light',
  AutoMode = 'auto'
}

interface AppSettings {
  theme: ConfigurationOption;
}

const settings: AppSettings = {
  theme: ConfigurationOption.AutoMode
};

function applySettings(settings: AppSettings) {
  if (settings.theme === ConfigurationOption.DarkMode) {
    console.log('Applying dark mode settings.');
  } else if (settings.theme === ConfigurationOption.LightMode) {
    console.log('Applying light mode settings.');
  } else {
    console.log('Applying automatic mode settings based on user preferences.');
  }
}

applySettings(settings); // 输出: Applying automatic mode settings based on user preferences.

联合类型(Union Types)

表示取值可以为多种类型中的一种,用 | 连接类型。

let value: string | number | boolean;

交叉类型(Intersection Types)【重点】

表示取值可以是多种类型的合并,用& 连接类型。一般用来合并接口等

type IntersectionType = Type1 & Type2 & ... & TypeN;

经常用来组合接口、合并类、与类型别名一起使用

// 组合接口
interface IUser {
  name: string;
  id: number;
}

interface IAdmin {
  manage: boolean;
  delete: boolean;
}

let userAdmin: IUser & IAdmin;
userAdmin = {
  name: 'Alice',
  id: 1,
  manage: true,
  delete: true
};


// 合并类
class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class Employee {
  jobTitle: string;
  constructor(jobTitle: string) {
    this.jobTitle = jobTitle;
  }
}

let person: Person & Employee;
person = {
  name: 'Bob',
  jobTitle: 'Developer'
};


// 使用类型别名来定义交叉类型
type StringOrNumber = string | number;
type StringAndNumber = StringOrNumber & { toFixed: () => string } & { toString: () => string };

let value: StringAndNumber;
value = '100'; // 使用 string 的方法
value = 100; // 使用 number 的方法

类型别名(Type Aliases)【重点】

简单来说就是为现有的类型定义一个新的名字,可以配合联合类型、交叉类型、接口等来组合。

// 最常用的,比如说渲染一个list,数据都是数组对象的
interface IPerson {
	name: string;
	age: number;
	icon: string;
	.....可能还有其他的等等
}

type PersonList = IPerson[]
// 或者
type PersonList = Array<IPerson>

未知类型unknown

用来处理那些你不确定具体类型的值。

类型推断

ts默认是支持 类型推断的,就是你不用特意指定每一个类型
类型推断:定义变量时赋值了, 推断为对应的类型。 定义变量时没有赋值, 推断为any类型

类型断言【重点】

有时间你定义的变量或者函数啥的,需要使用一些特定的属性或者方法,然后ts它也不确定你定义的到底有没有属性或者方法,这时候就需要我们去主动告诉ts它有。就会用到类型断言了。

“尖括号”语法
let someValue: any = "this is a string";

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

let strLength: number = (someValue as string).length;
!非空断言

注意,滥用 ! 运算符可能会导致运行时错误,因此应该谨慎使用。

let optionalValue: string | null = getOptionalString();
let length: number = optionalValue!.length; // 非空断言,使用 ! 断言 optionalValue 不是 null

再比如这样

const length = someObject?.property?.length;
console.log(someObject!.property!.length); // 使用 ! 断言 property 不是 undefined

接口interface 【重点】

接口对于后端的同学更熟悉,前端同学可以这样理解,接口就是定义对象用的,代码里要写对象就要想到接口是一种方式。

interface IListData {
	name: string; // 定义属性
	speak(n: number | string): void; // 定义方法 
	age?: 18;  // ?可选属性
	readonly sex: string;   // readonly 只读属性
	[propName: string]: any;    // 索引签名
}


// 接口继承 使用 extends 
interface IListItemData extends IListData {
	// 继承了IListItemData 所有属性并且可以添加其他属性
	itemName: string;
}

// 还可以继承多个接口,使用逗号
interface IViewData {
	width: string | number;
	height: string | number;
}

interface IListItemData extends IListData, IViewData {}

类class【重点】

TypeScript中的class是面向对象编程的基础构建块之一,它提供了多种特性来支持面向对象的设计模式和实践。

constructor构造函数

构造函数是类的特殊方法,用于创建和初始化类的新实例。

class Person {
  constructor(public name: string, public age: number) {}
}

const person = new Person("Alice", 30);
console.log(person.name); // 输出: Alice

修饰符

public、private和protected是TypeScript中用于控制成员访问级别的关键字。

class Car {
  readonly name: string; // 只读,不可修改
  public make: string; // 公开的属性,可以在任何地方访问
  private model: string; // 私有的属性,只能在类的内部访问
  protected year: number; // 受保护的属性,可以在类和子类中访问
}

const car = new Car();
car.make = "Toyota"; // 有效
// car.model = "Corolla"; // 无效,因为 model 是私有的

extends 继承

子类可以继承父类的属性和方法

class Vehicle {
  startEngine() {
    console.log("Vehicle engine started.");
  }
}

class Car extends Vehicle {
  drive() {
    console.log("Car is driving.");
  }
}

const car = new Car();
car.startEngine(); // 继承自 Vehicle
car.drive(); // Car特有的方法

implements实现接口

类可以实现一个或多个接口,确保类定义了接口中所有声明的成员。

interface Drivable {
  startEngine(): void;
  drive(): void;
}

class SportsCar implements Drivable {
  startEngine() {
    console.log("Sports car engine started.");
  }
  drive() {
    console.log("Sports car is driving.");
  }
}

抽象类

抽象类不能被实例化,它通常用作基类,定义了一组必须由子类实现的方法。

abstract class Animal {
  abstract makeSound(): void;
  move(): void {
    console.log("Animal can move.");
  }
}

class Dog extends Animal {
  makeSound() {
    console.log("Woof woof!");
  }
}

const dog = new Dog();
dog.makeSound(); // Dog必须实现makeSound方法
dog.move(); // 有效

属性装饰器

属性装饰器可以用来在类定义后,设置属性的元数据。

class Person {
  @loggable
  public name: string;

  constructor(name: string) {
    this.name = name;
  }
}

function loggable(target: any, propertyKey: string) {
  let value = target[propertyKey];
  target[propertyKey] = function() {
    console.log(`Getting the value of ${propertyKey}`);
    return value;
  };
}

存取器

存取器允许您定义如何访问和修改类的属性。

class Employee {
  private _name: string;

  get name(): string {
    return this._name;
  }

  set name(value: string) {
    this._name = value.toUpperCase();
  }
}

const employee = new Employee();
employee.name = "Alice"; // 实际存储的是 ALICE
console.log(employee.name); // 输出: ALICE

static / # 静态成员

类可以包含静态属性和方法,它们属于类本身,而不是类的实例。

在TypeScript 3.8及以后的版本中,引入了一种新的语法来声明类的私有字段,这种语法使用井号(#)作为私有字段的前缀。这种新的私有字段语法提供了一种更简洁和明确的方式来定义类的私有成员,包括属性、方法和访问器。

class Employee {
  private _name: string;
  #name: string;

  get name(): string {
    return this._name;
  }
  
  get #name(): string {
    return this.#name;
  }
  
  set name(value: string) {
    this._name = value.toUpperCase();
  }
  
  set #name(value: string) {
    this.#name = value.toUpperCase();
  }
}

const employee = new Employee();
employee.name = "Alice"; // 实际存储的是 ALICE
console.log(employee.name); // 输出: ALICE

泛型【重点】

泛型是一种在编写代码时创建可重用组件的技术。泛型允许你编写一段在多种类型之间通用的代码,而不是为每一种类型编写重复的代码。这样,你可以创建类似数组、函数、类等结构时,让它们能够适应任何类型。

泛型使用 语法来表示类型参数,其中 Type 是一个占位符,代表任何类型。

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

let output1 = identity<string>("myString");  // 类型为 string
let output2 = identity<number>(100);        // 类型为 number

泛型函数

泛型函数可以处理不同类型的参数和返回值,而不需要为每种类型编写重复的代码。

function combineValues<T, U>(a: T, b: U): [T, U] {
  return [a, b];
}

let combined = combineValues("hello", 42);  // 结果类型为 [string, number]

泛型接口

泛型接口可以定义通用的数据结构,使其能够适应不同的数据类型。

interface Container<T> {
  value: T;
}

let myContainer: Container<string> = { value: "Hello World" };
let myNumberContainer: Container<number> = { value: 42 };

泛型类型别名

// 泛型类型别名
type Pair<T> = {
  key: T;
  value: T;
};

// 使用类型别名
const numberPair: Pair<number> = { key: 1, value: 2 };
const stringPair: Pair<string> = { key: "a", value: "b" };

泛型类

泛型类可以定义通用的对象结构,允许其实例化时指定具体的类型。

class Stack<T> {
  private items: T[] = [];
  push(item: T) {
    this.items.push(item);
  }
  pop(): T | undefined {
    return this.items.pop();
  }
}

let numberStack = new Stack<number>();
numberStack.push(1);
numberStack.push(2);
console.log(numberStack.pop()); // 输出: 2

泛型约束

有时候你可能需要限制泛型只能被某些类型所使用。这可以通过泛型约束来实现。

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);  // 现在我们知道它有一个 .length 属性,因为它符合 Lengthwise 接口
  return arg;
}

let result = loggingIdentity(["hello", "world"]);  // 使用数组,数组有 length 属性
// loggingIdentity({ a: "hello" });  // 错误: 类型 "{ a: string; }" 缺少属性 "length"

装饰器(Decorators)【重点】

装饰器是一种特殊的声明,可以附加到类声明、方法、访问符、属性或参数上,用来标注或修改它们。装饰器提供了一种强大的元编程机制,允许在运行时修改或观察类及其成员的行为。

类装饰器

类装饰器可以用来记录类的创建日志、修改类的构造函数以添加额外的功能,或者创建单例模式的类。

function logClassUsage(target: Function) {
  const original = target.prototype.constructor;
  target.prototype.constructor = function (...args: any[]) {
    console.log(`Creating an instance of ${target.name}`);
    return original.apply(this, args);
  };
}

@logClassUsage
class MyComponent {
  constructor() {
    // 构造函数内容
  }
}

let component = new MyComponent(); // 输出: Creating an instance of MyComponent

方法装饰器

方法装饰器可以用于性能监控、日志记录、权限检查、事务处理等,任何需要在方法执行前后添加额外逻辑的场景。

function timingMethodDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    const start = performance.now();
    const result = originalMethod.apply(this, args);
    const end = performance.now();
    console.log(`${propertyKey} executed in ${end - start}ms`);
    return result;
  };
  return descriptor;
}

class PerformanceTracker {
  @timingMethodDecorator
  trackPerformance() {
    // 一些性能关键的操作
  }
}

const tracker = new PerformanceTracker();
tracker.trackPerformance();

访问器装饰器

访问器装饰器可以用于懒加载、缓存结果、计算属性值等,特别是当你需要对属性的获取和设置进行复杂处理时。

function cacheGetter(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  let cache;
  return {
    get() {
      if (cache === undefined) {
        cache = originalGetter.call(this);
      }
      return cache;
    },
    set(value: any) {
      cache = value;
      return originalSetter.call(this, value);
    },
  };
}

const originalGetter = () => Math.random();
const originalSetter = (value: number) => { /* 存入数据库 */ };

class RandomNumber {
  @cacheGetter
  get random() {
    return originalGetter();
  }

  @cacheGetter
  set random(value: number) {
    return originalSetter(value);
  }
}

const num = new RandomNumber();
console.log(num.random); // 获取随机数
// 再次获取相同的随机数,将不会重新计算,而是从缓存中获取

属性装饰器

属性装饰器可以用于冻结属性(使其不可变)、添加属性验证、记录属性变更、实现观察者模式等。

function freezeProperty(target: any, propertyKey: string) {
  const value = target[propertyKey];
  Object.defineProperty(target, propertyKey, {
    value: value,
    writable: false,
    enumerable: true,
    configurable: false,
  });
}

class Person {
  @freezeProperty
  name: string = 'John Doe';
}

const person = new Person();
person.name = 'Alice'; // 无效,属性被冻结

参数装饰器

参数装饰器可以用于参数验证、依赖注入、记录参数信息等,任何需要在方法调用时检查参数的场景。

function validateParameter(target: any, propertyKey: string, parameterIndex: number) {
  const parameters = Reflect.getMetadata('design:paramtypes', target, propertyKey) || [];
  const paramType = parameters[parameterIndex];

  return function(...args: any[]) {
    if (!(args[parameterIndex] instanceof paramType)) {
      throw new Error(`Parameter ${parameterIndex} is not of type ${paramType.name}`);
    }
    return target[propertyKey](...args);
  };
}

class Validator {
  @validateParameter(String)
  addString(str: string) {
    // 处理字符串
  }
}

const validator = new Validator();
validator.addString('Hello'); // 有效
validator.addString(123); // 无效,参数不是String类型

三斜线指令 ///

在 TypeScript 中,/// 是三斜杠注释的开始,它用于生成文档注释,也称为 JSDoc。这些注释可以为函数、类、接口、属性等提供描述性信息,包括类型定义、描述、参数说明和返回值说明。TypeScript 编译器和工具链使用这些注释来生成类型定义文件(.d.ts)和文档。

JSDoc 标签
JSDoc 支持多种标签,用于提供额外的信息。以下是一些常用的 JSDoc 标签:

  • @param:描述函数参数的类型和简要说明。
  • @returns 或 @return:描述函数的返回值类型和说明。
  • @type:指定变量的类型(通常与 @param 或 @returns 一起使用)。
  • @description 或 /**:提供一般描述,通常用于类、模块或函数的开始。
  • @example:提供一个代码示例。
  • @throws 或 @exception:描述可能抛出的错误及其类型。
/// <reference path="someModule.ts" />

/**
 * Adds two numbers.
 * @param {number} a The first number.
 * @param {number} b The second number.
 * @returns {number} The sum of a and b.
 */
function add(a: number, b: number): number {
  return a + b;
}

/**
 * A class that represents a user.
 * @example
 * const user = new User("Alice", "[email protected]");
 */
class User {
  /**
   * Constructs a new User instance.
   * @param {string} name The user's name.
   * @param {string} email The user's email.
   */
  constructor(public name: string, public email: string) {}

  /**
   * Gets the user's full name.
   * @returns {string} The full name.
   */
  get fullName(): string {
    return this.name;
  }
}

标签:TypeScript,console,string,number,value,干货,类型,重点,name
From: https://blog.csdn.net/weixin_43106777/article/details/136611700

相关文章

  • ETL工具-nifi干货系列 第三讲 nifi web ui 使用教程
    1、nifi服务启动之后,浏览器输入https://localhost:8443/nifi ,匿名登录或者输入用户名密码进入操作页面,如下图所示:2、组件工具栏处理器,鼠标放到图标上提示Processor,里面里面有各种各样的组件,可以实现各种各样的功能。 拖拉处理器到画布中,出现处理器选择列表,可以根据处理......
  • C语言动态内存管理(重点)
    目录1、为什么要有动态内存分配2、malloc和free2.1malloc函数2.2 free函数3、calloc和realloc3.1  calloc函数 3.2 realloc函数3.3  realloc和malloc区别3.4 realloc函数存在的问题4、常见的动态内存的错误5、动态内存经典笔试题分析6、柔性数......
  • mysql中的数据类型大全纯干货------------时间日期类型
    简介(类型预览):在mysql8.0版本中支持的类型主要有:YEAR类型表示年DATE类型表示年,月,日TIME类型表示时,分,秒DATETIME类型表示年,月,日,时,分,秒TIMESTAMP类型通常表示带时区的年,月,日,时,分,秒数据类型单位占用字节格式下限上限YEAR年1YYY或YY19012155TIME时间3H......
  • 机试重点题目-2018
    B:AIQP操作考察:vector容器的基本操作#include<iostream>#include<vector>#include<string>#include<algorithm>usingnamespacestd;vector<int>v;intn,m;intmain(){cin>>n;for(inti=0;i<n;i++){......
  • C语言字符函数和字符串函数及内存函数详解(干货小知识:常用函数的模拟实现)
    文章目录1.字符函数1.1字符分类函数1.2字符转换函数2.字符串函数2.1strlen函数2.1.1strlen函数的使用:2.1.2strlen函数的模拟实现2.2strcpy函数2.2.1strcpy函数的使用2.2.2strcpy函数的模拟实现2.3strcat函数2.3.1strcat函数的使用2.3.2strcat函数的模拟实......
  • ETL工具-nifi干货系列 第一讲 揭开nifi神秘面纱
    1、nifi简介ApacheNiFi是基于流程编程概念的数据流系统。它支持强大且可扩展的数据路由、转换和系统中介逻辑的有向图。NiFi具有基于Web的用户界面,用于设计、控制、反馈和监控数据流。它在多个服务质量维度上都具有高度可配置性,例如容忍丢失与保证传递、低延迟与高吞吐量、基于......
  • 【干货合集】看完这些干货,再说你因为“怕蛇”,所以学不好 Python!
    摘要:作为编程语言界的“当红小生”,Python不仅能够承担起Web项目的重任,还能够用于写自动化脚本帮助你做很多事情,不仅能够用于机器学习和神经网络的研究,还能够用于最具有业务价值的数据分析方面,无论什么专业,似乎没学过Python就已经OUT了!原文:http://click.aliyun.com/m/43518......
  • 机试重点题-2021/2023
    20215:由二叉树前々序列和中々序列得到后々序列列 #include<iostream>#include<unordered_map>usingnamespacestd;constintN=50010;intn;inta[N],b[N];//前序,中序unordered_map<int,int>p;voidbuild(intal,intar,intbl,intbr){if(al......
  • GTC大会干货:8位大佬对Transformer起源和未来发展的探讨
      添加图片注释,不超过140字(可选) 在2024年的GTC大会上,黄仁勋特邀Transformer机器语言模型的七位创造者,共同探讨Transformer模型的过去、现在与未来。他们一致认为,尽管Transformer已经成为现代自然语言处理领域的基石,但这个世界仍然需要超越Transformer......
  • 2020-1-31-Typescript基础知识
    typescript安装、编译、数据类型、函数声明、ES5中的类、TS中的类、接口、泛型、装饰器Typescript安装npminstalll-gtypescript编译成jstscaaa.ts执行该命令后会自动生成js文件在VScode中设置保存后自动编译1.生成tscconfig.json文件tsc--init2.修改tscconfig.......