【ts的常用类型】
创始人
2024-05-27 05:03:45
0

ts的常用类型

  • 前言
  • 安装
  • ts常见类型
    • 原始类型 、数组、 any
    • 变量上的类型注解
    • 函数
    • 对象类型
    • 联合类型
    • 类型别名
    • 接口
      • 接口和类型别名的对比


前言

typescript中为了使编写的代码更规范,更有利于维护,增加了类型校验,

安装

安装 typescript
npm i typescript -g
运行
tsc hello.ts

ts常见类型

原始类型 、数组、 any

类型举例描述
string“Hello word”表示字符串
number42所有的数字,类型都是 number
booleantrue 和 false布尔值
Array①var arr:number[]=[11,22,33] ② var arr:Array=[11,22,33];数组
anylet obj: any = { x: 0 };当你不希望一个值导致类型检查错误的时候,就可以设置为 any

变量上的类型注解

当你使用 const、var 或 let 声明一个变量时,你可以选择性的添加一个类型注解,显式指定变量的类型

let myName: string = "Alice";

函数

参数类型注解(Parameter Type Annotations)

当你声明一个函数的时候,你可以在每个参数后面添加一个类型注解,声明函数可以接受什么类型的参数。参数类型注解跟在参数名字后面:

function greet(name: string) {console.log("Hello, " + name.toUpperCase() + "!!");//当参数有了类型注解的时候,TypeScript 便会检查函数的实参:
}

对象类型

function printCoord(pt: { x: number; y: number }) {console.log("The coordinate's x value is " + pt.x);console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 3, y: 7 });

可选属性:对象类型可以指定一些甚至所有的属性为可选的,你只需要在属性名后添加一个 ? :

function printName(obj: { first: string; last?: string }) {console.log(obj.last.toUpperCase());//可能为undefined,所以要先判断下if (obj.last !== undefined) {// OKconsole.log(obj.last.toUpperCase());}
}
// Both OK
printName({ first: "Bob" });
printName({ first: "Alice", last: "Alisson" });

联合类型

基于已经存在的类型构建新的类型,现在把它们组合在一起。

function printId(id: number | string) {console.log("Your ID is: " + id);
}
// OK
printId(101);
// OK
printId("202");
// Error
printId({ myID: 22342 });
// Argument of type '{ myID: number; }' is not assignable to parameter of type 'string | number'.
// Type '{ myID: number; }' is not assignable to type 'number'.
// 因为定义的参数类型为数字或者字符串,对象不符合条件

注:必须对每个联合的成员都是有效的。举个例子,如果你有一个联合类型 string | number , 你不能使用只存在 string 上的方法:

function printId(id: number | string) {console.log(id.toUpperCase());// Property 'toUpperCase' does not exist on type 'string | number'.// Property 'toUpperCase' does not exist on type 'number'.//解决方法 用typeof 先判断一下类型,在执行方法
}

类型别名

顾名思义,一个可以指代任意类型的名字。

type Point = {x: number;y: number;
};// Exactly the same as the earlier example
function printCoord(pt: Point) {console.log("The coordinate's x value is " + pt.x);console.log("The coordinate's y value is " + pt.y);
}printCoord({ x: 100, y: 100 });

你可以使用类型别名给任意类型一个名字,举个例子,命名一个联合类型:

type ID = number | string;

接口

interface Point {x: number;y: number;
}function printCoord(pt: Point) {console.log("The coordinate's x value is " + pt.x);console.log("The coordinate's y value is " + pt.y);
}printCoord({ x: 100, y: 100 });

接口和类型别名的对比

  • 相同点: 都可以给对象指定类型
  • 不同点:
    • 接口:只能为对象指定类型
    • 类型别名:不仅可以为对象指定类型,实际上可以为唯衣类型指定别名

相关内容

热门资讯

iOSapp移植到安卓系统,i... 你有没有想过,那些在iOS上让你爱不释手的app,是不是也能在安卓系统上大放异彩呢?今天,就让我带你...
现在安卓随便换系统,探索个性化... 你知道吗?现在安卓手机换系统简直就像换衣服一样简单!没错,就是那种随时随地、随心所欲的感觉。今天,就...
安卓系统安装按钮灰色,探究原因... 最近发现了一个让人头疼的小问题,那就是安卓手机的安装按钮突然变成了灰色,这可真是让人摸不着头脑。你知...
安卓7.1.1操作系统,系统特... 你知道吗?最近我在手机上发现了一个超级酷的新玩意儿——安卓7.1.1操作系统!这可不是什么小打小闹的...
安卓os系统怎么设置,并使用`... 你有没有发现,你的安卓手机有时候就像一个不听话的小孩子,有时候设置起来真是让人头疼呢?别急,今天就来...
安卓降低系统版本5.1,探索安... 你知道吗?最近安卓系统又来了一次大动作,竟然把系统版本给降到了5.1!这可真是让人有点摸不着头脑,不...
解放安卓系统被保护,解放安卓系... 你有没有想过,你的安卓手机其实可以更加自由地呼吸呢?是的,你没听错,我说的就是解放安卓系统被保护的束...
校务帮安卓系统下载,便捷校园生... 你有没有想过,你的手机里装了一个神奇的助手——校务帮安卓系统下载?没错,就是那个能让你轻松管理学校事...
安卓系统没有拼多多,拼多多崛起... 你知道吗?最近我在手机上发现了一个小小的秘密,那就是安卓系统里竟然没有拼多多这个应用!这可真是让我大...
甜城麻将安卓系统,解锁全新麻将... 你有没有听说过那个超级火的甜城麻将安卓系统?没错,就是那个让无数麻将爱好者为之疯狂的软件!今天,就让...
安卓系统卸载的软件,深度揭秘卸... 手机里的软件越来越多,是不是感觉内存不够用了?别急,今天就来教你怎么在安卓系统里卸载那些不再需要的软...
安卓系统推荐好游戏,畅享指尖乐... 手机里的游戏可是咱们休闲娱乐的好伙伴,尤其是安卓系统的用户,选择面那可是相当广呢!今天,就让我来给你...
王者安卓系统怎么卖,揭秘如何轻... 你有没有听说最近王者安卓系统的火爆程度?没错,就是那个让无数玩家沉迷其中的王者荣耀!今天,我就来给你...
安卓开发系统内置证书,基于安卓... 你有没有想过,你的安卓手机里那些神秘的内置证书,它们到底是个啥玩意儿?别急,今天就来给你揭秘这些隐藏...
荣耀安装安卓原生系统,深度体验... 你知道吗?最近荣耀手机界可是掀起了一股热潮,那就是——荣耀安装安卓原生系统!这可不是什么小打小闹,而...
安卓13小米系统,创新功能与流... 你知道吗?最近安卓13系统可谓是风头无两,各大手机厂商纷纷推出自家的新版系统,其中小米的安卓13系统...
鸿蒙系统底层安卓10,融合与创... 你知道吗?最近手机圈里可是热闹非凡呢!华为的新操作系统鸿蒙系统,竟然在底层采用了安卓10的架构。这可...
安卓系统辅助在哪关闭,轻松关闭... 你有没有发现,安卓系统的辅助功能真是贴心到不行啊!不过,有时候这些功能太多,用起来有点乱糟糟的。别急...
安卓系统outlook邮件设置... 你有没有发现,自从你把手机升级到了安卓系统,邮件管理变得有点复杂呢?别急,今天就来手把手教你如何设置...
安卓系统停止向华为,自主操作系... 你知道吗?最近科技圈可是炸开了锅!安卓系统突然宣布停止向华为提供技术支持,这可不仅仅是两家公司之间的...