Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
学习 Typescript 的旅程_创想鸟

学习 Typescript 的旅程

学习 typescript 的旅程大家好,我最近开始了我的 typescript 之旅,并通过编程英雄的高级 web 开发课程取得了进步。我对 typescript 有一些基础知识,但没有深入探索。我的课程从深入研究 typescript 开始。一周过去了,我的学习有了很大的进步。以下是我所掌握的关键概念的简化概述。

typescript 就像 javascript,但具有超能力!

typescript 是 javascript 的超集,为该语言添加了可选的静态类型。这意味着您可以声明变量、函数参数和返回值的类型,这有助于在开发过程的早期发现潜在的错误。
使用 typescript 的好处

早期错误检测提高代码可读性增强代码可靠性更好的代码完成和 intellisense大型项目支持

原始和非原始数据类型

原始数据类型表示单个值并直接存储在内存中。以下是 typescript 中使用的一些原始数据类型

字符串数字布尔值未定义空

let name : string = "kishor";let age : number = 27;let isdeveloper: boolen = true;let x : null = null;let y: undefined = undefined;

正如您在示例中看到的,要为变量分配类型,您必须在定义变量名称和类型后使用冒号 ( :) 符号。

非原始数据类型,也称为引用类型,表示复杂的数据结构,并存储为对内存位置的引用。 typescript 支持以下非原始数据类型:

对象数组元组功能

let person: {name: string, age : number} = {name: "kishor", age: 27}; //objectlet numbers: number[] = [1,2,3,4];let fruits: string[]= ["apple", "pineapple", "banana"];let tuple: [string, number, boolean] = ["xyz", 123, true];function greet(name: string) : any {  return `hello ${name}`}

类型别名

typescript 中的类型别名是一种为​​现有类型赋予新名称的方法。这可以使您的代码更具可读性和可维护性,尤其是在处理复杂类型时。

// defining a type alias for a person objecttype person = {  name: string;  age: number;};// using the type aliasconst person1: person = {  name: "alice",  age: 30};

在此示例中,person 是一个类型别名,表示具有名称和年龄属性的对象。
typescript 中的并集和交集类型
联合类型表示可以是多种类型之一的值。它是使用 | 定义的运算符。
交叉类型将多种类型合并为一种类型。它是使用 & 运算符定义的。

type stringornumber = string | number; //union typelet value: stringornumber = "hello";value = 42;type person = {    name: string;    age: number;};type address = {    street: string;    city: string;};type personwithaddress = person & address;//intersection typeconst personwithaddress: personwithaddress = {    name: "alice",    age: 30,    street: "123 main st",    city: "anytown"};

从未、未知

never 类型表示从未出现过的值。
未知类型代表任何值。它比 any 类型更安全,因为在使用未知类型的值之前必须执行类型检查或断言。

function error(message: string): never {    throw new error(message);} //the return type is never because there is no data returned.let value: unknown = "hello";if (typeof value === "string") {  let strlength: number = value.length;}

类型断言

类型断言是一种告诉 typescript 编译器您比它更了解类型的方法。这是一种显式指定变量类型的方法

let value: unknown = "hello";let strlength: number = (value as string).length;

类型保护装置

类型保护允许您根据某些条件缩小变量的类型范围。通过在访问变量的属性或方法之前检查变量的类型,您可以避免潜在的运行时错误。

运算符类型实例操作符

//typeoffunction printvalue(value: unknown) {    if (typeof value === "string") {        console.log(value.touppercase());    } else if (typeof value === "number") {        console.log(value.tofixed(2));       }}//instanceoffunction printdate(date: unknown) {    if (date instanceof date) {        console.log(date.toisostring());    }}

typescript 中的接口

typescript 中的接口是用于创建具有特定属性的对象的蓝图。

interface person {  firstname: string;  lastname: string;  age: number;}const person1: person = {  firstname: "alice",  lastname: "johnson",  age: 30};

在此示例中,person 接口定义了 person 对象必须具有firstname、lastname 和age 属性。创建 person1 对象时

typescript 中的泛型

泛型是 typescript 中的一项强大功能,它允许您创建可以处理不同数据类型的可重用组件。

function identity(arg: t): t {  return arg;}identity(string);

在此示例中,t 是类型参数。它代表任何类型的占位符。当你调用恒等函数时,你可以传递任何类型的参数,函数将返回相同的类型。

