TypeScript 基础语法

文章目录

  • 1. 类型注解
  • 2. 接口(Interfaces)
  • 3. 类(Classes)
  • 4. 泛型(Generics)
  • 5. 枚举(Enums)
  • 6. 高级类型
  • 7. 模块
  • 8. 装饰器(Decorators)
  • 9. 映射类型(Mapped Types)
  • 10. 条件类型(Conditional Types)
  • 11. 索引访问类型(Indexed Access Types)
  • 12. Null 安全性(Null Safety)
  • 13. 模块解析
  • 14. 命名空间(Namespaces)
  • 15. 模块与命名空间的混合使用
  • 16. 装饰器工厂
  • 17. 类型守卫和类型区分(Type Guards and Differentiating Types)
  • 18. 高级类型和技巧
  • 19. 模块声明

TypeScript 是 JavaScript 的一个超集,由 Microsoft 开发。它添加了类型系统和一些其他特性,旨在增强代码的可靠性和开发效率。TypeScript 最终会被编译成纯 JavaScript,以便在各种浏览器和节点环境中运行。下面,我们将介绍 TypeScript 的一些基本语法和特性。

1. 类型注解

类型注解是 TypeScript 最核心的特性之一,它允许你明确地指定变量、函数参数和函数返回值的类型。

let isDone: boolean = false;
let age: number = 20;
let firstName: string = "Alice";

function greet(name: string): string {
  return "Hello, " + name;
}

2. 接口(Interfaces)

接口是定义对象形状的强大方式,它指定了对象应该有哪些属性以及对应的类型。

interface User {
  name: string;
  age?: number;  // 可选属性
}

function register(user: User) {
  console.log(user.name);
}

register({ name: "John" }); // 有效
register({ age: 25 }); // 编译错误,缺少'name'属性

3. 类(Classes)

TypeScript 支持基于类的面向对象编程。类可以使用 publicprivateprotected 这些访问修饰符来控制成员的访问权限。

class Animal {
  private name: string;

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

  public move(distance: number) {
    console.log(`${this.name} moved ${distance}m.`);
  }
}

4. 泛型(Generics)

泛型提供了一种方法来创建可重用的组件,一个组件可以支持多种类型的数据,这样用户就可以以自己的数据类型来使用组件。

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

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

5. 枚举(Enums)

枚举是一种定义命名常数组的方式,用于创建有限集合的明确值。

enum Color {
  Red,
  Green,
  Blue,
}

let c: Color = Color.Green;

6. 高级类型

  • 联合类型:允许一个值可以是几种类型之一。
  • 交叉类型:组合多种类型成为一种类型。
  • 类型别名:提供类型的新名称。
type StringOrNumber = string | number;
type UserResponse = User & { token: string };

7. 模块

TypeScript 支持模块,允许从外部文件导入其他模块,也可以导出模块使其它文件可以使用。

// some-module.ts
export const pi = 3.14;
export function square(x: number) {
  return x * x;
}

// main.ts
import { pi, square } from "./some-module";
console.log(pi);
console.log(square(10));

8. 装饰器(Decorators)

装饰器是一种特殊类型的声明,它可以被附加到类声明,方法,访问器,属性或参数上。装饰器使用 @expression 这种形式,expression 必须计算为一个函数。

function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

@sealed
class BugReport {
  type = "report";
  title: string;

  constructor(t: string) {
    this.title = t;
  }
}

继续深入探讨 TypeScript 的更多高级特性和用法,这些特性可以帮助开发者更有效地编写健壮且可维护的代码。

9. 映射类型(Mapped Types)

映射类型允许你从一个已知的类型创建新类型,它的属性是基于原始类型的属性变换而来。这是一种灵活的方法来创建相关类型,而不必重复定义。

type Keys = 'option1' | 'option2';
type Flags = { [K in Keys]: boolean };

const featureFlags: Flags = {
  option1: true,
  option2: false,
};

10. 条件类型(Conditional Types)

条件类型允许类型具有类似 JavaScript 中 if 语句的逻辑。这可以用于在类型层面进行条件判断。

type Check<T> = T extends string ? 'String' : 'Not String';
type Type1 = Check<string>;  // 'String'
type Type2 = Check<number>;  // 'Not String'

11. 索引访问类型(Indexed Access Types)

通过索引访问类型,可以通过其他类型的索引来查询属性的类型。

type User = { name: string; age: number; };
type UserName = User['name'];  // string

12. Null 安全性(Null Safety)

TypeScript 强制性地处理了 null 和 undefined,可以在编译阶段防止很多运行时错误。

function doSomething(x: string | null) {
  console.log(x!.toUpperCase());  // 使用 '!' 非空断言操作符
}

13. 模块解析

TypeScript 模块解析逻辑决定了模块和导入语句如何互动,支持相对和非相对模块导入。

14. 命名空间(Namespaces)

命名空间是 TypeScript 的一个早期功能,它提供了一种将多个相关的全局类型、接口和类组合到一起的方式。

