TypeScript基础知识(笔记)_typescript中怎么才能安全的访问一个空值-程序员宅基地

技术标签: typescript  

一、原始数据类型

1.布尔值  在 TypeScript 中,使用 boolean 定义布尔值类型

2.数值  使用 number 定义数值类型

3.字符串  使用 string 定义字符串类型

4.空值  在 TypeScript 中,可以用 void 表示没有任何返回值的函数

5.Null 和 Undefined  在 TypeScript 中,可以使用 null 和 undefined 来定义这两个原始数据类型

二、任意值

任意值(Any)用来表示允许赋值为任意类型

在任意值上访问任何属性都是允许的,可以认为,声明一个变量为任意值之后,对它的任何操作,返回的内容的类型都是任意值

变量如果在声明的时候,未指定其类型,那么它会被识别为任意值类型

三、类型推论 

如果没有明确的指定类型,那么 TypeScript 会依照类型推论(Type Inference)的规则推断出一个类型

TypeScript 会在没有明确的指定类型的时候推测出一个类型,这就是类型推论。

如果定义的时候没有赋值,不管之后有没有赋值,都会被推断成 any 类型而完全不被类型检查

四、联合类型 

联合类型(Union Types)表示取值可以为多种类型中的一种

联合类型使用 | 分隔每个类型

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法。

五、对象的类型—— 接口

在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型。

什么是接口:常用于对「对象的形状(Shape)」进行描述。

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};

赋值的时候,变量的形状必须和接口的形状保持一致。

接口中还存在:可选属性、任意属性、只读属性。

六、数组的类型

在 TypeScript 中,数组类型有多种定义方式,比较灵活。

最简单的方法是使用「类型 + 方括号」来表示数组

let fibonacci: number[] = [1, 1, 2, 3, 5];

数组的项中不允许出现其他的类型

数组泛型:我们也可以使用数组泛型(Array Generic) Array<elemType> 来表示数组

let fibonacci: Array<number> = [1, 1, 2, 3, 5];

七、函数的类型

函数声明:一个函数有输入和输出,要在 TypeScript 中对其进行约束,需要把输入和输出都考虑到,其中函数声明的类型定义较简单 

function sum(x: number, y: number): number {
    return x + y;
}

注意,输入多余的(或者少于要求的)参数,是不被允许的

函数表达式:

let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};

其中,还有可选参数、参数默认值、剩余参数、重载

八、类型断言

类型断言(Type Assertion)可以用来手动指定一个值的类型。

语法:值 as 类型   或   <类型>值

类型断言的用途:

将一个联合类型断言为其中一个类型

将一个父类断言为更加具体的子类

将任何一个类型断言为 any

将 any 断言为一个具体的类型

九、类型别名

类型别名用来给一个类型起个新名字

简单的例子

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

十、字符串字面量类型

字符串字面量类型用来约束取值只能是某几个字符串中的一个。

简单的例子

type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {
    // do something
}

handleEvent(document.getElementById('hello'), 'scroll');  // 没问题
handleEvent(document.getElementById('world'), 'dblclick'); // 报错,event 不能为 'dblclick'

十一、元组

数组合并了相同类型的对象,而元组(Tuple)合并了不同类型的对象。

简单的例子

let tom: [string, number] = ['Tom', 25];

十二、类

类的概念

  • 类(Class):定义了一件事物的抽象特点,包含它的属性和方法
  • 对象(Object):类的实例,通过 new 生成
  • 面向对象(OOP)的三大特性:封装、继承、多态
  • 封装(Encapsulation):将对数据的操作细节隐藏起来,只暴露对外的接口。外界调用端不需要(也不可能)知道细节,就能通过对外提供的接口来访问该对象,同时也保证了外界无法任意更改对象内部的数据
  • 继承(Inheritance):子类继承父类,子类除了拥有父类的所有特性外,还有一些更具体的特性
  • 多态(Polymorphism):由继承而产生了相关的不同的类,对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal,但是分别实现了自己的 eat 方法。此时针对某一个实例,我们无需了解它是 Cat 还是 Dog,就可以直接调用 eat 方法,程序会自动判断出来应该如何执行 eat
  • 存取器(getter & setter):用以改变属性的读取和赋值行为

