【TS篇二】变量、数据类型、接口、解构赋值

文章目录

    • 一、变量声明
      • 1.1 `var`
      • 1.2 `let`
      • 1.3 `const`
      • 1.4 `let` vs `const`
    • 二、基本数据类型
      • 2.1 布尔值
      • 2.2 数字
      • 2.3 字符串
      • 2.4 数组
      • 2.5 元组
      • 2.6 Object
      • 2.7 Any
      • 2.8 Void
      • 2.9 Null 和 Undefined
      • 2.10 类型推断
      • 2.11 其它
    • 三、接口
      • 3.1 基本示例
      • 3.2 可选属性
      • 3.3 只读属性
    • 四、解构赋值
      • 4.1 数组解构
      • 4.2 对象解构
        • 4.2.1 基本使用
        • 4.2.2 属性解构重命名
        • 4.2.3 默认值
      • 4.3 展开操作符
      • 4.4 解构赋值用于函数声明
      • 4.5 解构赋值用于加载指定模块成员

一、变量声明

1.1 var

  • 作用域
  • 重复声明

1.2 let

  • 块级作用域
  • 在同一个块中不能重复声明

1.3 const

  • 声明同时必须赋值
  • 一定声明不可改变
    • 对象可以修改
  • 块级作用域

1.4 let vs const

使用最小特权原则,所有变量除了你计划去修改的都应该使用const。 基本原则就是如果一个变量不需要对它写入,那么其它使用这些代码的人也不能够写入它们,并且要思考为什么会需要对这些变量重新赋值。 使用 const也可以让我们更容易的推测数据的流动。

二、基本数据类型

2.1 布尔值

let isDone: boolean = false;

2.2 数字

let amount: number = 6;

2.3 字符串

  • 类型

  • 模板字符串

    • 支持换行
    • 支持内嵌表达式
  • 和 JavaScript 一样,可以使用双引号,也可以使用单引号,推荐单引号

    let nickname: string = '张三';
    

还可以使用模板字符串(换行 + 嵌入表达式):

let nickname: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my nickname is ${ nickname }.I'll be ${ age + 1 } years old next month.`;

2.4 数组

TypeScript像JavaScript一样可以操作数组元素。 有两种方式可以定义数组。 第一种,可以在元素类型后面接上[],表示由此类型元素组成的一个数组:

let list: number[] = [1, 2, 3];

第二种方式是使用数组泛型,Array<元素类型>

let list: Array<number> = [1, 2, 3];

2.5 元组

元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。 比如,你可以定义一对值分别为stringnumber类型的元组。

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error

2.6 Object

  • 允许赋任意值
  • 但是不能调用任意方法,即便它真的有
let foo: Object = {name: 'Jack',age: 18
}

知道即可,用的很少,没有类型校验和语法提示

2.7 Any

有时候,我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容,比如来自用户输入或第三方代码库。 这种情况下,我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量:

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

2.8 Void

void类型像是与any类型相反,它表示没有任何类型。 当一个函数没有返回值时,你通常会见到其返回值类型是 void

function warnUser(): void {alert("This is my warning message");
}

声明一个void类型的变量没有什么大用,因为你只能为它赋予undefinednull

let unusable: void = undefined;

2.9 Null 和 Undefined

void相似,它们的本身的类型用处不是很大:

// Not much else we can assign to these variables!
let u: undefined = undefined;
let n: null = null;

默认情况下nullundefined是所有类型的子类型。 就是说你可以把 nullundefined赋值给number类型的变量。

然而,当你指定了--strictNullChecks 标记,nullundefined 只能赋值给 void 和它们各自。 这能避免 很多常见的问题。许在某处你想传入一个 stringnullundefined,你可以使用联合类型string | null | undefined

注意:我们推荐尽可能地使用--strictNullChecks ,因为它使你的代码更严谨,可以极大的减少出错的几率。

2.10 类型推断

有时候你会遇到这样的情况,你会比TypeScript更了解某个值的详细信息。 通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。