namespace Validation {
  export interface StringValidator {
    isValid(s: string): boolean;
  }

  const lettersRegexp = /^[A-Za-z]+$/;
  export class LettersOnlyValidator implements StringValidator {
    isValid(s: string) {
      return lettersRegexp.test(s);
    }
  }
}

15. 模块与命名空间的混合使用

TypeScript 允许在模块中使用命名空间来组织代码,反之亦然。

16. 装饰器工厂

装饰器工厂是一个表达式,返回一个函数,该函数在运行时被调用来装饰类或类成员。

function Color(value: string) { // 装饰器工厂
  return function (target) {
    // 这是装饰器
    Object.defineProperty(target, 'color', {
      value: value
    });
  }
}

@Color('blue')
class Car {
}

17. 类型守卫和类型区分(Type Guards and Differentiating Types)

类型守卫允许你在代码块中保证变量属于某个特定类型。这通常通过自定义的类型保护函数实现。

function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined;
}

// 现在可以安全地使用 'swim' 方法
const pet = getSmallPet();
if (isFish(pet)) {
  pet.swim();
} else {
  pet.fly();
}

18. 高级类型和技巧

TypeScript 支持许多高级类型技巧,如使用 Partial, Readonly, Pick, Record 等实用的内置类型。

19. 模块声明

当需要引入非 TypeScript 模块(如某些 JavaScript 库或 JSON 文件)时,可以使用模块声明来告诉 TypeScript 如何处理它们。

