TS的类型声明

news2025/7/10 3:51:13

目录

1.TS把JS变成了静态类型的语言,可以给变量指定类型

 2.JS中的函数是不考虑参数的类型和个数的,但是TS会考虑函数的参数类型和个数,且要规定返回值类型。

3.常见的TS类型

1.可以直接使用字面量进行类型声明 

字面量声明的应用:可以使用 | 来连接多个类型(联合类型)

 & 表示同时满足

2.any类型(不建议使用)

表示的是任意类型,一个变量设置类型为any后相对于对该变量关闭了TS的类型检测。

使用TS时,不建议使用any类型

​编辑

3.unknown类型

4.void   虽然说void 用来表示空,以函数为例,就表示没有返回值的函数。但是会默认返回一个 undefined

5.never 也表示空,但真的就是啥都不返回

6.object 对象类型(不推荐写)   推荐这样写:let a :{name:string}; 要指定对象里面的属性

对象的可选属性(重要)

7.array  实际开发中希望数组里面存的都是同一类型的数据

8.tuple 元组,就是固定长度的数组

 解构赋值配合元组的使用 

 9.enum 枚举 

4.类型的别名

5.类型定义的注意点


注意点:

//类型推论,a没有设定类型,在初始化之后,系统会为之设定一个类型,这个过程就是类型推论。

let a = 200;  //等价于 let a:number = 20;

非严格模式下:

//undefined  类型可以赋值给 void 类型undefined类型的数据只有一个值就是undefined

//null 类型可以赋值给void类型 null类型的数据只有一个值就是null

//但是 null类型 和 undefined类型不能相互赋值。

1.TS把JS变成了静态类型的语言,可以给变量指定类型

 注意点1:这里就算报错,编译时也会生成一个对应的js文件,因为给a赋值字符串是符合js语法的,是可以编译的,这样可以让初学ts的更容易上手。

注意点2编译后产生的js文件中会出现 var 这些,是因为TS可以把代码编译成任意版本的JS代码 

注意点3:变量先声明,再赋值  和 声明后直接赋值的区别

变量先声明,再赋值,必须要写类型。

先声明直接赋值可以不用写类型,但是后面再给变量赋值必须是同一类型。 

 2.JS中的函数是不考虑参数的类型和个数的,但是TS会考虑函数的参数类型和个数,且要规定返回值类型。

 

 传入的参数类型和个数和函数接受的参数类型和个数一一对应,且返回值类型也要规定。

如果不写返回值类型,会自动检测 return 返回得结果:

如果函数没有写返回值:此时函数返回值类型为void (默认返回值undefined)

 

所以:如果函数没有返回值,就可以 写 void :用来表示空,表示没有返回值

function fn():void{
    console.log(11111);
}

3.常见的TS类型

1.可以直接使用字面量进行类型声明 

字面量声明的应用:可以使用 | 来连接多个类型(联合类型)

//可以直接使用字面量进行类型声明
let a: 10;    //这样的含义就是 a 只能为10 不能为其它值
a = 10;

//可以使用 | 来连接多个类型(联合类型)
let b: 'male' | 'female';  //值只在几个范围之内
b = 'male';
b = 'female';

let c:boolean | string;    //值之在几个类型之类
c = true;
c = 'hello';

 & 表示同时满足

let n:{name:string} & {age:number};

n = {name:'天空',age:22}

2.any类型(不建议使用)

表示的是任意类型,一个变量设置类型为any后相对于对该变量关闭了TS的类型检测。

使用TS时,不建议使用any类型

声明变量如果不指定类型,则TS解析器会自动判断变量的类型为any(隐私的any) 

 注意点:any类型的变量值可以赋值给任意变量 ,且不会报错,这也是不建议用any的原因。

3.unknown类型

与any类型类似,区别在于any类型可以赋值给任意变量 ,且不会报错,但是unknown类型赋值给非unknown类型变量时会报错。

 unknown 实际上就是一个类型安全的any

unknown 类型的变量,不能直接赋值给其它变量,如果需要赋值给其它类型变量,可以像下面这样操作:

操作1:

 操作2:类型断言:可以用来告诉解析器变量的实际类型