通过类型断言这种方式可以告诉编译器,“相信我,我知道自己在干什么”。 类型断言好比其它语言里的类型转换,但是不进行特殊的数据检查和解构。 它没有运行时的影响,只是在编译阶段起作用。 TypeScript会假设你,程序员,已经进行了必须的检查。

类型断言有两种形式。 其一是“尖括号”语法:

let someValue: any = "this is a string";let strLength: number = (<string>someValue).length;

另一个为as语法:

let someValue: any = "this is a string";let strLength: number = (someValue as string).length;

两种形式是等价的。 至于使用哪个大多数情况下是凭个人喜好;然而,当你在TypeScript里使用JSX时,只有 as语法断言是被允许的。

2.11 其它

  • ReadonlyArray<T> 去除了数组的所有可变方法,确保数组创建后再也不能被修改

三、接口

TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

3.1 基本示例

function printLabel(labelledObj: { label: string }) {console.log(labelledObj.label);
}let myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);

类型检查器会查看printLabel的调用。 printLabel有一个参数,并要求这个对象参数有一个名为label类型为string的属性。 需要注意的是,我们传入的对象参数实际上会包含很多属性,但是编译器只会检查那些必需的属性是否存在,并且其类型是否匹配。 然而,有些时候TypeScript却并不会这么宽松,我们下面会稍做讲解。

下面我们重写上面的例子,这次使用接口来描述:必须包含一个label属性且类型为string

interface LabelledValue {label: string;
}function printLabel(labelledObj: LabelledValue) {console.log(labelledObj.label);
}let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

3.2 可选属性

接口里的属性不全都是必需的。 有些是只在某些条件下存在,或者根本不存在。 可选属性在应用“option bags”模式时很常用,即给函数传入的参数对象中只有部分属性赋值了。

interface SquareConfig {color?: string;width?: number;
}function createSquare(config: SquareConfig): {color: string; area: number} {let newSquare = {color: "white", area: 100};if (config.color) {newSquare.color = config.color;}if (config.width) {newSquare.area = config.width * config.width;}return newSquare;
}let mySquare = createSquare({color: "black"});

3.3 只读属性

一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 readonly来指定只读属性:

interface Point {readonly x: number;readonly y: number;
}

你可以通过赋值一个对象字面量来构造一个Point。 赋值后, xy再也不能被改变了。

let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!

readonly vs const

  • 常量使用 const
  • 对象属性使用 readonly

四、解构赋值

4.1 数组解构

let input = [1, 2];
let [first, second] = input;
console.log(first); // outputs 1
console.log(second); // outputs 2

上面的写法等价于:

first = input[0];
second = input[1];

利用解构赋值交换变量:

[first, second] = [second, first];

函数参数解构:

function f ([first, second]: [number, number]) [console.log(first)console.log(second)
]f(1, 2)

解构剩余参数:

let [first, ...rest] = [1, 2, 3, 4]
console.log(first) // 1
console.log(rest) // [2, 3, 4]

也可以忽略其它参数:

let [first] = [1, 2, 3, 4];
console.log(first); // outputs 1

或者跳过解构:

let [, second, , fourth] = [1, 2, 3, 4]

4.2 对象解构

4.2.1 基本使用

示例一:

let o = {a: "foo",b: 12,c: "bar"
};
let { a, b } = o;

就像数组解构,你可以用没有声明的赋值:

let a: number,b: number;({a, b} = {a: 123, b: 456})console.log(a, b) // 123 456

你可以在对象里使用 ... 语法创建剩余变量:

let { a, ...passthrough } = o;
let total = passthrough.b + passthrough.c.length;
4.2.2 属性解构重命名

你也可以给属性以不同的名字:

let { a: newName1, b: newName2 } = o;

注意,这里的冒号不是指示类型的。 如果你想指定它的类型, 仍然需要在其后写上完整的模式。

let {a, b}: {a: string, b: number} = o;
4.2.3 默认值
function keepWholeObject(wholeObject: { a: string, b?: number }) {let { a, b = 1001 } = wholeObject;
}