typescript 中的约束

在 typescript 中,泛型约束允许您对可以作为参数传递给泛型函数或用作泛型类或接口中的类型参数的类型应用限制。

interface person {    name: string;    age: number;}function identity(arg: t): t {  return arg;}const result  = identity({    name: "aa";    age: 12;});

这里使用extends关键字来约束数据

操作员的钥匙

typescript 中的 keyof 运算符用于获取对象类型的所有属性名称的联合类型。这在使用泛型类型和映射类型时特别有用。

interface person {  name: string;  age: number;}type personkeys = keyof person; // type: "name" | "age"

实用程序类型

pick:从 t 中选择特定属性

type person = {  name: string;  age: number;  email: string;}//picktype name = pick;type nameage = pick

omit:省略 t 中的特定属性

type person = {  name: string;  age: number;  email: string;}//omittype email= omit;

partial:使 t 的所有属性可选。

interface person {    name: string;    age: number;}type partialperson = partial; // { name?: string; age?: number; }

其他人喜欢,
必填
只读
记录

typescript 中的类

在 typescript 中,类是使用 class 关键字定义的。

class person {    firstname: string;    lastname: string;    constructor(firstname: string, lastname: string) {        this.firstname = firstname;        this.lastname = lastname;       }    greet() {        console.log("hello, my name is " + this.firstname + " " + this.lastname);       }}

typescript 中的访问修饰符

public 类成员的默认可见性是public。公共成员可以在任何地方访问
受保护的成员仅对声明它们的类的子类可见。
私人成员只能在班级内访问。

typescript 中的静态成员

typescript 中的静态成员是属于类本身的成员(属性和方法),而不是属于类的各个实例。

class myclass {    static staticproperty: string = "static property";    static staticmethod() {        console.log("static method");    }}

在 typescript 中实现

在 typescript 中,接口定义了要实现的类的契约。实现接口的类必须具有接口中声明的所有属性和方法。使用了implements关键字

interface Shape {    area(): number;}class Circle implements Shape {    radius: number;    constructor(radius: number) {        this.radius = radius;    }    area():    number {        return Math.PI * this.radius * this.radius;       }}

结论:

这些是我本周学到的 typescript 的一些基本用例。我学到了很多很酷的东西,但还有很多东西有待发现。 typescript 不断发展,因此我努力跟上最新版本和功能,并关注 typescript 的官方文档和博客以获取最新消息和最佳实践。 
感谢您在我的旅途中陪伴我。

以上就是学习 Typescript 的旅程的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1496414.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
js 如何绑定字体
上一篇 2025年12月19日 18:34:39
jQuery Ajax 加载浏览器缓存图片为何无响应?
下一篇 2025年12月19日 18:34:50