语法:

        变量   as  类型

        或者:

        <类型>变量

 总结:遇到一个类型不确定的变量时,能用 unknown 时,尽量用 unknown,最好不用 any。

4.void   虽然说void 用来表示空,以函数为例,就表示没有返回值的函数。但是会默认返回一个 undefined

 虽然说void 用来表示空,以函数为例,就表示没有返回值的函数。但是会默认返回一个 undefined

function fn():void{
    console.log(11111);
}

5.never 也表示空,但真的就是啥都不返回

 never 也表示空,但真的就是啥都不返回,undefined也不返回。也就是报错的时候,函数才啥都不返回

//never :表示永远不会返回结果
function fn2():never{
    throw new Error('报错了');
}

6.object 对象类型(不推荐写)   推荐这样写:let a :{name:string}; 要指定对象里面的属性

let a :object;
a = {};
a = function(){};
a = [1,2,34];

因为js中,一切皆对象,所以object开发时运用的比较少。

所以一般指定一个对象的话,要指定对象里面包含什么属性:

语法:

        { } 用来指定对象中可以包含哪些属性

        语法:{属性名:属性值类型,属性名:属性值类型}

let m :{name:string};
m = {name:'花花'};

对象的可选属性(重要)

1.限制某一个属性 :如下 age? 只能是age属性选与不选

在属性名后面加上一个? 表示属性是可选的。

 注意点:如果不确定该属性是否有,可以这样:

 这表示:如果后面需要用到该属性就写,不需要用,不写也不会报错

2.任意属性名都可以是选与不选  [propName:string]:any   定义对象的类型属性

//表示任意类型的属性 [propName:string]:any}
let m :{name:string,[propName:string]:any}; //表示对象里面有一个name属性,其它属性有啥不用管

m = {name:'花花',bir:'2000-07'};

m = {name:'天空',age:22}

 3.定义函数的类型属性

设置函数结构的类型声明:

        语法:(形参:类型,形参:类型 。。。)=>返回值

let q:(a:number,b:number)=>number; //表示函数有2个参数,参数类型都是number,返回值是number类型

q = function(n1:number,n2:number):number{
    return n1 + n1;
}

7.array  实际开发中希望数组里面存的都是同一类型的数据

语法:

        1. let  f :number[ ] = [ ];    //表示一个数组,其中数据都是number类型的

        2. let  f :Array<number> = [ ];  //表示一个数组,其中数据都是number类型的

        eg:如果想数组里面啥类型数据都可以取

                let f :Array<any>;

let arr:Array<any> = [1,'hello',true];

分析:其中: let arr:string[]; 表示:arr是一个数组,且里面存的数据,都是字符串类型的。

8.tuple 元组,就是固定长度的数组

语法:

        [类型,类型,类型]

let h:[string,number];
h = ['hell0',1233];
//1.默认值
let tom: [string, number] = ['Tom', 25];
//2.通过下标赋值
let tom: [string, number] = ['', 0];
tom[0] = 'Tom';
tom[1] = 25;
//通过下标获取元组的元素并进行对应的操作
tom[0].slice(1);
tom[1].toFixed(2);
//3.越界操作
let tom: [string, number];
tom = ['Tom', 25];
tom.push('male');
tom.push(true);//报错,当添加越界的元素时,它的类型会被限制为元组中每个类型的联合类型

//解构赋值
const lilei: [string, number] = ["Lilei", 23];
console.log(lilei);         //[ 'Lilei', 23 ]
const [myname, myage]: [string, number] = lilei;
console.log(myname, myage); //Lilei 23

 解构赋值配合元组的使用 

 9.enum 枚举 

 把所有的可能情况一一列出来。

枚举类型用于取值被限定在一定范围内的场景,比如一周只能有七天,颜色限定为红绿蓝等。 结果在多个值之间进行选择的时候适合用枚举。

//定义一个枚举类
enum Gender{         //性别  
    Male = 0,
    Female = 1
}
//定义一个对象,它的gender属性值是一个枚举
let i:{name:string,gender:Gender}
i = {
    name:'天空',
    gender:Gender.Male
}
console.log(i.gender === Gender.Male);//将ts文件编译后引入html文件中,在浏览器中打开
//结果为true