4.3 展开操作符

  • 展开数组
  • 展开对象
    • 不会展开方法

4.4 解构赋值用于函数声明

type C = {a: string, b?: number}function f ({a, b}: C): void {// ...
}

4.5 解构赋值用于加载指定模块成员

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

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

相关文章

2015年亚太杯APMCM数学建模大赛C题识别网络中的错误连接求解全过程文档及程序

2015年亚太杯APMCM数学建模大赛 C题 识别网络中的错误连接 原题再现 网络是描述真实系统结构的强大工具——社交网络描述人与人之间的关系&#xff0c;万维网描述网页之间的超链接关系。随着现代技术的发展&#xff0c;我们积累了越来越多的网络数据&#xff0c;但这些数据部…

总结-关于stream流的利用

文章目录 前言一、需求二、我的写法 三、优化后的写法总结 前言 在工作中遇到了一个需求&#xff0c;很费劲的写了出来&#xff0c;但是导师看了直摇头&#xff0c;一顿操作帮我修改了&#xff0c;修改之后代码非常简洁&#xff0c;现对这部分做一个回顾总结。 一、需求 需求…

最近面试者对接口测试的理解真把我给笑拥了~

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

快速查看PHP扩展的版本信息

列出所有扩展 /data/app/bin/php -m[PHP Modules] bcmath Core ctype curl date dom fileinfo filter ftp gd hash iconv json ldap libxml mbstring mongodb mysqli mysqlnd openssl pcntl pcre PDO pdo_mysql pdo_sqlite Phar posix protobuf redis Reflection session shmo…

Hadoop PseudoDistributed Mode 伪分布式

Hadoop PseudoDistributed Mode 伪分布式加粗样式 hadoop101hadoop102hadoop103192.168.171.101192.168.171.102192.168.171.103namenodesecondary namenoderecource managerdatanodedatanodedatanodenodemanagernodemanagernodemanagerjob historyjob logjob logjob log 1. …

从零开始的JSON库教程(一)

本文是学习github大佬miloyip而做的读书笔记&#xff0c;项目点此进入 目录 1、JSON是什么 2、搭建编译环境 3、头文件与API设计 4、JSON的语法子集 5、单元测试 6、宏的编写技巧 7、实现解析器 8、关于断言 1、JSON是什么 JSON&#xff08;JavaScript Object Notati…

UI设计一定不能错过的4款常用工具

虽然设计审美很重要&#xff0c;但软件只是一种工具&#xff0c;但就像走楼梯和坐电梯到达顶层一样&#xff0c;电梯的效率显然更高&#xff0c;易于使用的设计工具也是如此。让我们了解一下UI设计的主流软件&#xff0c;以及如何选择合适的设计软件。 即时设计 软件介绍 即…

uniapp小程序九宫格抽奖

定义好奖品下标&#xff0c;计时器开始抽奖&#xff0c;请求接口&#xff0c;出现中奖奖品之后&#xff0c;获取中奖商品对应的奖品下标&#xff0c;再次计时器判断当前移动的小标是否为中奖商品的下标&#xff0c;并且是否转到3圈&#xff08;防止转1圈就停止&#xff09;&…

归并排序,自顶向下

归并排序主要两步&#xff0c;一步是划分区间&#xff0c;另一步是合并两个区间 这个算法的稳定性更好&#xff0c;对比快排这种&#xff0c;如果整体是倒序的话&#xff0c;快排的复杂度会达到o(n^2)&#xff0c;归并会更稳定。 划分区间主要是递归去实现&#xff0c;下面给…

Mac -- zsh-最新全网超详细的个性化终端(Terminal)颜色及vim颜色配置(亲测可行)

转自 Mac -- zsh-最新全网超详细的个性化终端(Terminal)颜色及vim颜色配置(亲测可行)_mac zsh-CSDN博客 以下都是苹果 设置&#xff0c;这是简化版的&#xff0c;详细的看我引用的 个性化终端颜色背景设置 显示检查器 打开终端&#xff0c;鼠标在终端中&#xff0c;右击&…

