【TypeScript(一)】TypeScript的变量类型及声明

2023-11-18

TypeScript的变量类型及声明

TS和JS最大的区别就是在其中给变量引入了类型的概念

比如像之前我们使用JS的时候:

var a = 10;这时a是数据类型,但当如果我们后面要使用a;我们也可以a = "hello";这时a就变成了一个字符串类型。也就是说我们在js中没有严格的类型的规范,我们可以随意使用它。

但是TS则不同,通过TS我们就可以给变量声明类型。

一、变量类型

1、变量类型

在TS中我们可以指定变量的类型。如:

let a:number;

通过以上声明有什么用处呢?那就是a在以后的使用过程中,a的值只能是数字不能像js一样这次可以赋值为数字,下次可以赋值为字符串。

如果变量的声明和赋值同时进行,TS可以自动对变量进行类型转换,那我们就不用写变量类型,像这样:

let a = 12;///此时TS默认认为变量的类型是数字的形式
let c = fasle;那么以后我们对c只能赋值为boolean类型,因为他会自动推断c的类型

既然说直接赋值可以自动判断类型,那么是不是类型声明就是没有什么用了呢?

2、类型声明的应用

1)给函数声明时的参数使用

当然不是,JS中的函数是不考虑参数的类型和数量,写函数的时候不用考虑类型和数量,但是可能会造成安全的隐患,比如像两个数相加的函数,不小心传过去了一个字符串,那就变成了字符串拼接。

那么类型声明就有用了,我们可以在函数声明的时候,给参数加上类型声明,不会发生上述的情况。可以保证传入的类型不会错,不会出现难找的错误。避免在开发中可能会发生的错误。(语法上相当于js更加的规范)

2)函数的返回值也会用到类型声明

function sum( a: number, b: number):number {返回值为number

​ return a+b;返回值的类型必须是number类型

}

总结:

类型声明可以在声明时使用

如果数据的声明和赋值同时进行。可以省略类型声明

可以在函数参数和返回值上使用类型声明

二、变量声明

下面让我们来具体的看一下都有哪些函数声明吧!

1、类型都包括:number、string、boolean(基本的)、或者可以直接使用字面量来声明类型。

如:
1)let a:10; a =11;///就会报错,类似const,赋值后不能改

2)let b:"male"|"female";/使用|来连接多个类型,b的值只能有这两种

3)let c:boolean|string;/c的值可以是两种类型

这种类型叫联合类型

2、any和unknown类型

1)let d:any;/any表示的是任意类型,可以任意赋值

需要注意的是: (let d;隐式声明,也是any类型)

一个变量设置为any后,相当于对该变量关闭了TS的类型检测,就变得和js一样了

如果声明时不指定变量的类型,则默认解释为any类型

2)let e:unknown;表示未知类型的值

any和unknown的区别是什么呢?

1)当我们声明一个string类型的变量,如果我们把any类型的值赋给string的变量但是他不会报错。

2)但是当我们是unknown的类型,把unknown类型的值赋值给别的类型就会报错。

总结:unknown实际上是一个类型安全的any,不能直接赋值给其他变量

但是如果想把unknown类型的值赋值给其他类型怎么办呢?

方法一:

if(typeof e === "string"){

​		s = e;///s为unknown类型   e为string类型

}

方法二:类型断言(告诉编译器e(变量的实际的类型)的类型)

s = e as string;(第一种写法)

s = <string>e;(第二种写法)

3、void(空值)、never(没有值)设置函数的返回值

function fn():number{/指定返回值类型return 1;

}

1)当函数没有返回值,就用void来表示,void用来表示空,以函数为例,表示当前函数没有返回值。

2)never:类似void但是never表示永远不会返回结果(没有值)

用途:用来报错的

function fn():never{throw new Error("报错了!")}

4、其他类型:

1)object表示一个js对象

let a:object;

a  = {};

