【3】TypeScript入门——数据类型①(简单/复杂基础类型、类型断言)

这篇博客详细介绍了TypeScript的基本语法,包括简单和复杂基础类型,如字符串、数字、布尔值、symbol、null、undefined等。文章还讨论了void、any、unknown和object类型,并强调了类型断言的重要性和使用约束。
摘要由CSDN通过智能技术生成

三、 基本语法

1.前言

  • 在语法层面,缺省类型注解的 TypeScript 与 JavaScript 完全一致。let num = 1;此写法同时满足两种与语法。
  • 而 TypeScript 语法与 JavaScript 语法的区别在于,我们可以在 TypeScript 中显式声明变量num仅仅是数字类型,也就是说只需在变量num后添加: number类型注解即可,如下代码所示:
let num :number = 1;
/* 同理,我们也可以把:后的number换成其他的类型
(比如 JavaScript 原始类型:number、string、boolean、
null、undefined、symbol 等),
此时,num 变量也就拥有了 TypeScript 同名的原始类型定义。*/
  • 因此,我们可以把 TypeScript 代码的编写看作是为 JavaScript 代码添加类型注解。

  • 在 JavaScript 中,原始类型指的是非对象且没有方法的数据类型,它包括 stringnumberbigintbooleanundefinedsymbol 这六种 (null 是一个伪原始类型,它在 JavaScript 中实际上是一个对象,且所有的结构化类型都是通过 null 原型链派生而来)。

  • 在 JavaScript 语言中,原始类型值是最底层的实现,对应到 TypeScript 中同样也是最底层的类型。

  • 为了实现更合理的逻辑边界,我们把以上原始类型拆分到简单基础类型复杂基础类型这两部分进行讲解。


2. 简单基础类型

2.1 字符串

// 1.字符串字面量
let firstname: string = 'Captain'; 
// 2.显式类型转换
let familyname: string = String('S'); 
// 3.模板字符串
let fullname: string = `my name is ${
     firstname}.${
     familyname}`; 

2.2 数字(包括 number 和bigint)

  • 所有 JavaScript 支持的定义数字的方法,我们都可以直接在 TypeScript 中使用。
  • 我们可以使用number类型表示JavaScript 已经支持或者即将支持的十进制整数、浮点数,以及二进制数、八进制数、十六进制数。
let integer: number = 6;
let integer2: number = Number(42);
let decimal: number = 3.14;
let binary: number = 0b1010;
let octal: number = 0o744;
let hex: number = 0xf00d;

// 如果使用较少的大整数,那么我们可以使用bigint类型来表示
let big: bigint =  100n;

2.3 布尔值

let TypeScriptIsGreat: boolean = true;
let TypeScriptIsBad: boolean = false;

2.4 symbol

即我们可以通过Symbol构造函数,创建一个独一无二的标记;同时,还可以使用symbol表示如下代码所示的类型。

let sym1: symbol = Symbol();
let sym2: symbol = Symbol('42');

注意

  • 当然,TypeScript 还包含 Number、String、Boolean、Symbol 等类型(注意区分大小写)。
  • 实际上,我们压根使用不到 ,因为它们并没有什么特殊的用途。
  • 这就像我们不必使用 JavaScript 的NumberStringBoolean 等构造函数 new 一个相应的实例一样。

3. 复杂基础类型

3.1 null

  • 实际上并没有太大的用处,strict 模式下,是名副其实的“废柴”。
  • 价值主要体现在接口制定上,它表明对象或属性可能是空值。尤其是在前后端交互的接口,如 Java Restful、Graphql任何涉及查询的属性、对象都可能是 null 空对象。
// 鸡肋 
let undeclared: undefined = undefined; 
// 用处:接口制定时
const userInfo: {
    
  name: null | str
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

倏存

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值