【后端开发】手写一个简单的线程池

半同步半异步线程池 半同步半异步线程池分为三层&#xff1a; 同步服务层 —— 处理来自上层的任务请求&#xff0c;将它们加入到排队层中等待处理。 同步排队层 —— 实际上是一个“同步队列”&#xff0c;允许多线程添加/取出任务&#xff0c;并保证线程安全。 异步服务层…

烂大街的测试左移和右移!

01、测试左移与右移的定义 通俗的讲&#xff1a;左移是往开发阶段移&#xff0c;右移是往发布之后移。 正常测试&#xff1a;提测后的测试工作——到——发布验证完成阶段。 测试左移&#xff1a;提测之前的测试。 如&#xff1a;代码单元测试&#xff0c;代码质量检测&…

Nacos报错Connection refused (Connection refused)(最后原因醉了,非常醉)

目录 一、问题产生二、排查思路1.nacos拒绝连接&#xff0c;排查思路&#xff1a;2.Nacos启动成功但是拒绝连接的几种原因&#xff1a; 三、实操过程&#xff08;着急解决问题直接看这个&#xff09;1.启动Nacos2.查看Nacos启动日志3.根据日志处理问题4.修改Nacos5.重启Nacos 一…

c++qt学习对象树

1.当创建的对象在堆区时候&#xff0c;如果指定的父亲是QObject派生下来的类或者QObject子类派生下来的类&#xff0c;可以不用管理释放的操作&#xff0c;将对象会放在对象树中。 2.一定程度上简化了内存回收机制 构造顺序与析构顺序相反

SpringBoot整合Activiti7——全局监听器(八)

文章目录 一、全局监听器事件类型配置方式(选)日志监听器代码实现xml文件创建全局监听器全局配置类测试流程部署流程启动流程 一、全局监听器 它是引擎范围的事件监听器&#xff0c;可以捕获所有的Activiti事件。 事件类型 ActivitiEventType 枚举类中包含全部事件类型 配置方…

跳跳狗小游戏

欢迎来到程序小院 跳跳狗 玩法&#xff1a;一直弹跳的狗狗&#xff0c;鼠标点击屏幕左右方向键进行弹跳&#xff0c;弹到不同物品会有不同的分数减扣&#xff0c;规定的时间3分钟内完成狗狗弹跳&#xff0c;快去跳跳狗吧^^。开始游戏https://www.ormcc.com/play/gameStart/198…

C语言--输出1-100以内同时能被3和5整除的数

首先我们要有1-100的数字. for(int i1;i<100;i) 如何表示同时能被3和5同时整除呢&#xff1f; 如果这个数i&#xff0c;i%30&&i%50,那么这个数就可以同时被3和5整除 if(i%30&&i%50) 最后输出即可 完整代码&#xff1a; #include<stdio.h> void Sh…

MySQL用户管理和授权

目录 一.用户管理 1.1.新建用户 1.2.查看用户 1.3.重命名用户rename 1.4.删除用户 1.5.修改当前登录用户密码 1.6.修改其他用户密码 1.7.忘记root 密码并找回 二.数据库用户授权 2.1.all privilege包含的权限 2.2.授予权限 ①允许指定用户查询指定数据库表 ②允许…

比较Excel中的两列目录编号是否一致

使用java代码比较excel中两列是否有包含关系&#xff0c;若有包含关系&#xff0c;核对编号是否一致。 excel数据样例如下&#xff1a; package com.itownet.hg;import org.apache.poi.xssf.usermodel.XSSFSheet; import org.apache.poi.xssf.usermodel.XSSFWorkbook;import j…

sqlsugar查询数据库下的所有表,批量修改表名字

查询数据库中的所有表 using SqlSugar;namespace 批量修改数据库表名 {internal class Program{static void Main(string[] args){SqlSugarClient sqlSugarClient new SqlSugarClient(new ConnectionConfig(){ConnectionString "Data Source(localdb)\\MSSQLLocalDB;In…