注意点1: 枚举成员默认会被赋值为从 0 开始递增的数字

 注意点2:可以手动的指定成员的数值

4.类型的别名

type myType = string;
//给类型取一个别名
type myType = string;
let m:myType = 'hell0';
//作用:如果一个数据的类型太长,可以用别名代替
type myType1 = 1|2|3|4|5;
let n:1|2|3|4|5 = 5;
let q:myType1 = 5;   //这种就显得很简洁

 

5.类型定义的注意点

类型不一定非得是 number,string,等这些关键字,可以是其它,但是要对应得上 

let n:1|2|3|4|5 = 5;
let n:'hello' = 'hello';

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

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

相关文章

讲解HTML和CSS(超详细)

讲解HTML和CSS&#xff08;超详细&#xff09;一、初始HTML和CSS1.html的发展历史2.html3.css二、HTML1.基本框架2.HTML5常用的标签和属性三、CSS1.css的使用2.css选择器总结提示&#xff1a;以下是我的一些经验之谈&#xff0c;下面案例可供参考 一、初始HTML和CSS 1.html的…

手撕前端面试题【javascript~ 总成绩排名、子字符串频次统计、继承、判断斐波那契数组等】

前端JavaScript面试题&#x1f353;&#x1f353;总成绩排名&#x1f353;&#x1f353;子字符串频次&#x1f353;&#x1f353;继承&#x1f353;&#x1f353;判断斐波那契数组&#x1f353;&#x1f353;js中哪些操作会造成内存泄漏?html页面的骨架&#xff0c;相当于人的…

Vue中的过滤器(filter)

一、Vue中的过滤器是什么 过滤器&#xff08;filter&#xff09;是输送介质管道上不可缺少的一种装置,大白话&#xff0c;就是把一些不必要的东西过滤掉,过滤器实质不改变原始数据&#xff0c;只是对数据进行加工处理后返回过滤后的数据再进行调用处理&#xff0c;我们也可以理…

Java利用fastjson解析复杂嵌套json字符串、json数组;json字符串转Java对象,json数组转list数组

文章目录前言一、什么是JSON对象&#xff1f;二、什么是json字符串&#xff1f;二、什么是JSON数组&#xff1f;三、复杂、嵌套的json字符串四、json字符串转换4.1 简单json字符串转换为java对象4.2 简单json字符串数组转换为list数组4.3 复杂嵌套json字符串数组转换为Java对象…

十大常用web前端UI组件库,赶紧收藏

今天主要介绍web前端常用的UI库&#xff0c;这些网站基本都是背靠互联网大厂&#xff0c;值得web前端开发者收藏&#xff0c;当然还是要多多学习使用。 Vant 一款有赞出品轻量、可靠的的移动UI组件库&#xff0c;目前支持 Vue2、Vue3、React&#xff0c;微信和支付宝小程序&a…

Vue基础语法知识(自用,完整版)

Vue基础语法知识 1、想让Vue工作&#xff0c;就必须创建一个Vue实例&#xff0c;且要传入一个配置对象 2、root容器里的代码依然符合html规范&#xff0c;只不过混入了一些特殊的Vue语法 3、root容器中里的代码被称为【Vue模板】 4、Vue实例和容器是一一对应的 5、真实开发…

手机+PC电脑如何使用油猴插件和油猴脚本?

一、移动端使用油猴脚本 移动端可以不使用油猴插件&#xff0c;就可直接安装脚本&#xff08;需要浏览器支持&#xff09;&#xff0c;这样天然支持油猴脚本的移动浏览器还是很多&#xff0c;比如&#xff1a;书签地球、X浏览去、M浏览器等&#xff0c;但是各个浏览器的支持情…

前端Vue项目部署到服务器过程,以及踩坑记录

目录 需求 过程 踩坑 nginx服务器404错误的原因 404 Not Found nginx服务器500错误的原因 500 Internal Server Error nginx反向代理 需求 前后端完成项目后&#xff0c;需要部署到本地的服务器上。 第一次部署&#xff0c;以下是从0开始慢慢学着弄的详细过程 过程 …

大白话理解-微信小程序获取授权