a = function(){

}
let b :{ name:string,age?:number};///问号表示一个可选属性,可以有也可以没有;{}里面写包含哪些属性

如果想让对象有多个可有可无的属性怎么办?

let c : { name:string,[propName(自定义名字) : string]:any }///表示任意类型的属性

c = {name:'啊啊啊',age:18,gender:'男'}

2)array数组(两种声明方法:类型[]、Array<类型>)

let e : string[];表示字符串数组(数组里寸的都是字符串)

let f :number[];///表示数值类型的数组

let g : Array<number>;表示数值类型的数组

3)tuple元组:就是固定长度的数组

元组和数组的区别:元组的效率会好一些,元组长度固定的

let h : [string,string];这个元组有两个值,类型都是string

4)enum枚举:

enum Gender{

​	Male = 0,

​	Female = 1

}

let i : { name:string , gender:Gender};

i = {

​	name : 'su',

​	gender:  Gender.Male//male  因为要给别人用所以要考虑

}

//&表示同时,一个类型即是string又是number

let j : string & number;///没有意义

let j : {name:string} & {age:number};///对象中同时有两个类型

类型的别名:

type myType = 1|2|3|4|5;

let k:1|2|3|4|5;k值的范围(直接写let k : myType;)

let l:1|2|3|4|5;

这样写很麻烦因为是同样的内容我们要写很多遍,所以我们可以使用别名

type myType = string;给string起别名
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【TypeScript(一)】TypeScript的变量类型及声明 的相关文章

