TypeScript基础类型

string、number、bolean

直接在变量后面添加即可。

let myName: string = 'Tom'function sayHello(person: string) {return 'hello,' + person
}
let user = 'Tom'
let array = [1, 2, 3]
console.log(sayHello(user))function greet(person: string, date: Date): string {console.log(`hello,${person},today is ${date.toDateString()}`)let words = `hello,${person},today is ${date.toDateString()}`return words
}
greet('Tom', new Date())

any类型

可以随意赋值给any类型的变量。
还可以把any类型的变量当成方法调用。

let obj: any = { x: 0 }
obj.foo()
obj()
obj.bar = 0
obj = 'number'
const n: number = obj
let myName: string = 'Tom'

promise类型

下面返回的34不是普通的number类型,而是Promise类型的number

const geetNumber = async (): Promise<number> => {return 34//表示34不是普通的number类型,而是Promise类型的number
}

可选参数

可选参数未收到传参值时,是undefined,因此使用可选参数时,建议判断可选参数是否为undefined。

const printName = (person: { first: string; last?: string }): string => {//可选属性person.last可能为undefined,使用之前要判断是否为undefinedif (person.last !== undefined) {return person.first + person.last}return person.first + '先生/女生'
}
printName({ first: 'x', last: 'yy' })
printName({ first: 'x' })

联合类型 |

使用联合类型时,只能使用联合类型成员共有的方法。
比如toUpperCase()是string才有的方法,下面的联合类型由number和string构成,是不能使用toUpperCase()的。
解决办法:使用if else特判参数的类型。

//联合类型  |符号连接
function printId(id: number | string) {console.log('your id is' + id)
}
printId(111)
printId('111')
// printId({ id: 111 })error

使用type为类型取别名

type Point = {//需要使用等于号x: numbery: number
}
function printPoint(pt: Point) {console.log(pt.x, pt.y)
}

任意类型都可以使用type取别名。

接口定义类型

interface Point2 {//不要等于号,是一个对象x: numbery: number
}
function printPoint2(pt2: Point2) {console.log(pt2.x, pt2.y)
}

type和接口定义类型的区别

interface 的几乎所有功能都在 type 中可用,主要区别在于无法重新打开类型以添加​​新属性,而接口始终可扩展。
interface扩展接口 extends

interface Animal {name: string;
}
//bear是在extends了Animal基础上扩展了一个类型对象
interface Bear extends Animal {honey: boolean;
}
const bear = getBear();
bear.name;
bear.honey;

type扩展类型 &

type Animal = {name: string;
}
//bear是在Animal基础上再&一个类型对象进来
type Bear = Animal & { honey: boolean;
}
const bear = getBear();
bear.name;
bear.honey;

向现有接口添加字段

interface Window {title: string;
}
interface Window {ts: TypeScriptAPI;
}
const src = 'const a = "Hello World"';
window.ts.transpileModule(src, {});

类型创建后无法更改

type Window = {title: string;
}
type Window = {ts: TypeScriptAPI;
}// Error: Duplicate identifier 'Window'.

类型断言 as

假设你写了一条语句,TypeScript不一定知道那条语句返回什么,但你可能知道,你就能使用as断言那条语句返回值的类型。

const myDiv = document.getElementById('div') as HTMLDivElement

也可以使用尖括号语法(除非在.tsx文件中)

const myButton = <HTMLButtonElement>document.getElementById('btn')

因为类型断言在编译时被删除,所以没有与类型断言关联的运行时检查。如果类型断言错误,则不会产生异常或 null。
类型断言只能断言为更具体的或者更不具体的内容
而不能做可能的强制断言。在这里插入图片描述
有时,合理的转换也会因为这个规则被报错,这时,可以先将类型推断为any或unknown再推断为别的类型。

const x = 'hello' as any as number

字面类型:特定的字符串和数字

字面类型:在类型位置引用特定的字符串和数字。
let和var创建的变量都是可以更改的,但const创建的不能更改。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

争对const变量不能被赋值,但是又有几种可能情况时,我们就可以使用字面变量。

function setSize(size: 'large' | 'default' | 'small') {return size
}
function compare(a: string, b: string): -1 | 0 | 1 {return a === b ? 0 : a > b ? 1 : -1;
}

也可以与非字面量一起使用。

interface Options {width: number
}
function choose(op: Options | 'auto') {
}
choose({width:6})
choose("auto")
choose("autoWidth")//error

两种布尔字面类型:true和false,类型Boolean实质上就是这两种布尔字面类型联合起来的。

字面推断

下面这个对象中的counter自动被推断为number类型。
在这里插入图片描述
同理,在一个对象中,值为string的属性也会被推断为string。而string类型和字面类型的string是不一样的,直接将string类型参数赋值给字面类型的参数将会报错。
下面的代码中req.method是string类型,而handleRequest中第二个参数是字面类型。那样写会报错。