相关推荐

  • mysql如何查看索引 mysql创建索引并验证效果步骤

    mysql如何查看索引 mysql创建索引并验证效果步骤mysql如何查看索引 mysql创建索引并验证效果步骤mysql如何查看索引 mysql创建索引并验证效果步骤mysql如何查看索引 mysql创建索引并验证效果步骤

    查看索引使用show index和show create table;2. 创建索引用create index或alter table;3. 验证索引使用explain分析查询计划;4. 索引失效原因包括数据类型不匹配、函数操作、模糊查询以%开头、or条件复杂、优化器判断选择性低等;5. 常见索引类…

    2026年9月23日 • 用户投稿
    100
  • Spring Security控制器测试中403错误排查与解决方案

    本文探讨Spring Security控制器测试中遇到403错误的常见原因及解决方案。当安全配置要求特定角色(如ADMIN)访问所有端点时,测试环境下的模拟用户权限可能不匹配。教程将指导如何通过临时放宽安全规则或确保模拟用户角色正确配置来解决此类权限问题,确保测试顺利进行。 在spring secu…

    2026年9月23日
    100
  • VSCode如何通过扩展实现SQL查询 VSCode SQL编辑器插件的使用技巧

    首先确认数据库服务运行且vscode可访问数据库服务器,其次检查扩展配置信息如数据库类型、主机地址、端口、用户名密码等,确保本地路径正确或远程连接正常,检查防火墙是否开放数据库端口,确认已安装必要驱动程序如mysql或psycopg2,查看vscode输出面板获取错误信息,尝试更新或重装扩展,必要时…

    2026年9月23日
    000
  • 使用Java Stream高效提取嵌套集合中的唯一元素

    本教程深入探讨如何利用Java Stream API高效处理嵌套集合,从包含多层列表的对象中提取并收集唯一的元素。我们将重点介绍flatMap()和mapMulti()两种强大的流操作,演示如何将List中每个Employee对象内部的List扁平化为单一的地址流,进而简洁且高可读性地获取所有员工的…

    2026年9月23日
    100
  • Linux sudoers文件配置方法

    使用visudo编辑sudoers文件可安全配置用户权限,避免语法错误。通过用户、主机、命令别名简化管理,合理分配无需密码或特定命令权限,禁止赋予shell类命令无限制权限,并将规则写入/etc/sudoers.d/目录便于维护,配置后需测试并备份以防出错。 sudoers 文件用于配置 Linux…

    2026年9月23日
    200
  • mysql添加索引命令 mysql创建普通唯一复合索引教程

    mysql添加索引命令 mysql创建普通唯一复合索引教程mysql添加索引命令 mysql创建普通唯一复合索引教程mysql添加索引命令 mysql创建普通唯一复合索引教程mysql添加索引命令 mysql创建普通唯一复合索引教程

    在mysql中给表加索引的核心目的是提升查询效率。解决方案是通过create index或alter table语句创建不同类型的索引:1. 普通索引用于加快非唯一列的查询;2. 唯一索引确保列值唯一性并提升性能;3. 复合索引支持多列组合查询,遵循最左前缀原则;4. 复合唯一索引结合复合和唯一特性…

    2026年9月23日 • 用户投稿
    100
  • VSCode快速配置React:JSX支持、中文文档、组件调试

    首先确保安装es7 react/redux/graphql/react-native snippets扩展并配置jsconfig.json文件以启用jsx语法高亮;通过安装中文语言包汉化界面,并结合浏览器书签、翻译工具及笔记软件高效查阅react中文文档;调试react组件时需安装debugger …

    2026年9月23日
    200
  • PaintToolSAI的AI功能如何裁剪图片?教你精准实现裁剪方法

    PaintToolSAI的AI功能如何裁剪图片?教你精准实现裁剪方法PaintToolSAI的AI功能如何裁剪图片?教你精准实现裁剪方法PaintToolSAI的AI功能如何裁剪图片?教你精准实现裁剪方法PaintToolSAI的AI功能如何裁剪图片?教你精准实现裁剪方法

    PaintToolSAI没有AI裁剪功能,其裁剪依赖手动操作。用户需使用选区工具框选区域,再通过“画布→裁剪”完成,过程基础但精确,适合专注绘画而非复杂图像处理的场景。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ PaintToolSAI…

    2026年9月23日 • 用户投稿
    100
  • X 旗下 Grok 推出即时语音搜索功能 向 Google 发起挑战?

    近日,X 平台的人工智能助手 Grok 正式上线“即时语音搜索”功能,用户现在可通过语音直接提问,触发实时网络检索,并迅速获得整合后的精准答复。这项新能力意在优化信息查询流程,推动人机互动向更自然、高效的形态发展。 根据官方说明与实际用户体验,Grok 的语音搜索实现了“说话即搜、即时回应”的流畅体…

    2026年9月23日
    100
  • Java JUnit assertThrows 与异常消息比对:避免常见陷阱

    本教程深入探讨在 Java JUnit 中使用 assertThrows 进行异常测试时常见的 assertEquals 误用问题。它详细解释了为何不能直接将期望的字符串消息与捕获到的异常对象进行比对,并提供了正确的解决方案:通过 e.getMessage() 获取异常消息进行精确断言,确保测试的准…

    2026年9月23日
    100
  • safari浏览器如何导入Netscape格式的书签文件_safari浏览器导入Netscape书签方法

    Safari无法直接读取Netscape格式书签时,可通过HTML文件转换、第三方工具修复或借助Chrome/Firefox中转导入。首先确认书签文件含标准结构,尝试直接导入Safari;若失败,使用Linkman Lite等工具修复格式后导入;或通过Chrome先行导入再导出标准HTML文件,最后…

    2026年9月23日
    000
  • VSCode如何通过AI优化内存使用 VSCode智能内存分析调试插件

    ai并不能直接优化vscode的内存占用,而是通过赋能智能化的内存分析调试插件,间接提升vscode的运行效率和开发体验;2. 这类插件通过采集堆快照、cpu性能数据、gc日志和扩展资源消耗等运行时信息,结合ai的模式识别与异常检测能力,精准识别内存泄漏、未清理的事件监听器、循环引用等问题;3. a…

    2026年9月23日
    300
  • PHP容器与依赖注入怎么理解_PHP中DI容器概念与Pimple等库应用

    依赖注入通过外部传入依赖解耦代码,容器如Pimple集中管理对象创建与依赖解析,提升可测试性与维护性,适用于中小型项目。 PHP中的容器和依赖注入(Dependency Injection,简称DI)是现代开发中解耦代码、提升可测试性和可维护性的核心技术。理解它们的关键在于掌握“控制反转”(Inve…

    2026年9月23日
    100
  • VS Code算法实战:竞赛编程与调试环境搭建

    首先安装编程语言环境及VS Code扩展,如C/C++、Code Runner和LeetCode;接着配置Code Runner支持编译运行与输入重定向;最后通过代码片段提升编码速度,形成高效竞赛开发环境。 在竞赛编程中,高效的开发环境能大幅提升编码速度与调试效率。VS Code凭借轻量、可扩展和强…

    2026年9月23日
    100
  • 字节入局,AR眼镜掀起新“风口”?

    近日,关于老凤祥与字节跳动合作推出AI眼镜的消息在网络上引发热议。据相关媒体报道,老凤祥计划联合字节跳动旗下的火山引擎共同开发多款AI眼镜,并由豆包大模型提供技术支持,预计将在今年7月正式发布。 对此,6月12日,火山引擎方面进行了澄清。其负责人表示,并未有与老凤祥合作研发AI智能眼镜的计划。而豆包…

    2026年9月23日
    100
  • VSCode如何设置代码自动补全触发 VSCode智能提示触发条件的优化

    要解决vscode代码自动补全的触发、准确性、禁用和速度问题,需按以下步骤操作:1. 调整editor.quicksuggestions控制提示触发条件,如设置”other”: true, “comments”: false, “strin…

    2026年9月23日
    200
  • AdobePhotoshop的AI混合工具怎么用?掌握智能图像编辑的教程

    Photoshop的AI混合工具以生成式填充和神经网络滤镜为代表,通过语义理解实现智能图像融合。生成式填充可依据文本提示添加、移除或扩展内容,自动匹配光影与纹理;神经网络滤镜如和谐化则优化颜色与光照匹配。与传统基于像素计算的混合模式不同,AI工具理解图像内容,实现“生成并融合”。使用时需精准输入英文…

    2026年9月23日
    100
  • 解决 Conda 环境中 Java 版本冲突的策略

    本文旨在解决 Conda 环境中 Java 版本激活不正确的问题。当用户尝试在 Conda 环境中指定特定 Java 版本(如 OpenJDK 8)时,系统可能仍激活旧的或错误的 Java 版本。教程将详细分析问题根源,并提供一种通过精确指定 Java 包名来确保 Conda 环境正确管理 Java…

    2026年9月23日
    100
  • Windows安装过程中蓝屏INACCESSIBLE_BOOT_DEVICE怎么办?

    1、蓝屏“INACCESSIBLE_BOOT_DEVICE”通常因SATA模式不匹配或驱动缺失导致;2、进入BIOS将SATA模式从RAID改为AHCI可解决兼容性问题;3、安装时加载主板存储控制器驱动以识别NVMe或RAID磁盘;4、使用diskpart命令清理磁盘并转换为GPT(UEFI)或MB…

    2026年9月23日
    000
  • 谷歌为 Gemini CLI 带来扩展功能

    谷歌旗下的 AI 编程助手 Gemini CLI 最近推出了名为“扩展”的全新功能。官方表示,这一更新让用户能够“接入常用工具,并定制属于自己的 AI 命令行体验”。现在,任何开发者都可以发布扩展程序,无需经过谷歌的审核批准即可上线使用。 目前扩展库中已提供超过 50 款扩展,涵盖多种实用场景。例如…

    2026年9月23日
    000

发表回复

登录后才能评论
关注微信