TypeScript数据类型限定(基本数据类型,void,数组,元组,枚举,any,unknown,never,函数,自定义数据类型,联合类型和交叉类型)

news2024/10/16 18:21:18

一、安装解析ts的工具包

node.js只认识js代码,不认识ts代码。

需要将ts代码转化为js,然后就可以在node.js中运行了。

安装步骤:打开终端,输入命令npm i -g typescript回车

typescript是用来解析ts的工具包。提供了tsc命令,实现了ts-js的转化。

二、ts的使用

1.使用步骤

        1.创建ts文件

        2.写代码

        3.执行代码

        在当前目录打开终端,输入命令tsc hello.ts,会生成一个hello.js文件

        执行js代码:输入命令node hello.js

2.简化执行ts的步骤

每次修改代码后,都要重复执行两个命令才能执行ts代码。

简化方式:使用ts-node包,安装命令:npm i -g ts-node

        ts-node包内部将ts--js,然后执行js代码。

        ts-node包提供了命令ts-node,用来执行ts代码。

3.使用ts-node时遇到的的问题

ts-node : 无法将“ts-node”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括 路径,请确保路径正确,然后再试一次。

解决办法:配置环境变量

Warning: To load an ES module, set "type": "module" in the package.json or us
e the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
export {};
^^^^^^

SyntaxError: Unexpected token 'export'

解决办法:在ts文件内部最后一行加上export{};

4.优化编译(可以不用)

tsc --init命令  解决ts和js冲突问题,生成tsconfig.json文件
tsc --watch  自动编译
tsc --noEmitOnError --watch命令 在出现错误的时候不编译成js文件,直到问题解决

三、变量和数据类型

1.变量

        存储数据的容器,并且是可以变化的。

2.变量的使用

        声明变量并指定类型,给变量赋值。

3.类型注解

        是为变量添加类型约束的方式。:数据类型

4.变量的命名规范

        变量名称只能出现数字、字母、下划线_,美元$,并且不能以数字开头。

        变量名称区分大小写。

        变量名称要有意义,顾名思义。

        使用驼峰命名法。

5.TS的数据类型

ts支持js的所有数据类型,同时还增加了额外的数据类型:any、unknown、void、函数、类、接口枚举

a.基本数据类型

        number:用于表示数字,包括整数和浮点数。

        string:用于表示文本字符串。

        boolean:用于表示真(true)或假(false)。

        null:表示空值或无效值。

        undefined:表示未定义的值,变量声明后未赋值时默认为 undefined

        void:用于表示没有任何类型,通常用于函数没有返回值的情况。

//1.布尔值:最基本的数据类型就是boolean的true/false值,
let  isDone:boolean=false;

//2.数字:支持十进制和十六进制二进制八进制
let decLiteral:number=6;
let hexLiteral:number=0xf00d;
let binaryLiteral:number=0o744;
//3.字符串:可以使用模板字符串并以${}的形式嵌入表达式
let name1:string="bob";
name1="smith";
let name2:string="gene";
let age:number=37;
let sentence1:string=`hello,my name is ${name2},I will be ${age+1} years old next month`
let sentence2:string="hello,my name is"+name2+".\n\n"+"i will be"+(age+1)+"years old next month."

let n: null = null;
let u: undefined= undefined;
function logMessage(message: string): void {
    console.log(message);
}
export{}
 b.复杂数据类型 (数组,元组,枚举)

  array:数组类型,可以存储同种类型的多个值。可以使用 T[]Array<T> 表示数组类型。

        tuple:元组类型,允许存储不同类型的值,固定长度。

        enum:枚举类型,定义一组命名常量。

//1.数组:可以在元素类型后面接上[],表示由数字类型元素组成的一个数组
let list1:number[]=[1,2,3];
let list2:Array<number>=[1,2,3]

//2.enum枚举:可以为一组数值赋予名字,枚举表示的是一个命名元素的集合值
enum user{zhangsan,lisi,wangwu};
console.log(user.zhangsan, user.lisi, user.wangwu)//默认情况下数据的值从0 开始,0,1,2
enum user1{zhangsan,lisi=99,wangwu }
console.log(user1.zhangsan, user1.lisi, user1.wangwu);//0,99,100
enum user2{zhangsan,lisi="李四",wangwu="王五"}
console.log(user2.zhangsan, user2.lisi, user2.wangwu);//0 李四 王五


//3.tuple元组:用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同
let x:[string,number];
x=["hello",10]
let person: [string, number] = ["Alice", 30];
export{}
c. 特殊数据类型(any,unknown,never)

        any:表示任意类型,禁用类型检查,适用于不确定类型的值。

        unknown:与 any 类似,但更安全,必须在使用前进行类型检查。

        never:表示永远不会有值的类型,通常用于函数抛出异常或无限循环的情况。