学习目录 微信小程序前端直接获取授权微信为什么要授权微信怎么授权?微信登录微信小程序前端直接获取授权 微信为什么要授权 微信用户授权,才可以操作微信官方的某些接口。简单来说就是:微信定义了很多接口,然后他们认为有一部分是涉及到用户使用安全的,所以把这一部分划…

Python 爬虫案例

一、用cookie池模拟登录 在网络请求交互中&#xff0c;为了维持用户的登录状态&#xff0c;引入了cookie的概念。当用户第一次登录某个网站时&#xff0c;网站服务器会返回维持登录状态需要用到的信息&#xff0c;这些信息就称为cookie。浏览器会将cookie信息保存在本地计算机…

微信小程序(分包)

文章目录分包概念作用分包后的项目构成分包的加载规则分包的体积限制配置方法小程序打包原则引用原则独立分包分包预下载分包 概念 分包指的是把一个完整的小程序项目&#xff0c;按照需求划分为不同的子包&#xff0c;在构建时打包成不同的分包&#xff0c;用户在使用时按需…

解决报错:Uncaught TypeError: Cannot read properties of undefined (reading ‘install‘)

在做vue2项目时出现如下错误&#xff0c;页面空白且控制台出现如下错误&#xff1a; 报错内容&#xff1a; Uncaught TypeError: Cannot read properties of undefined (reading install) at Vue.use (vue.runtime.esm.js?c320:5709:1) at eval (index.js?5aa4:7:1…

Http请求-hutool工具类的使用

Http请求-hutool工具类的使用 前言 在日常java后端开发的工作中经常会遇到后端发起HTTP请求的情况&#xff0c;这里可以使用一个简单的工具类。 官方网址&#xff1a;Http请求-HttpRequest (hutool.cn) 介绍 本质上&#xff0c;HttpUtil中的get和post工具方法都是HttpRequ…

【小程序从0到1】首页布局案例的实现

欢迎来到我的博客 &#x1f4d4;博主是一名大学在读本科生&#xff0c;主要学习方向是前端。 &#x1f36d;目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 &#x1f6e0;目前正在学习的是&#x1f525;React/小程序React/小程序React/小程序&am…

let、const和var的区别(涉及块级作用域)

let 、const和var的区别 let、const、var在js中都是用于声明变量的&#xff0c;在没有进行ES6的学习前&#xff0c;我基本只会使用到var关键字进行变量的声明&#xff0c;但在了解了ES6之后就涉及到了块级作用域以及let&#xff0c;const了。 let与const let是用于替代var来…

Java实现本地缓存、分布式缓存及多级缓存

以下均为自己参考其它博主文章或自己理解整理而成&#xff0c;如有错误之处&#xff0c;欢迎在评论区批评指正&#xff01; 0. 缓存简介 像MySql等传统的关系型数据库已经不能适用于所有的业务场景&#xff0c;比如电商系统的秒杀场景&#xff0c;APP首页的访问流量高峰场景&a…

火爆全网的人工智能真的有那么强嘛?

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是阿牛&#xff0c;全栈领域优质创作者。&#x1f61c;&#x1f4dd; 个人主页&#xff1a;馆主阿牛&#x1f525;&#x1f389; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4d…

Element-UI中的表单验证

Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。   Element为vue-cli 准备了相应的 Element 插件&#xff0c;开发者可以用它们快速地搭建一个基于 Element 的项目&#xff0c;不仅能够快速体验交互细节&#xff0c;还可以使用前端框架封装的代…

Spring AOP 切面增强

背景背景&#xff1a;我们在开发过程中&#xff0c;经常需要做些周边功能&#xff1a; 性能统计、日志、事物管理。我们需要考虑如何解耦这些周边功能开发和核心业务开发区分开达到提升代码质量目的。定义在AOP思想里面定义周边功能定义是&#xff08;性能统计、日志、事务管理…

两种方案解决ERROR in Conflict: Multiple assets emit different content to the same filename index.html 的问题

Ⅰ、所遇问题简述&#xff1a; 1、问题描述&#xff1a; 在用 vue-cli 正常来创建新的基于 vue2 框架 的项目&#xff0c;在安装好 node-modules 之后&#xff0c;运行命令 ‘npm run serve’ ,报错情况如下&#xff1a; ERROR in Conflict: Multiple assets emit different…