学习 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)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 18:34:39
下一篇 2025年12月19日 18:34:50

相关推荐

  • javascript闭包怎么保存游戏角色状态

    javascript闭包能为每个游戏角色创建独立私有状态环境,核心在于函数内部变量被返回的方法捕获并持续存在,从而实现封装与隔离。1. 闭包提供封装性,将角色生命值、位置等关键数据锁定在函数作用域内,仅通过公共方法如takedamage()、move()进行安全操作,防止外部随意修改;2. 支持数据…

    2025年12月20日 好文分享
    000
  • js中如何将数组转换为对象

    将javascript数组转换为对象的关键在于确定键和值的来源:1. 若以数组索引为键、元素为值,可通过for循环实现,如for(let i=0;ireduce方法累积生成对象,如arr.reduce((acc, item) => { acc[item.id] = item; return a…

    2025年12月20日 好文分享
    000
  • JavaScript动态生成HTML表格:从数组数据到完整结构的实现指南

    本教程详细介绍了如何使用纯JavaScript从二维数组动态创建完整的HTML表格,包括表头和表体。文章重点讲解了HTMLTableElement提供的createTHead()、createTBody()、insertRow()和insertCell()等高效DOM操作方法,帮助开发者以结构化且可…

    2025年12月20日
    000
  • 使用纯JavaScript动态生成HTML表格:从数组数据到结构化呈现

    本文详细介绍了如何使用纯JavaScript高效地从数组数据动态创建HTML表格。我们将探讨利用HTMLTableElement接口提供的createTHead()、createTBody()、insertRow()和insertCell()等方法,以结构化且语义化的方式构建表格,避免常见的DOM操…

    2025年12月20日
    000
  • JavaScript动态生成HTML表格:从数组数据到结构化呈现

    本教程详细讲解如何使用纯JavaScript从多维数组动态生成结构化的HTML表格。针对传统DOM操作在处理表格行和单元格时可能遇到的问题,本文将重点介绍利用HTMLTableElement接口提供的createTHead(), createTBody(), insertRow(), insertC…

    2025年12月20日
    000
  • 使用纯JavaScript动态生成HTML表格:从数组到完整结构

    本教程详细阐述如何利用纯JavaScript从多维数组动态创建完整的HTML表格,包括表头和表体。文章重点介绍HTMLTableElement接口提供的createTHead()、createTBody()、insertRow()和insertCell()等高效方法,以替代传统的document.c…

    2025年12月20日
    000
  • 解决p5.js中同类多对象碰撞检测的策略与实践

    本文深入探讨了在p5.js游戏开发中,当引入多个相同类型对象(如多个球和多个挡板)时,如何正确实现对象间碰撞检测的问题。针对常见的设计缺陷——将不同职责(如挡板和球的状态)耦合在单一类中,导致碰撞检测逻辑失效,本文提出了通过职责分离(创建独立的挡板和球类)和集中化碰撞检测(在主循环中遍历所有可能碰撞…

    2025年12月20日
    000
  • p5.js 中多对象碰撞检测的策略与实践

    本文深入探讨了在p5.js游戏开发中使用p5.collide2d库时,当存在多个同类型对象(如多个球和多个挡板)时,如何实现正确的全方位碰撞检测。核心问题在于原始设计将不同游戏实体的状态混淆在一个类中,导致碰撞检测仅限于“一对一”关系。解决方案是采用清晰的面向对象设计,将不同实体分离为独立的类,并通…

    2025年12月20日
    000
  • 解决P5.js中同类对象间碰撞检测问题的策略与实现

    本文探讨了在P5.js游戏开发中,当多个同类对象(如多个球和多个挡板)需要进行相互碰撞检测时,由于对象设计不当导致的碰撞失效问题。核心解决方案在于解耦对象,将不同类型的实体(如挡板和球)定义为独立的类,并通过在主循环中遍历所有可能的对象组合来执行全面的碰撞检测,从而确保所有对象之间的交互逻辑正确无误…

    2025年12月20日
    000
  • P5.js游戏开发:多对象碰撞检测的策略与实践

    本文深入探讨P5.js游戏开发中,当存在多个同类或不同类对象时,如何正确实现碰撞检测。通过分析常见错误——将多种实体逻辑混淆在一个类中导致的碰撞检测失效,我们提出并演示了基于“单一职责原则”的实体解耦方案,并详细讲解了如何利用嵌套循环实现所有对象间的通用碰撞检测,确保游戏逻辑的准确性和可扩展性。 引…

    2025年12月20日
    000
  • Prisma中多对多关系与多态关联设计策略

    本文探讨了在Prisma中处理多态性多对多关系(如一个笔记可关联课程或讲座)的两种主要数据库设计模式。第一种方案采用单一的Note表,通过可空外键关联不同实体,优点是表结构简洁,但可能存在字段冗余。第二种方案为每个实体创建独立的Note表,避免了冗余,但增加了表数量和查询复杂性。文章详细分析了两种方…

    2025年12月20日
    000
  • CSS 悬停效果中图像始终保持在顶层显示的技术指南

    本文详细介绍了在CSS悬停效果中,如何解决图像被裁剪或遮挡的问题。通过调整HTML结构,利用CSS的position属性和z-index进行精确布局与层叠控制,并移除父元素的overflow: hidden限制,确保图像在交互动画中始终保持可见并位于期望的顶层,从而实现更流畅、专业的视觉效果。 在网…

    2025年12月20日
    000
  • 解决CSS悬停效果中图片裁剪问题:深度解析overflow与z-index应用

    本文旨在解决网页卡片设计中,当触发悬停(hover)效果时,内部图片被意外裁剪的问题。我们将深入探讨CSS中的overflow属性、定位(position)属性以及层叠顺序(z-index)如何相互作用,导致此类视觉异常。通过优化HTML结构和CSS样式,确保图片在任何交互状态下都能完整且正确地显示…

    2025年12月20日
    000
  • 如何解决CSS悬停效果中图片被裁剪的问题

    本文将详细介绍在CSS卡片悬停效果中,如何解决图片被裁剪或隐藏的问题。通过调整HTML结构,将图片放置在卡片外部并利用相对定位容器与绝对定位图片相结合,同时合理设置z-index和pointer-events属性,确保图片在任何悬停状态下都能保持可见并位于其他元素之上,提供流畅的用户体验。 问题分析…

    2025年12月20日
    000
  • 使用 requestAnimationFrame 实现动画序列

    本文介绍如何使用 requestAnimationFrame 实现动画效果的序列播放,解决多个动画同时执行的问题。通过自定义的 animateInterpolationSequence 函数,可以灵活地定义动画序列,控制动画的起始值、持续时间、缓动函数等,从而实现复杂的动画效果。文章包含详细的代码示…

    2025年12月20日
    000
  • 交互式文本乱码/解密效果:使用JavaScript实现鼠标悬停动画

    本教程详细介绍了如何利用HTML、CSS和JavaScript创建一种独特的文本乱码/解密动画效果。当用户鼠标悬停在指定文本上时,文本会从随机字符逐渐“解密”显示原始内容,鼠标移开后则恢复乱码状态,为网页增添动态和科技感。文章将涵盖HTML结构、CSS样式以及核心JavaScript逻辑的实现细节,…

    2025年12月20日
    000
  • 解决Counter Up JQuery计数器重复滚动时停止在随机数的问题

    本文旨在解决在使用Counter Up JQuery插件时,当页面滚动导致计数器元素重新进入视口时,计数器停止在随机数而非重新计数的问题。通过使用Intersection Observer API,我们可以精确地控制计数器的启动时机,确保每次元素进入视口时都能正确地从零开始计数,从而避免计数器停止在…

    2025年12月20日
    000
  • 使用JavaScript实现悬停文本加密/解密效果

    本文详细介绍了如何使用JavaScript、HTML和CSS实现一个交互式文本效果,即当鼠标悬停在特定文本上时,文本会从随机字符逐步解密成预设文字,当鼠标移开时,又会逐步加密回随机字符。教程涵盖了从HTML结构、CSS样式到核心JavaScript逻辑的完整实现,包括随机字符串生成、动画控制和事件处…

    2025年12月20日
    000
  • JavaScript实现HTML元素悬停文本动态加扰与解扰效果

    本教程详细阐述如何利用JavaScript、HTML和CSS实现一种独特的文本交互效果:当鼠标悬停在特定HTML元素上时,其内部文本将从随机字符逐步“解扰”成预设内容,移开鼠标后则迅速“加扰”回随机字符,模拟黑客风格的动态显示,提升用户界面的视觉趣味性。 1. 概述与核心原理 在网页交互设计中,为文…

    2025年12月20日
    000
  • 高效的Flask与React项目开发实践:告别频繁npm run build

    本文详细介绍了在Flask与React集成项目中,如何优化开发工作流以避免每次前端代码修改后都需执行npm run build。核心策略是分离前端React开发服务器与后端Flask API服务器,通过配置React代理请求至Flask后端,实现前端热更新与后端独立运行。文章将指导读者配置开发环境,…

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信