TypeScript 中类的用法 

public private 和 protected

TypeScript 可以使用三种访问修饰符(Access Modifiers),分别是 publicprivate 和 protected

  • public 修饰的属性或方法是公有的,可以在任何地方被访问到,默认所有的属性和方法都是 public 的
  • private 修饰的属性或方法是私有的,不能在声明它的类的外部访问
  • protected 修饰的属性或方法是受保护的,它和 private 类似,区别是它在子类中也是允许被访问的

十三、泛型

泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。

简单的例子

function fn<T>(arg:T):T{
    return arg
} 
let res = fn(123)
function swap<T,U>(fns:[T,U]) :[U,T]{
 return [fns[1],fns[0]]
}
let res2 = swap(['string',123])

 约束泛型  

 在函数内部使用泛型变量的时候,

由于事先不知道它是哪种类型,所以不能随意的操作它的属性或方法

interface lengths {
    length:number
}
// 我们使用了 extends 约束了泛型 T 必须符合接口 lengths 的形状
function asd<T extends lengths>(arg:T) :T{
    console.log(arg.length)
    return arg
}
let sss = asd('asd')
let arr = asd([1,2,3])
let obj = asd({length:112})

泛型在类中使用

class q<T> {
    private data = []
    push(item:T){
        return this.data.push(item)
    }
    pop():T{
        return this.data.shift()
    }
}
let s = new q()
s.push(1)

泛型在接口中的使用

interface k<T,U> {
    key:T,
    value:U
}
let k1:k<number, string> = {key:1,value:"123"}
let k2:k<string,number > = {key:'1',value:123}

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/mymayue/article/details/120709187

智能推荐

How to helm install prometheus 【 helm 安装 prometheus 】_helm prometheus-程序员宅基地

文章浏览阅读1.1k次,点赞17次,收藏18次。kube-prometheus-stack是一个基于Prometheus和Grafana的开源软件套件,用于在Kubernetes集群中进行监控和可视化。它提供了一套完整的工具和组件,用于收集、存储、查询和展示监控指标数据。组件:Prometheus Operator:用于在Kubernetes上部署和管理Prometheus实例的控制器。Alertmanager:用于管理和处理Prometheus生成的告警通知。Prometheus:一个开源的监控系统,用于收集和存储时间序列数据。_helm prometheus

pycharm使用心得-程序员宅基地

文章浏览阅读156次。调试,使用debug类似于matlab,先设置断点,然后再F7单步运行

Corel VideoStudio(会声会影2023) V26.0.0.136 官方破解版_会声会影 2023 v 26.1.0.268整合盘-程序员宅基地

文章浏览阅读913次,点赞20次,收藏9次。会声会影(Corel VideoStudio)为加拿大Corel公司发布的一款功能丰富的视频编辑软件。会声会影2023简单易用,具有史无前例的强大功能,拖放式标题、转场、覆叠和滤镜,色彩分级、动态分屏视频和新增强的遮罩创建器,超越基本编辑,实现影院级效果。优化分屏剪辑功能,简化多时间轴编辑的工作流程,让创作更轻松。添加趣味性3D标题,内置NewBlueFX和proDAD转场和防抖插件,一键防抖和校准色彩。使用MultiCam Capture Lite可以轻松录制并编辑视频教程、产品演示、游戏视频、在线课程。_会声会影 2023 v 26.1.0.268整合盘

Adobe(Pr & Ae)动态图形模板-程序员宅基地

文章浏览阅读1.5k次。动态图形模板 Motion Graphics Templates是一种可在 Pr 或者 Ae 中创建的文件类型 (.mogrt), 以供将来重复使用或合作共享。.mogrt 文件格式可以让使用 Ae 的动画设计人员保持对作品风格的控制,同时还可以让使用 Pr 的编辑人员能够在编辑项目上下文中自定义运动图形。◆◆◆在Ae中创建动态图形模板动态图形模板可以在 Ae 或 Pr 的基本图形面板..._通过工作区域创建受保护区域

项目版本号管理说明-程序员宅基地

