FE — TypeScript

变量 #

声明符号 var、let、const #

ts 里面基本弃用了 var,使用场景基本只有 let 和 const,用法和 js 一样。

❓问号的用法 #

类型系统 #

类型别名 type #

类型交叉 & #

type User = {
    name: string;
    age: number;
};

type Employee = {
    companyId: string;
};

// 定义一个交叉类型,包含 User 和 Employee 的所有属性
type UserEmployee = User & Employee;

// 使用交叉类型
const ue: UserEmployee = {
    name: "Alice",
    age: 28,
    companyId: "1234XYZ"
};

类型声明 declare #

https://www.typescriptlang.org/docs/handbook/declaration-files/by-example.html

declare 关键字用于声明变量、函数、类、命名空间等的类型信息,而不实际定义它们的实现。这在与 JavaScript 代码或第三方库进行互操作时特别有用,因为它允许你为现有的 JavaScript 代码提供类型信息,而无需修改这些代码。

以下是一些使用 declare 关键字的常见场景:

  1. 声明全局变量
// 声明一个全局变量
declare var globalVar: string;
  1. 声明全局函数
// 声明一个全局函数
declare function globalFunction(param: number): void;
  1. 声明类
// 声明一个类
declare class MyClass {
  constructor(param: string);
  myMethod(): void;
}
  1. 声明命名空间
// 声明一个命名空间
declare namespace MyNamespace {
  function myFunction(param: number): void;
}
  1. 声明模块
// 声明一个模块
declare module 'my-module' {
  export function myFunction(param: number): void;
}
  1. 声明文件

声明文件(通常以 .d.ts 为后缀)是 TypeScript 中使用 declare 关键字的主要地方。它们用于为 JavaScript 代码提供类型定义。例如,为一个名为 my-library 的第三方库创建一个声明文件 my-library.d.ts

declare module 'my-library' {
  export function myLibraryFunction(param: string): number;
}
  1. 声明混合类型

有时一个对象可以同时作为函数和对象使用,这种情况下可以使用混合类型声明。

declare function myFunction(param: number): string;

declare namespace myFunction {
  export function subFunction(param: string): number;
}

export = myFunction;

通过 declare 关键字,TypeScript 能够为现有的 JavaScript 代码提供类型信息,从而使得类型检查和代码补全等功能得以实现。

interface #

可索引的类型 #

interface LabelValue {
    color: string
    width: number
    [index: number]: string
}

函数类型 #

泛型 #

泛型约束 #

枚举 #

enum

import #

import type #

参考 #

  • 《深入理解 TypeScript》
本文共 628 字,上次修改于 May 20, 2024
相关标签: 前端, JavaScript, TypeScript