//1.any所有类型,任何类型,
let notSure:any=4;
notSure="maybe a string instead";
notSure=false;
//有一个数组,包含了不同类型的数据
let list3:any[]=[1,true,"free"];
list3[1]=100;


//2.unknown 未知类型,没有类型
const n:number=1;
const n1:any=n;
const n2:unknown=n;
//any和unknown类型的区别:变量n1具有any类型,表示n1可以是任何类型,可以对n1做任何操作,即使是n1是number类型,n1.push的调用依然不会报错,这样会失去typescript带来的类型安全性,不推荐使用any,
//而n2具有unknown类型,它表示n2是未知类型(没有类型)所以n2不支持任何操作,所以在某些场合,使用unknown,可以限制某些变量的行为,使编码更加谨慎


//3never:表示永远不会有值的类型,通常用于函数抛出异常或无限循环的情况。
function throwError(message: string): never {
    throw new Error(message);
}
export{}
d. 自定义数据类型(interface,type)

        object:表示非原始类型的对象。可以是任何类型的对象(不包括原始类型如 number, string, boolean 等)。

        接口(interface:用于定义对象的结构。

        类型别名(type:用于为类型定义一个新名称。

//自定义类型
let obj: object = { name: "Alice", age: 30 };


//1、接口interface 接口名{键:类型}

//自定义函数类型
interface IPerson{
    name:string;
    readonly sex:string|number;
    age?:number;
    eat:(food:string)=>void
}
//定义函数变量,并给函数赋值
let p01:IPerson={
    name:"张三",
    sex:"男",
    eat:function(food:string):void{
        console.log("吃"+food);      
    }
}
p01.name="张小三",
p01.age=12;
p01.eat("油条");
console.log("p01",p01);

//1.2、接口的继承:extends
interface IPerson1{
    name:string,
    age:number
}
interface Iprogrammer extends IPerson1{
    language:string
}
let p02:Iprogrammer={
    language:"js",
    name:"李四",
    age:12
}
console.log("p02",p02);

//简单模拟createRouter()函数的参数的类型
//路由配置
interface IRoute{
    path:string,
    name?:string,
    component:()=>string
}
//创建路由对象
interface IRouterOptions{
    history:()=>string,
    routes:IRoute[]
}

//2、type
//interface只能定义对象类型,而type声明可以声明任何类型,包括基础类型,联合类型
type TPerson={
    name:string,
    readonly sex:string|number,
    age?:number,
    eat:(food:string)=>void
}

let p03: TPerson
p03={
    name:"张小三",
    sex:"女",
    age:12,
    eat:function(){}
}

type MyType=string|number|TPerson;
let temp:MyType;
type TAge=number;
let age1:TAge=12;
console.log("p03",p03);
export{}
e. 联合类型和交叉类型 
//交叉类型:将多个类型合并为一个类型
type IPerson2={
    name:string,
    age:number
}
type Iprogrammer2={
    language:string
}
type IMy=IPerson2&Iprogrammer2
let p2:IMy={
    language:"js",
    name:"张三",
    age:12
}
console.log("p2",p2);

//联合类型:一个变量的取值可以是多种类型
let temp2:string|number
temp=12;
temp="hi";
export{}
6. 函数的类型限定
//函数:对函数的限定,能够限定形参的类型,返回值的类型(限定输入和输出)形参:输入;返回值:输出

//一、声明式function 函数名(参数:类型):返回类型 {函数体}
function sum (x:number,y:number):number{
    return 123;
}

//二、表达式
//1、定义和赋值分开,定义一个变量,变量是函数
//1.1.let 变量:输入类型=>输出类型
let show:(m:number,n:string,a?:string)=>number;
//1.2.给变量赋值(相当于定义函数)
show=function(t:number,s:string){
    return t;
};
//1.3.调用函数
let b=show(12,"23","12")


//2定义的同时赋值 let 变量:输入类型=>输出类型=function(参数){}
let show1:(a:number,b:string)=>number=function(a,b){
    return a;
}

//三、接口定义函数类型
//1.自定义函数类型
interface Func{(a:number,b:string):boolean};
//定义函数变量,限定类型为Func,并且给函数赋值
let show2:Func=function(a:number,b:string){
    return true;
}
//调用函数
show2(12,"hi")

function fn():void{
    //void类型修饰函数返回值时,表示函数不能有任何返回值return 
}

//四、可选参数
//函数表达式,定义的同时赋值, let 变量:输入类型=>输出类型=function(参数){},可选参数必须写在参数列表的最后
let show3:(a:number,b:string,c?:string)=>number=function(a,d){
    return a
}

//五、参数默认值
function fn1(a:number,b:number=2):void{
    console.log(a,b);
}
fn1(12,23);
fn1(12);


//六、剩余参数(弹性参数)得到的值是数组

// function fn2(a:number,...b):void{
//     console.log(a,b);
// }
// fn2(12,23,34,45)


export{}

四、类型断言

类型断言是告诉编译器某个值的确切类型。在某些情况下,TypeScript可能无法推断出变量的类型,或者你知道某个值的类型与编译器推断的不一样。类型断言不会影响运行时行为,它仅在编译时起作用。类型断言可以用两种方式表示:

1.使用尖括号语法
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
2.使用 as 语法
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

类型断言的注意点:类型断言不做类型转换;自定义类型也可以用来做断言;权重最低

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

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

相关文章

Python 如何处理大规模数据库表的迁移与数据迁移的高效执行

Python 如何处理大规模数据库表的迁移与数据迁移的高效执行 引言 在现代应用开发中&#xff0c;随着业务需求的增长&#xff0c;数据库表结构和数据往往需要进行迁移和更新。迁移&#xff08;Migration&#xff09;是指对数据库表的结构、数据类型、索引、约束等进行修改或更新…

<Linux> 线程安全

目录 文章目录 一、Linux线程互斥 1. 进程线程间的互斥相关背景概念 2. 互斥量mutex 3. 互斥量接口 初始化互斥量 动静态分配 销毁互斥量 互斥量加锁 互斥量解锁 4. 互斥量实现原理 5. 简单封装互斥量 二、可重入与线程安全 1. 概念 1.1 可重入 1.2 线程安全 2. 常见的线程不…

记录Centos7 漫漫配置路

记录Centos7 漫漫配置路 一、 配置源二、 clinfo三、 PCL 配置1. 依赖2. eigen3. boost4. flann5. pcl 四、YAML-CPP五、 miniconda 安装 python3.6 和 pytorch六、libbot 配置1. 容易安装的依赖2. 需要源码安装的依赖3. [libbot](https://github.com/libbot2/libbot2) 简单地说…

幂律分布笔记

一、幂律分布的数据拟合 数据分箱&#xff1a; 所谓分箱就是对原始数据进行分组&#xff0c;然后对每一组内的数据进行平滑处理。常见的分箱方式主要有等深分箱、等宽分箱、用户自定义等 对数分箱&#xff1a; 对原数据进行分箱&#xff0c;第i个箱的宽度为bi&#xff0c;b…

【jQuery】jQuery基本操作(样式操作 内容操作 节点操作 属性操作 节点遍历)

文章目录 1、样式操作2、内容操作2-1 html()2-2 text()2-3 val() 3、节点操作3-1 创建3-2 插入3-3 删除3-4 替换3-5 复制 4、属性操作5、节点遍历6、DOM操作 DOM 操作分为三类&#xff1a; ​ DOM Core&#xff1a;任何一种支持DOM的编程语言都可以使用它&#xff0c;如getElem…

Go语言中的时间比较与时区处理

文章目录 问题背景问题分析验证时区问题 解决方案方法 1&#xff1a;使用本地时区解析时间方法 2&#xff1a;将 time.Now() 转换为 UTC 最终结果总结 在后端开发中&#xff0c;时间处理往往是不可避免的&#xff0c;尤其是涉及到跨时区的应用时&#xff0c;时区问题常常会引发…

基于yolov5的手机屏幕缺陷检测系统,支持图像、视频和摄像实时检测【pytorch框架、python源码】

更多目标检测和图像分类识别项目可看我主页其他文章 功能演示&#xff1a; yolov5&#xff0c;手机屏幕缺陷检测系统&#xff0c;支持图像、视频和摄像实时检测【pytorch框架、python源码】_哔哩哔哩_bilibili &#xff08;一&#xff09;简介 基于 YOLOv5 的手机屏幕缺陷检…

创建PV时报错:任务清单存在生产版本的不一致

创建PV时报错&#xff1a;任务清单存在生产版本的不一致。 输入的批量不一致。 批量改为一致99&#xff0c;999&#xff0c;999.000后&#xff0c;报错解决。

Window入侵排查思路-应急响应实战笔记

0x00 前言 当企业发生黑客入侵、系统崩溃或其它影响业务正常运行的安全事件时&#xff0c;急需第一时间进行处理&#xff0c;使企业的网络信息系 统在最短时间内恢复正常工作&#xff0c;进一步查找入侵来源&#xff0c;还原入侵事故过程&#xff0c;同时给出解决方案与防范措…

对接优惠折扣影票接口有什么好处?

对接电影票接口可以为开发者、商家和用户提供多种好处&#xff0c;以下是一些主要优势&#xff1a; 便捷性&#xff1a;用户可以直接在应用程序或网站上查询电影信息、选择座位和购票&#xff0c;无需离开平台即可完成整个购票流程。 提高用户粘性&#xff1a;为用户提供一站式…

无锁队列实现(Michael Scott),伪代码与c++实现

一、Michael & Scoot 原版伪代码实现 structure pointer_t {ptr: pointer to node_t, count: unsigned integer}structure node_t {value: data type, next: pointer_t}structure queue_t {Head: pointer_t, Tail: pointer_t}initialize(Q: pointer to queue_t)node new_…

薪资管理系统原型PC端+移动端 Axure原型 交互设计 Axure实战项目

薪资管理系统原型PC端移动端 Salary Management System Prototype 薪资管理系统原型图是一种以图形化方式展示系统界面和功能交互的设计图形。该原型图旨在呈现薪资管理系统的整体架构、界面布局和用户交互流程&#xff0c;为开发团队和利益相关者提供一个清晰而具体的概念。…

CSS 实战录: 双栏、四等分、不等间距、自适应...

引言 一个当初困扰我许久的设计稿还原问题, 故在此做个简单记录!! 设计稿布局大概如下图所示 整体分为左右两部分同时划分了模块 A B C DA B C 之间的间距为 24px, C D 之间的间距为 64px整体宽度 100% 自适应铺满, 并且 A B C D 宽度保持一致 那么问题来了, 假设给出下面 DO…

Python | Leetcode Python题解之第473题火柴拼正方形

题目&#xff1a; 题解&#xff1a; class Solution:def makesquare(self, matchsticks: List[int]) -> bool:totalLen sum(matchsticks)if totalLen % 4:return FalsetLen totalLen // 4dp [-1] * (1 << len(matchsticks))dp[0] 0for s in range(1, len(dp)):fo…

【市场解读】传统到端到端的智驾分水岭已至

参考文献&#xff1a;平安证券《汽车行业深度报告&#xff1a;智驾分水岭已至》 关键词学习 端到端智驾系统end to end “端到端”智驾是一种新的智能驾驶技术&#xff0c;不再依赖于传统的感知原件&#xff0c;而是通过算法、AI、模型架构数据迭代来实现自主学习和思考能力…

MySQL数据库从入门到精通 第1讲 基本概念

MySQL数据库从入门到精通 第1讲 基本概念 小可爱们&#xff0c;接下来我们要学习的知识是数据库相关的知识&#xff0c;从本贴开始&#xff0c;从0基础带大家入门到精通&#xff0c;要加油哦~ 1 前言 1.1 为什么要学习数据库&#xff1f; 那我们首先要搞清楚第一个问题&…

深入了解EasyNVR及EasyNVS,EasyNVR连接到EasyNVS当显示授权超时如何解决?又因为什么原因?

我们先来了解NVR批量管理软件/平台EasyNVR&#xff0c;它深耕市场多年&#xff0c;为用户提供多种协议&#xff0c;兼容多种厂商设备&#xff0c;包括但不限于支持海康&#xff0c;大华&#xff0c;宇视&#xff0c;萤石&#xff0c;天地伟业&#xff0c;华为设备。 NVR录像机…

华为FreeBuds 6i戴久了会耳朵胀痛吗?该怎么办?

华为FreeBuds 6i戴久了&#xff0c;会有耳朵胀痛的感觉吗&#xff1f;其实可能是没选对适合自己的耳塞&#xff0c;给你们分享几个佩戴更舒服的方法&#xff0c;一起来看看~ 首先和大家说说为什么华为FreeBuds 6i戴久了不舒服&#xff0c;一方面是耳塞尺寸不合适&#xff0c;另…

Visual Studio 2022 配置 Boost 库

一、使用预编译版本 尽量不要使用预编译版本&#xff0c;因为可能构建的不完全&#xff0c;还得重新构建&#xff0c;不如一步到位 1. 下载预编译的 Boost 库 下载&#xff1a;Boost C Libraries - Browse /boost-binaries at SourceForge.net 2. 选择 msvc 版本&#xff0…

如何将一张图片分成四份,四宫格?图片分割的8种简单方法

如何将一张图片分成四份&#xff0c;四宫格&#xff1f;在日常的图像处理任务中&#xff0c;我们时常会遇到各种特殊的需求。今天&#xff0c;我就遇到了一项颇具挑战性的任务——在特殊情况下&#xff0c;需要将一张图片精确地分成四份&#xff0c;形成一个标准的四宫格。这项…