declare module "*.json"

 {
  const value: any;
  export default value;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/548837.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

JSON数据格式讲解与cJSON库的使用

文章目录 写在前面一、安装cJSON二、使用cJSON1、使用的文件2、如何传输数据&#xff1a;**** 三、JSON语法四、cJSON函数讲解1、cJSON结构体 **2、cJSON结构体与字符串之间的转换&#xff08;重要&#xff09;2.1、标题将cJSON结构体转换为字符串(常用)2.2、将字符串转为cJSON…

什么是并行通信、串行通信?什么是全双工、半双工、单工? 什么是异步通信、同步通信? 什么是RS232、RS485?什么是pwm?

什么是并行通信、串行通信&#xff1f; 嵌入式系统中的通信是指两个或两个以上的主机之间的数据互交&#xff0c;这里的主机可以是计算机也可以是嵌入式主机&#xff0c;甚至可以是芯片。主机间通信的方式一般可以分为两类&#xff1a;并行通信和串行通信。并行通信是指多个比特…

LlamaIndex 组件 - Loading

文章目录 一、概览加载Transformations将所有内容放在一起抽象 二、文档/节点概览1、概念2、使用模式文件节点 三、定义和定制文档1、定义文档2、自定义文档2.1 元数据2.2 自定义id2.3 高级 - 元数据定制1&#xff09;自定义LLM元数据文本2&#xff09;自定义嵌入元数据文本3&a…

华为配置静态ARP示例

华为配置静态ARP示例 组网图形 图1 配置静态ARP组网图 静态ARP简介配置注意事项组网需求配置思路操作步骤配置文件相关信息 静态ARP简介 静态ARP表项是指网络管理员手工建立IP地址和MAC地址之间固定的映射关系。 正常情况下网络中设备可以通过ARP协议进行ARP表项的动态学习&…

Linux --- 高级IO

目录 1. 什么是IO 2. 阻塞的本质 3. 五种IO模型 3.1. 通过故事认识五种IO模型 3.2. 上述故事的总结 3.3. 具体的五种IO模型 3.3.1. 阻塞IO 3.3.2. 非阻塞轮询式IO 3.3.3. 信号驱动IO 3.3.4. 多路转接IO 3.3.5. 异步IO 4. 非阻塞IO 4.1. fcntl 系统调用 1. 什么是I…

麒麟信安LTF框架上线openEuler社区

麒麟信安LTF框架介绍 LTF&#xff08;Linux Test Framework&#xff09;是麒麟信安自动化组开发的一款面向Linux操作系统测试的自动化测试框架&#xff0c;目前已在openEuler社区开源。LTF工具积极投入国内各评测项目和日常版本测试任务中&#xff0c;汲取了在Linux自动化测试…

C语言预处理操作详解

这篇博客和大家分享一下C语言中的预处理操作。 1. 预定义符号 C语言设置了⼀些预定义符号&#xff0c;可以直接使用&#xff0c;预定义符号也是在预处理期间处理的。 __FILE__ //进行编译的源文件 __LINE__ //文件当前的行号 __DATA__ //文件被编译的日期 __TIME_…

【Android】重温Activity生命周期

前言 Android中用得最多的组件是Activity&#xff0c;而它的生命周期也是最基础的知识&#xff0c;从刚接触Android到工作中会频繁依赖这部分知识。可能大多数人能说出页面新建到页面关闭会走的生命周期&#xff1a;onCreate、onStart、onResume、onPause、onStop、onDestory&…

【五十三】【算法分析与设计】1392. 最长快乐前缀,686. 重复叠加字符串匹配,796. 旋转字符串,KMP算法

目录 1392. 最长快乐前缀 思路 过程 686. 重复叠加字符串匹配 796. 旋转字符串 string内置函数find KMP算法 结尾 1392. 最长快乐前缀 「快乐前缀」 是在原字符串中既是 非空 前缀也是后缀&#xff08;不包括原字符串自身&#xff09;的字符串。 给你一个字符串 s&…

JAVA_类和对象(1)

认识面向对象 Java是一门纯面向对象的语言(Object Oriented Program, OOP)&#xff0c;在面向对象的世界里&#xff0c;一切皆为对象。面向对象是解决问题的一种思想&#xff0c;主要依靠对象之间的交互完成一件事情。  面向过程和面相对象并不是一门语言&#xff0c;而是解决…

OpenStack镜像管理与制作

一、OpenStack镜像服务 1、什么是镜像 镜像通常是指一系列文件或一个磁盘驱动器的精确副本。虚拟机所使用的虚拟磁盘&#xff0c;实际上是一种特殊格式的镜像文件。云环境下尤其需要镜像。镜像就是一个模板&#xff0c;类似于VMware的虚拟机模板&#xff0c;其预先安装基本的…

格雷希尔G80L-T系列大口径快速连接器,在汽车膨胀水箱的气密性测试密封方案

副水箱也有人称作膨胀水箱&#xff0c;是汽车散热系统的一个重要组成部分&#xff0c;当水箱里面的温度过高的时候就会产生一定的压力&#xff0c;而副水箱可以根据热胀冷缩来帮助水箱和发动机排出去多余的水&#xff0c;起到一个调节的作用&#xff0c;副水箱由PP/PE塑料注塑而…

单向链表的实现

前言&#xff1a;继顺序表后的又一个线性结构——链表&#xff0c;这里将单向链表的实现。 目录 链表简介: 多文件实现&#xff1a; SList.h&#xff1a; SList.c实现函数的详解&#xff1a; 因为插入数据需要创建节点&#xff0c;很频繁&#xff0c;所以直接将创建新节点分…

《中医病证分类与代码》-中医疾病分类数据库

《中医病症分类与代码》由国家中医药管理局2020年底修订&#xff0c;目的是为中医疾病及证候的分类提供统一的规范。规定2021年起&#xff0c;各中医机构的临床科室及基层中医药的医师都应按照最新修订的《中医病症分类与代码》规范来填报病案及病历。 中医病证分类与代码数据库…

C++STL详解(一)— string类

string 类对象的常见容量操作 函数名称 功能 size 返回字符串有效字符长度length返回字符串有效字符长度capacity返回空间总大小clear清空有效字符empty检测字符串是否为空串&#xff0c;是返回true,否则返回falsereserve对容量进行改变resize扩容初始化 size和length 文档解…

Linux系统(centos,redhat,龙芯,麒麟等)忘记密码,怎么重置密码

Linux系统&#xff08;centos,redhat,龙芯&#xff0c;麒麟等&#xff09;忘记密码&#xff0c;怎么重置密码&#xff0c;怎么设置新的密码 今天在操作服务器时&#xff0c;DBA忘记了人大金仓数据库的kingbase密码&#xff0c;他的密码试了好多遍&#xff0c;都不行。最后只能…

sublime text中文---功能强大、操作便捷的代码编辑神器

Sublime Text是一款极受欢迎的代码编辑器&#xff0c;以其出色的性能、丰富的功能和优雅的用户界面赢得了广大开发者的青睐。它支持多种编程语言&#xff0c;包括HTML、CSS、JavaScript、Python等&#xff0c;让开发者能够轻松编辑和调试各种代码。Sublime Text拥有强大的自定义…

配置路由器实现互通

1.实验环境 实验用具包括两台路由器(或交换机)&#xff0c;一根双绞线缆&#xff0c;一台PC&#xff0c;一条Console 线缆。 2.需求描述 如图6.14 所示&#xff0c;将两台路由器的F0/0 接口相连&#xff0c;通过一台PC 连接设备的 Console 端口并配置P地址&#xff08;192.1…

SpringBoot是如何实现main方法启动Web项目的?

一、问题解析 在Spring Boot中&#xff0c;通过SpringApplication类的静态方法run来启动Web项目。当我们在main方法中调用run方法时&#xff0c;Spring Boot使用一个内嵌的Tomcat服务器&#xff0c;并将其配置为处理Web请求。 当应用程序启动时&#xff0c;Spring Boot会自动扫…

C#学习笔记11:winform上位机与西门子PLC网口通信_下篇

今日终于到了winform上位机与西门子PLC网口通信的系列收为阶段了&#xff0c;一直没一口气更新完&#xff0c;手头上也没有可以测试用的PLC设备&#xff0c;虚拟仿真用到的博图软件也不想下载&#xff08;会让我电脑变卡&#xff09;。 于是等了些日子购买西门子PLC&#xff0…
最新文章