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.mzph.cn/news/820543.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android11 如何修改状态栏的背景

修改status_bar.xml &#xff1a; <LinearLayout android:id"id/status_bar_contents"android:background"#1ABC9C"android:layout_width"match_parent"android:layout_height"match_parent"android:paddingStart"dimen/statu…

【重回王座】ChatGPT发布最新模型gpt-4-turbo-2024-04-09

今天&#xff0c;新版GPT-4 Turbo再次在大型模型排行榜上荣登榜首&#xff0c;成功超越了此前领先的Claude 3 Opus。另外&#xff0c;新模型在处理长达64k的上下文时&#xff0c;性能竟能够与旧版在处理26k上下文时的表现相当。 目前GPT-4 Turbo仅限于ChatGPT Plus的用户&…

Nginx服务 重写功能与反向代理

六、重写功能 rewrite Nginx服务器利用 ngx_http_rewrite_module 模块解析和处理rewrite请求&#xff0c;此功能依靠 PCRE(perl compatible regular expression)&#xff0c;因此编译之前要安装PCRE库&#xff0c;rewrite是nginx服务器的重要功能之一&#xff0c;用于实现URL的…

DBA面试总结(Mysql篇)

一、delete与trancate的区别 相同点 1.两者都是删除表中的数据&#xff0c;不删除表结构 不同点 1.delete支持按条件删除&#xff0c;TRUNCATE不支持。 2.delete 删除后自增列不会重置&#xff0c;而TRUNCATE会被重置。 3.delete是逐条删除&#xff08;速度较慢&#xff09…

[svelte]基础知识+反应性能力

来源&#xff1a;Svelte 中文文档 | Svelte 中文网 之前不是在学html&#xff0c;css嘛&#xff0c;JavaScript有点多&#xff0c;还没整理完&#xff0c;因为svelte紧急&#xff01;现在就需要了 svelte前提先对html&#xff0c;css&#xff0c;JavaScript有基本的了解 什么…

【linux编译报错】g++: error:elf_x86_64:没有那个文件或目录

背景 gcc版本已经是高版本了&#xff0c;9开头了&#xff0c;但是在IDE编译的时候报错&#xff1a; 但是记得自己没有配置过这种参数&#xff0c;只能一步步查了 解决方法 步骤1&#xff1a;先google看了下别人是否碰到该问题 找到一个解决方法说&#xff1a; 在Makefile中…

配置路由器实现互通

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

如何在CentOS安装Firefox并结合内网穿透工具实现公网访问本地火狐浏览器

文章目录 1. 部署Firefox2. 本地访问Firefox3. Linux安装Cpolar4. 配置Firefox公网地址5. 远程访问Firefox6. 固定Firefox公网地址7. 固定地址访问Firefox Firefox是一款免费开源的网页浏览器&#xff0c;由Mozilla基金会开发和维护。它是第一个成功挑战微软Internet Explorer浏…

win11电脑驱动怎么更新,windows11更新驱动

驱动是指计算机里软件的程序,硬件的运作离不开驱动的支持,因为驱动就是使得硬件和电脑系统沟通的桥梁。既然驱动如此重要,那么不装肯定不行,如果有问题,也要及时地修复和更新。最近,有位win11用户,想要了解win11电脑驱动怎么更新?接下来,教程会带来两种更新win11驱动的…

短剧微视频小程序app系统开发搭建

开发搭建短剧微视频小程序app系统需要以下步骤&#xff1a; 1. 确定需求和功能&#xff1a;根据用户需求和目标&#xff0c;确定小程序需要实现的功能和界面设计。 2. 设计小程序界面&#xff1a;根据需求和功能设计小程序界面&#xff0c;包括首页、发现页、个人页等。 3. …

`extern` 关键字的用法cpp

extern 是 C 和 C 编程语言中的一个关键字&#xff0c;用于声明变量或函数是在其他地方定义的。这通常用于跨多个源文件共享全局变量或函数。extern 关键字告诉编译器这个变量或函数的实现在别的地方&#xff0c;因此在链接阶段需要查找并包含它。 跨源文件共享全局变量 在不…

LlamaIndex 组件 - Loading

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

【数据结构与算法】最大公约数与最小公倍数

最大公因数&#xff08;英语&#xff1a;highest common factor&#xff0c;hcf&#xff09;也称最大公约数&#xff08;英语&#xff1a;greatest common divisor&#xff0c;gcd&#xff09;是数学词汇&#xff0c;指能够整除多个非零整数的最大正整数。例如8和12的最大公因数…

【Java探索之旅】数组使用 初探JVM内存布局

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; Java编程秘籍 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言一、数组的使用1.1 元素访问1.2 数组遍历 二、JVM的内存布局&#x1f324;️全篇总结 …

WP免费主题下载

免费wordpress模板下载 高端大气上档次的免费wordpress主题&#xff0c;首页大图全屏显示经典风格的wordpress主题。 https://www.wpniu.com/themes/289.html 免费WP主题 蓝色简洁实用的wordpress免费主题模板&#xff0c;免费主题资源分享给大家。 https://www.wpniu.com/…

基于Springboot+Vue的Java项目-校园管理系统(附演示视频+源码+LW)

大家好&#xff01;我是程序员一帆&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &am…

在Vue项目使用kindEditor富文本编译器

第一步 npm install kindeditor第二步&#xff0c;建立kindeditor.vue组件 <template><div class"kindeditor"><textarea :id"id" name"content" v-model"outContent"></textarea></div> </templa…

IDM的实用功能及其在现代下载管理中的重要地位

IDM的实用功能及其在现代下载管理中的重要地位 在当今数字化时代&#xff0c;下载管理器已成为我们日常生活和工作中不可或缺的工具。其中&#xff0c;Internet Download Manager&#xff08;简称IDM&#xff09;以其强大的功能和高效的下载速度&#xff0c;受到了广大用户的青…

浅尝 express + ORM框架 prisma 的结合

一、prisma起步 安装&#xff1a; npm i prisma -g查看初始化帮助信息&#xff1a; prisma init -h查看初始化帮助信息结果&#xff1a; Set up a new Prisma projectUsage$ prisma init [options] Options-h, --help Display this help message --datasource-provider …