【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 });

接口和类型别名的对比

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

相关内容

热门资讯

安卓子系统windows11,... 你知道吗?最近科技圈可是炸开了锅,因为安卓子系统在Windows 11上的兼容性成了大家热议的话题。...
电脑里怎么下载安卓系统,电脑端... 你有没有想过,你的电脑里也能装上安卓系统呢?没错,就是那个让你手机不离手的安卓!今天,就让我来带你一...
索尼相机魔改安卓系统,魔改系统... 你知道吗?最近在摄影圈里掀起了一股热潮,那就是索尼相机魔改安卓系统。这可不是一般的改装,而是让这些专...
安卓系统哪家的最流畅,安卓系统... 你有没有想过,为什么你的手机有时候像蜗牛一样慢吞吞的,而别人的手机却能像风一样快?这背后,其实就是安...
安卓最新系统4.42,深度解析... 你有没有发现,你的安卓手机最近是不是有点儿不一样了?没错,就是那个一直在默默更新的安卓最新系统4.4...
android和安卓什么系统最... 你有没有想过,你的安卓手机到底是用的是什么系统呢?是不是有时候觉得手机卡顿,运行缓慢,其实跟这个系统...
平板装安卓xp系统好,探索复古... 你有没有想过,把安卓系统装到平板上,再配上XP系统,这会是怎样一番景象呢?想象一边享受着安卓的便捷,...
投影仪装安卓系统,开启智能投影... 你有没有想过,家里的老式投影仪也能焕发第二春呢?没错,就是那个曾经陪你熬夜看电影的“老伙计”,现在它...
安卓系统无线车载carplay... 你有没有想过,开车的时候也能享受到苹果设备的便利呢?没错,就是那个让你在日常生活中离不开的iOS系统...
谷歌安卓8系统包,系统包解析与... 你有没有发现,手机更新换代的速度简直就像坐上了火箭呢?这不,最近谷歌又发布了安卓8系统包,听说这个新...
微软平板下软件安卓系统,开启全... 你有没有想过,在微软平板上也能畅享安卓系统的乐趣呢?没错,这就是今天我要跟你分享的神奇故事。想象你手...
coloros是基于安卓系统吗... 你有没有想过,手机里的那个色彩斑斓的界面,背后其实有着一个有趣的故事呢?没错,我要说的就是Color...
安卓神盾系统应用市场,一站式智... 你有没有发现,手机里的安卓神盾系统应用市场最近可是火得一塌糊涂啊!这不,我就来给你好好扒一扒,看看这...
黑莓平板安卓系统升级,解锁无限... 亲爱的读者们,你是否还记得那个曾经风靡一时的黑莓手机?那个标志性的全键盘,那个独特的黑莓体验,如今它...
安卓文件系统采用华为,探索高效... 你知道吗?最近安卓系统在文件管理上可是有了大动作呢!华为这个科技巨头,竟然悄悄地给安卓文件系统来了个...
深度系统能用安卓app,探索智... 你知道吗?现在科技的发展真是让人惊叹不已!今天,我要给你揭秘一个超级酷炫的话题——深度系统能用安卓a...
安卓系统的分区类型,深度解析存... 你有没有发现,你的安卓手机里藏着不少秘密?没错,就是那些神秘的分区类型。今天,就让我带你一探究竟,揭...
安卓系统铠无法兑换,揭秘无法兑... 最近是不是有很多小伙伴在玩安卓系统的游戏,突然发现了一个让人头疼的问题——铠无法兑换!别急,今天就来...
汽车安卓系统崩溃怎么刷,一键刷... 亲爱的车主朋友们,你是否曾遇到过汽车安卓系统崩溃的尴尬时刻?手机系统崩溃还能重启,但汽车系统崩溃了,...
miui系统可以刷安卓p系统吗... 亲爱的手机控们,你是否对MIUI系统情有独钟,同时又对安卓P系统的新鲜功能垂涎欲滴?今天,就让我带你...