随机推荐

  • (4)C中初始化字符串的几种方式和比较

    字符串几种定义方式的对比 一 字符串的定义方式 1 利用字符指针创建字符串 1 1 利用字符指针创建字符串 只能用字符串常量的方式进行初始化 2 利用字符数组创建字符串 2 1 情况1 定义了字符数组的长度 2 2 情况2 省略了定义数组长
  • 小记-面试时对MVC的理解

    MVC分别表示模型 视图 控制 1 模型层也叫业务逻辑层 是整个应用程序的核心 模型层接收视图层请求的数据并处理 返回最终的结果 2 视图层就是用户看到的并与之交互的界面 3 控制层就是接收用户的请求 并根据请求来决定调用哪个模型和视图去完
  • 中台战略-第四章、企业中台5大成功要素

    文章目录 第四章 企业中台5大成功要素 4 1 中台文化 7个行动准则和行动纲领 4 1 1 战略有思想 4 1 2 融合跨部门 4 1 3 创新快支持 4 1 4 试错多包容 4 1 5 共享创条件 4 1 6 赋能是基础 4 1 7 行
  • 性能使用指令

    vmstat 1 总的CPU利用率 mpstat P ALL 1 每个CPU核的利用率 top pidstat 每个进程的CPU利用率 信息来源 proc stat proc pid stat 查看网络流量 sar n DEV 1 100
  • jmeter调试错误大全

    一 前言 在使用jmeter做接口测试的过程中大家是不是经常会遇到很多问题 但是无从下手 不知道从哪里开始找起 对于初学者而言这是一个非常头痛的事情 这里结合笔者的经验 总结出以下方法 二 通过查看运行日志调试问题 写好脚本后 可以先试着运
  • HTML5 FormData 方法介绍

    XMLHttpRequest 是一个浏览器接口 通过它 我们可以使得 Javascript 进行 HTTP S 通信 XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式 2008年 2 月 XMLHttpReque
  • Node.js中的回调解析

    Node js 异步编程的直接体现就是回调 异步编程依托于回调来实现 但不能说使用了回调后程序就异步化了 回调函数在完成任务后就会被调用 Node 使用了大量的回调函数 Node 所有 API 都支持回调函数 例如 我们可以一边读取文件 一
  • TCP打洞和UDP打洞的区别

    为什么网上讲到的P2P打洞基本上都是基于UDP协议的打洞 难道TCP不可能打洞 还是TCP打洞难于实现 假设现在有内网客户端A和内网客户端B 有公网服务端S 如果A和B想要进行UDP通信 则必须穿透双方的NAT路由 假设为NAT A和NAT
  • 决策树和随机森林的实现,可视化和优化方法

    决策树原理 决策树原理这篇文章讲的很详细 本文仅写代码实现 构造决策树 matplotlib inline import matplotlib pyplot as plt import pandas as pd from sklearn d
  • Ubuntu 下配置android studio 配置 adb环境变量 普通用户可以执行 root用户无法执行

    我们环境变量其实已经配置好了 但普通用户下可以执行adb root权限下就不能执行 我们看一下 普通用户和 root用户所在的目录 root 权限不能执行 我们切换一下 普通用户的当前目录 普通用户adb 可以执行 我们新开一个窗口 切换到
  • notepad++插件查看十六进制

    下载hex editor 点击plugins 选择plugin manager show plugin managers 然后再available里面找到hex editor 然后下载 使用hex editor 点击plugins hex
  • 1055. 集体照 (25) PAT乙级真题

    1055 集体照 25 拍集体照时队形很重要 这里对给定的N个人K排的队形设计排队规则如下 每排人数为N K 向下取整 多出来的人全部站在最后一排 后排所有人的个子都不比前排任何人矮 每排中最高者站中间 中间位置为m 2 1 其中m为该排人
  • clockwise print binary search tree

    给一个二叉树 顺时针打印出所有的节点 例如 应该打印 20 8 4 10 14 25 22 思路 可以分为三步打印 1 打印左边界 最后一个叶子节点不打印 2 打印所有叶子结点 3 打印右边界 根和最后一个叶子结点不打印 代码如下 void
  • buu [ACTF2020 新生赛]Exec

    这道题倒是很直白简单 基本上知道命令注入这个知识点就行 命令注入 127 0 0 1 ls 127 0 0 1 ls flag 127 0 0 1 cat flag
  • 软件测试包括哪些内容

    以下是一些需要考虑的步骤 1 得到需求 功能设计 内部设计说书和其他必要的文档 2 得到预算和进度要求 3 确定与项目有关的人员和他们的责任 对报告的要求 所需的标准和过程 例如发行过程 变更过程 等等 4 确定应用软件的高风险范围 建立优
  • NIO - IO多路复用详解

    文章目录 Java NIO IO多路复用详解 现实场景 典型的多路复用IO实现 Reactor模型和Proactor模型 传统IO模型 Reactor事件驱动模型 Reactor模型 业务处理与IO分离 Reactor模型 并发读写 Rea
  • Adobe PhotoShop安装程序无法初始化的解决办法

    近日需要使用PhotoShop 不想下了好几个水版 给大家一个可以用的 http pan baidu com s 1dDnJLy5 不仅安装不了而且把机子的注册表改了 再次安装时就出现了 安装程序无法初始化 的问题 网上各种查找 零零散散的
  • 范数(简单的理解)、范数的用途、什么是范数

    没学好矩阵代数的估计范数也不是太清楚 当然学好的人也不是太多 范数主要是对矩阵和向量的一种描述 有了描述那么 大小就可以比较了 从字面理解一种比较构成规范的数 有了统一的规范 就可以比较了 例如 1比2小我们一目了然 可是 3 5 3 和
  • kafka消费的三种模式_快速认识Kafka

    1 Kafka是什么 简单的说 Kafka是由Linkedin开发的一个分布式的消息队列系统 Message Queue kafka的架构师jay kreps非常喜欢franz kafka 觉得kafka这个名字很酷 因此将linkedin
  • 【TypeScript(一)】TypeScript的变量类型及声明

    TypeScript的变量类型及声明 TS和JS最大的区别就是在其中给变量引入了类型的概念 比如像之前我们使用JS的时候 var a 10 这时a是数据类型 但当如果我们后面要使用a 我们也可以a hello 这时a就变成了一个字符串类型