declare function handleRequest(url: string, method: 'GET' | 'POST'): void
const req = { url: 'https://example.com', method: 'GET' }
handleRequest(req.url, req.method)
//error,req.method是string类型,而handleRequest中第二个参数是字面类型。

在这里插入图片描述
解决这个问题有两个方法:
1、给传递过去的参数类型断言

const req = { url: 'https://example.com', method: 'GET' as 'GET' }

或者

handleRequest(req.url, req.method as 'GET')

2、用as const将整个对象参数转换为const类型
as const会为对象的所有属性分配字面类型。
在这里插入图片描述

null和undefined

JavaScript 有两个基础值用于表示值不存在或未初始化的值:null 和 undefined。

TypeScript 有两个对应的同名类型。这些类型的行为取决于你是否启用了 strictNullChecks 选项。
strictNullChecks关闭
可能是null或undefined的值可以正常访问,可以赋值给任何类型的属性。
strictNullChecks开启
建议在对该值使用方法或属性之前测试这些值。

function doSomething(x: string | null) {if (x === null) {// do nothing} else {console.log("Hello, " + x.toUpperCase());}
}

非空断言运算符 !

x的值可能为null,在调用x时,我们在其后方添加了一个!号断言他不为空,就可以使用number类型的方法toFixed(),这个做法可以跳过ts报错,但是可能会带来运行时错误。

function liveDangerously(x?: number | null) {// No errorconsole.log(x!.toFixed())
}

枚举

描述一个值,该值可能是一组可能的命名常量之一。

bigInt

const anotherHundred: bigint = 100n;

symbol

用来创建一个独一无二的值,可以用作对象的属性名,保证属性名的唯一性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/767469.shtml

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

相关文章

基于python+vue城市交通管理系统的设计与实现flask-django-php-nodejs

此系统设计主要采用的是python语言来进行开发&#xff0c;采用django/flask框架技术&#xff0c;框架分为三层&#xff0c;分别是控制层Controller&#xff0c;业务处理层Service&#xff0c;持久层dao&#xff0c;能够采用多层次管理开发&#xff0c;对于各个模块设计制作有一…

数学建模综合评价模型与决策方法

评价方法主要分为两类&#xff0c;其主要区别在确定权重的方法上 一类是主观赋权法&#xff0c;多次采取综合资讯评分确定权重&#xff0c;如综合指数法&#xff0c;模糊综合评判法&#xff0c;层次评判法&#xff0c;功效系数法等 另一类是客观赋权法&#xff0c;根据各指标…

力扣HOT100 - 15. 三数之和

解题思路&#xff1a; 排序 双指针 注意&#xff1a; 在nums[ k ]&#xff0c;nums[ i ]&#xff0c;nums[ j ]的值与自身重复时均会进行跳过&#xff0c;防止重复添加。 如代码中&#xff1a; 防止nums[ k ]重复&#xff1a;if(k>0&&nums[k]nums[k-1]) continue…

Web前端全栈HTML5通向大神之路

本套课程共三大阶段&#xff0c;六大部分&#xff0c;是WEB前端、混合开发与全栈开发必须要掌握的技能&#xff0c;从基础到实践&#xff0c;是从编程小白成长为全栈大神的最佳教程&#xff01; 链接&#xff1a;https://pan.baidu.com/s/1S_8DCORz0N2ZCdtJg0gHsw?pwdtjyv 提取…

Java进阶—GC回收(垃圾回收)

1. 什么是垃圾回收 垃圾回收(Garbage Collection&#xff0c;GC)是Java虚拟机(JVM)的一项重要功能&#xff0c;用于自动管理程序中不再使用的内存。在Java中&#xff0c;程序员不需要手动释放内存&#xff0c;因为GC会自动检测并回收不再使用的对象&#xff0c;从而减少内存泄…

力扣|两数相加|链表

给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。 请你将两个数相加&#xff0c;并以相同形式返回一个表示和的链表。 你可以假设除了数字 0 之外&#xff0c;这两个数都不会以 0 …

面试算法-98-随机链表的复制

题目 给你一个长度为 n 的链表&#xff0c;每个节点包含一个额外增加的随机指针 random &#xff0c;该指针可以指向链表中的任何节点或空节点。 构造这个链表的 深拷贝。 深拷贝应该正好由 n 个 全新 节点组成&#xff0c;其中每个新节点的值都设为其对应的原节点的值。新节…

Git的原理和使用(四)

目录 远程操作 理解分布式版本控制系统 远程仓库 新建远程仓库 克隆远程仓库 向远程仓库推送 拉取远程仓库 配置Git 忽略特殊文件 为命令配置别名 标签管理 理解标签 创建标签 操作标签 远程操作 理解分布式版本控制系统 1、每个人的电脑上都是一个完整的版本库…

网络行为管理系统招标模板

项目名称&#xff1a;网络行为管理系统招标 一、项目背景 随着信息技术的迅猛发展&#xff0c;网络安全和数据保护已成为企业和组织面临的关键挑战。为了确保网络环境的安全、合规&#xff0c;并实现对网络行为的有效管理和审计&#xff0c;我们特此启动网络行为管理系统的招…

AI程序员革命:探析Devin的登场与编程未来

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

基于python+vue超市货品信息管理系统flask-django-php-nodejs

在此基础上&#xff0c;结合现有超市货品信息管理体系的特点&#xff0c;运用新技术&#xff0c;构建了以 python为基础的超市货品信息管理信息化管理体系。首先&#xff0c;以需求为依据&#xff0c;根据需求分析结果进行了系统的设计&#xff0c;并将其划分为管理员和用户二种…

每日一练:LeeCode-498、对角线遍历【二维数组+边界判断】

给你一个大小为 m x n 的矩阵 mat &#xff0c;请以对角线遍历的顺序&#xff0c;用一个数组返回这个矩阵中的所有元素。 示例 1&#xff1a; 输入&#xff1a;mat [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a;[1,2,4,7,5,3,6,8,9] 示例 2&#xff1a; 输入&#xff1a;ma…

C语言分支和循环

目录 一.分支 一.if 二.if else 三.if else嵌套 四.else if 五.switch语句 二.循环 一.while (do while&#xff09;break : 二.for函数&#xff1a; 三.goto语句: 四.猜数字: 一.分支 一.if if要条件为真才执行为假不执行而且if只能执行后面第一条如果要执行多条就…

Ubuntu共享文件夹创建及访问 Windows 最简单的方法!

第一步&#xff1a;在Windows下随便建一个文件夹&#xff0c;这里我是在D盘建了一个文件夹叫share 第二步&#xff1a;安装VMware tools&#xff0c;这里就不细说了 第三步&#xff1a;vmware的上方选择 虚拟机-->设置 第四步&#xff1a; 在虚拟机设置里面选择 选项-…

EFcore的实体类配置

1 约定配置 约定大于配置&#xff0c;框架默认了许多实体类配置的规则&#xff0c;在约定规则不满足要求时&#xff0c;可以显示地定义规则 1 数据库表明在不指定的情况下&#xff0c;默认使用的是数据库上下文类【DBContext】中DbSet 的属性名&#xff1b; 2 数据库表列的名字…

19、【qlib】【其他组件/特性/主题】任务管理

简介 工作流部分介绍了如何松耦合地运行研究流程,但使用qrun时只能执行单个任务。为了自动地生成和执行不同的任务,任务管理模块提供了一整套流程,包括任务生成、任务存储、任务训练及任务收集。借助这个模块,用户可以在不同时间段、不同损失函数或甚至不同模型下自动运行…

摘录笔记——2024年3月22日

目录 一、背景 1.1 新人的选择困局 1.2 高人才密度环境下普通员工的成长效率困局 1.3 业务发展和个人成长的二元对立困局 1.4 中年打工人低费效比引发的职场生涯终结困局 二、人的本质 2.1 人的本质的定义 2.2 由“人的本质”引出的几个关键过程 2.2.1 认知指引实践&a…

IPV6协议之RIPNG

目录 前言&#xff1a; 一、RIPNG与RIP的区别 二、如何配置RIPNG 如何解决RIPNG环路问题呢&#xff1f; 控制RIPNG的选路 1、修改RIPNG默认优先级 2.配置接口附加开销值从而干涉RIPNG的选路 RIPNG拓展配置 1.RIPNG的认证 配置RIPNG进程下的IPsec认证&#xff1a; 配…

C++默认构造函数(二)

目录 构造函数补充 构造函数初始化列表的使用 赋值运算符重载函数 运算符重载函数介绍 运算符重载函数的使用 赋值运算符重载函数 赋值运算符重载函数的使用 拷贝构造函数和赋值运算符重载函数 重载前置和后置 前置 后置 重载流插入<<与流提取>> 流插…

Navicat 干货 | 探索 PostgreSQL 的外部数据包装器和统计函数

PostgreSQL 因其稳定性和可扩展性而广受青睐&#xff0c;为开发人员和数据管理员提供了许多有用的函数。在这些函数中&#xff0c;file_fdw_handler、file_fdw_validator、pg_stat_statements、pg_stat_statements_info 以及 pg_stat_statements_reset 是其中的重要函数&#x…