文章浏览阅读3.5k次。软件版本简介Alpha(α)Beta(β)RC(Release Candidate)StableGA(General Availability)简介在使用jar包的时候经常看到一些特殊版本,例如这次log4j的JNDI注入漏洞,发布的版本log4j-2.15.0-rc2这个rc2代表什么呢?Alpha(α)预览版,也叫内部测试版,一般不向外部发布,会有很多Bug,主要是内部人员用于测试。很多开源软件的大版本也会释放出来,让大家一起来找茬。例如:<dependency> _项目版本号管理

[发送AT指令配置a7670C模块上网]-程序员宅基地

文章浏览阅读2k次。2.1 如果内核配置和代码修改正确,设备启动后,ifconfig -a可以看到usb0节点。1.1按照芯片data sheet修改kernel代码,添加PID和VID。概要:基于rv1126平台调试SIMCOM 7670C 4G模块。1.2.3,使能USB network,配置rndis host。发送如下指令,如果看到回复OK,就证明4G模块与主控通讯正常。此处根据不同的芯片按照其datasheet进行修改。2.2 用AT指令测试4G模块与主控是否通讯正常。1,内核配置及内核代码修改。_a7670c

随便推点

EtherCAT学习之路——概述_ethercat demo-程序员宅基地

文章浏览阅读1.1w次,点赞54次,收藏275次。首发于知乎最近在做基于EtherCAT的项目,看了一些网上的博客,感觉写的都比较松散。虽然,自己也是才开始学习,希望能把这段时间学到的东西总结一下。1.EtherCAT简介EtherCAT是由德国BECKHOFF自动化公司于2003年提出的实时工业以太网技术。它具有高速和高数据有效率的特点,支持多种设备连接拓扑结构。其从站节点使用专用的控制芯片,主站使用标准的以太网控制器。Et..._ethercat demo

QT简介及QT环境搭建-程序员宅基地

文章浏览阅读2k次。QT简介及QT环境搭建文章目录QT简介及QT环境搭建一、QT简介1. 什么是QT?2. QT的发展史3. QT支持的平台4. QT的优点5. QT开发工具二、QT环境搭建(CentOS7)一、QT简介1. 什么是QT?Qt是一个1991年由Qt Company开发的跨平台C++图形用户界面应用程序开发框架 它既可以开发GUI程序,也可用于开发非GUI程序,比如控制台工具和服务器。Qt是面向..._qt环境

win10 设置任务栏时钟显示到秒_win10任务栏显示秒数-程序员宅基地

文章浏览阅读188次。win10 设置任务栏时钟显示到秒_win10任务栏显示秒数

.NET系统框架-程序员宅基地

文章浏览阅读124次。本书是一本讲解.NET技术的书籍,目标读者群也是在.NET框架(.NET Framework)下进行开发的程序员,因此我们无法回避的问题就是:什么是.NET框架?它包含了哪些内容?为开发程序提供了哪些支持?很多朋友对这类个问题的第一反应可能是.NET框架所提供的庞大类库及编写代码所采用的C#语言,实际上远不止这些。要描述.NET框架,自然会遇到与其相关的一系列专业的技术术语和缩写,相信大家已经..._目标框架 目标操作系统版本

基于单链表、环形队列(并发有锁)的多线程生产者消费者模型_并发环状加锁-程序员宅基地

文章浏览阅读2.2k次,点赞3次,收藏11次。在这之前的我已经介绍过生产者消费者模型,不懂的可以下跳地址: http://blog.csdn.net/quinn0918/article/details/728259921、环形缓冲区缓冲区的好处,就是空间换时间和协调快慢线程。缓冲区可以用很多设计法,这里说一下环形缓冲区的几种设计方案,可以看成是几种环形缓冲区的模式。设计环形缓冲区涉及到几个点,一是超出缓冲区大小的的索引如何处理,二是如何表示缓_并发环状加锁

别光看世界杯 7月还有一场音视频技术盛宴等着你-程序员宅基地

文章浏览阅读226次。在全世界球迷的瞩目下,2018世界杯在上周激情上演,相信接下来的一个月时间里无数球迷又将守在电视前为自己喜欢的球队摇旗呐喊。当然,在移动互联网发达的今天,即使不在电视前,..._移动咪咕 张云天