TypeScript学习（基础篇）

前言

在现代的Web开发生态系统中，JavaScript已经成为一种必备的技术。然而，随着应用的增大，JavaScript的一些限制开始显现，例如缺乏静态类型检查和编译时错误检查。这正是TypeScript发挥作用的地方，TypeScript是一种静态类型的编程语言，它是JavaScript的超集。其优于JavaScript最大的两个优势就是提供可选的强静态类型和更为完善的面向对象特性。

TypeScript引入了类型系统，这也是其最大优势，静态类型系统可以在编译时捕获类型错误，提供更早的错误检测和更好的代码健壮性，这意味着你可以在编码阶段就发现变量类型、函数参数和返回值类型等错误，而不是在运行时。这大大提高了代码的可维护性和可读性，帮助开发人员在开发过程中发现潜在的错误，本文为就来给大家讲解TypeScript的数据类型。

1. 变量的声明

变量声明语法：let  变量名[ : 变量类型 ] = 值 

let var_name[:var_type [| var_type2 | var_type3]] = value

2. 原始数据类型

// 字符串类型
let username:string = "xujingliang";

// 数字类型
let age:number = 25;

// 布尔类型
let isShow:boolean = true;

// 未定义
let defined:undefined = undefined;

// 空
let empty:null = null;

3. 任意类型：any

任意值（Any）用来表示允许赋值为任意类型。

1. 如果是一个普通类型，在赋值过程中改变类型是不被允许的，但如果是 any 类型，则允许被赋值为任意类型。

// 定义一个变量被声明为string类型
let username:string = "hello world";

// 给刚刚声明的变量赋值number时，类型检查报错
username = 20

// 类型报错内容：Type 'number' is not assignable to type 'string'.(2322)


// 定义一个变量被声明为any任意类型
let username:any = "xujingliang";

// 给刚刚声明的变量赋值number时，类型检查不会报错
username = 123456

2. 变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型。例如：

let username;
username="xujingliang";
username = 123456;

使用any类型的弊端：一夜回到解放前吧 everthing is any，ts 基本就是 js

4. 类型推论

如果没有明确的指定类型，那么 TypeScript 会依照类型推论（Type Inference）的规则推断出一个类型。

以下代码虽然没有指定类型，但是会在编译的时候报错，原因是如果没有明确规定数据类型，TS会推断数据类型为首次赋值的类型。

let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

上面这段代码就等同于：

let myFavoriteNumber: string = 'seven';
myFavoriteNumber = 7;

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

 TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论。类型推论常见情况：

1. 如果定义变量后第一次赋值为某一类型，在以后的操作中ts会推断为首次赋值的这一类型。

2. 如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查：

5. 联合类型

联合类型（Union Types）表示取值可以为多种类型中的一种。

1. 定义一个变量result用于接收后端接口返回的结果，但是返回的结果可能是数字、字符串或布尔，就可以使用联合类型类定义一个变量，例如：

let result:number | string | boolean;

result = 200;

result = "操作成功";

result = true;

 联合类型使用 “ | ” 分隔每个类型。

2. 当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法。

3. 联合类型的变量在被赋值的时候，会根据类型推论的规则推断出一个类型：

let result:number | string | boolean;

result = 20;

result.split(",")

// 会检查报错：Property 'split' does not exist on type 'number'.(2339)

上述代码中，第一次赋值为number类型，TS会推断为number类型，则使用字符串处理函数split会出现检查报错。

6. 对象的类型接口

在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。

在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。

TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。

// 接口
interface Person{
    readonly id:string;    // 只读属性
    name:string;
    age:number;
    sex?:number;           // 可选属性
    [password:number]:number     //  任意属性
}

let p:Person = {
    id:"48280240820",
    name:"xujingliang",
    age:20,
}

console.log(p);

7. 数组的类型

 在 TypeScript 中，数组类型有多种定义方式，比较灵活。

1. 最简单的方法是使用「类型 + 方括号」来表示数组

let users:string[] = ["xiaoming","zhagnchao","wangwei","yangwei"]

注意：数组赋值时数组的项中不允许出现其他的类型。

let users:string[] = ["xiaoming",9527,"wangwei","yangwei"]

// 在字符串数组中添加了一个数字类型值时报错：Type 'number' is not assignable to type 'string'

注意：数组的一些方法的参数也会根据数组在定义时约定的类型进行限制。

let users:string[] = ["xiaoming","wangpeng","wangwei","yangwei"]

user.push(9527)

// 语法检查报错：Argument of type 'number' is not assignable to parameter of type 'string'.(2345)

上例中，push 方法只允许传入 number 类型的参数，但是却传了一个 "8" 类型的参数，所以报错了。

2. 数组泛型

3. any 在数组中的应用

一个比较常见的做法是，用 any 表示数组中允许出现任意类型，可以实现数组中可以存放多种类型的数据

let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }];

8. 函数的类型 

1. 在JavaScript中声明函数如下：

let users = ["喜洋洋","懒洋洋","沸羊羊"];

function getName(index){
    return users[index];
}

getName(0);

 一个函数有输入和输出，要在 TypeScript 中对其进行约束，需要把输入和输出都考虑到，其中函数声明的类型定义较简单。

let users:string[] = ["喜洋洋","懒洋洋","沸羊羊"];

function getName(index:number):string{
    return users[index];
}

getName(0);

注意：注意，输入多余的（或者少于要求的）参数，是不被允许的，

Expected 1 arguments, but got 3.

 2. 用接口定义函数的形状

interface myFun{
    (name:string,age:number):string;
}

let myFunction:myFun;

myFunction = function(name:string,age:number):string{
    return "My name is "+name+"and I am "+age
}

采用函数表达式|接口定义函数的方式时，对等号左侧进行类型限制，可以保证以后对函数名赋值时保证参数个数、参数类型、返回值类型不变。 

3. 可选参数

前面提到，输入多余的（或者少于要求的）参数，是不允许的。那么如何定义可选的参数呢？

与接口中的可选属性类似，我们用 ? 表示可选的参数：

function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

注意：需要注意的是，可选参数必须接在必需参数后面。换句话说，可选参数后面不允许再出现必需参数了： 

4.参数默认值

在 ES6 中，我们允许给函数的参数添加默认值，TypeScript 会将添加了默认值的参数识别为可选参数

function buildName(firstName: string, lastName: string = 'Cat') {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

 5. 剩余参数

ES6 中，可以使用 ...rest 的方式获取函数中的剩余参数（rest 参数）：

// 参数默认值 
function say(name:string,age:number,...items:any[]):void{
    
    console.log(name,age,items);
}

say("xujingliang",25,20,20,20,20);

// 输出结果："xujingliang",  25,  [20, 20, 20, 20]

注意，rest 参数只能是最后一个参数，关于 rest 参数，可以参考 

9. 类型断言

类型断言（Type Assertion）可以用来手动指定一个值的类型。

使用 as 关键字，来强制指定一个类型。

class Animal{
    
}

class Cat extends Animal{
    public miao():void{
        console.log("喵喵喵");
    }
}

class Dog extends Animal{
    public wang():void{
        console.log("汪汪汪");
    }
}


function test(animal:Cat|Dog):void{
    // animal.miao() 报错

    (animal as Cat).miao();
}

上述代码代码中如果animal是传入的Dog类，则调用miao()方法会报错，可以使用 as 将类型强制转为Cat类，然后调用miao()方法。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Editing Existing PDF Files in Java

Editing Existing PDF Files in Java

Editing Existing PDF Files in Java 1. Overview In this article, we’ll see how to edit the content of an existing PDF file in Java. First, we’ll just add new content. Then, we’ll focus on removing or replacing some pre-existing content. 2. Adding the …
阅读更多...
Ubuntu20.04-查看GPU的使用情况及输出详解

Ubuntu20.04-查看GPU的使用情况及输出详解

1. 查看GPU的使用情况 1.1 nvidia-smi # 直接在终端得到显卡的使用情况 # 不会自动刷新 nvidia-smi# 重定向到文件中 nvidia-smi > nvidia_smi_output.txt# 如果输出的内容部分是以省略号表示的，可以-q nvidia-smi -q 1.2 nvidia-smi -l # 会自动刷新&#x…
阅读更多...
BED 文件格式 chip-seq m6a数据可视化会用到

BED 文件格式 chip-seq m6a数据可视化会用到

General usage — bedtools 2.31.0 documentationhttps://bedtools.readthedocs.io/en/latest/content/general-usage.html BED格式（Browser Extensible Data format）是一种在生物信息学中广泛使用的文本文件格式，用于描述基因组上的特征和…
阅读更多...
MySQL——表的内外连接

MySQL——表的内外连接

目录 一.内连接 二.外连接 1.左外连接 2.右外连接 一.内连接 表的连接分为内连和外连 内连接实际上就是利用where子句对两种表形成的笛卡儿积进行筛选，我们前面学习的查询都是内连接，也是在开发过程中使用的最多的连接查询。 语法： s…
阅读更多...
音频信号处理电路芯片如何选型？ --低噪声，高增益

音频信号处理电路芯片如何选型？ --低噪声，高增益

随着智能手机、汽车音频、AI智能音箱，智能家居、家庭影院、平板电脑、笔记本电脑等智能设备的普及；数字音频功放芯片的应用也越来越广泛；同时对音频信号处理的芯片的性能要求越来越高；以下几款就是常用热门音频信号处理电路芯片分…
阅读更多...
【网络】华为交换机排查收发光情况以及思路

【网络】华为交换机排查收发光情况以及思路

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》：python零基础入门学习 《python运维脚本》： python运维脚本实践 《shell》：shell学习 《terraform》持续更新中：terraform_Aws学习零基础入门到最佳实战 《k8…
阅读更多...
智能优化算法应用：基于人工兔算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于人工兔算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于人工兔算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用：基于人工兔算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.人工兔算法4.实验参数设定5.算法结果6.参考文…
阅读更多...
BuildRoot 围炉夜话

BuildRoot 围炉夜话

文章目录 一、BuildRoot二、Qt 一、BuildRoot Buildroot 是Linux平台上一个构建嵌入式Linux系统的框架。整个Buildroot是由 Makefile 脚本和 Kconfig 配置文件构成的。你可以和编译Linux内核一样，通过buildroot配置，menuconfig修改，编译出一个…
阅读更多...
tekton 发布 kubernetes 应用

tekton 发布 kubernetes 应用

tekton 发布 kubernetes 应用 基于Kubernetes 服务部署 Tekton Pipeline 实例，部署完成后使用tekton来完成源码拉取、应用打包、镜像推送和应用部署。 本文实现一个 golang-helloworld 项目 CI/CD 的完整流程，具体包括以下步骤： 从 gitee…
阅读更多...
基于多反应堆的高并发服务器【C/C++/Reactor】（中）Dispatcher模块的实现思路和定义

基于多反应堆的高并发服务器【C/C++/Reactor】（中）Dispatcher模块的实现思路和定义

（四）Dispatcher模块的实现思路 关于dispatcher，它应该是反应堆模型里边的核心组成部分，因为如果说这个反应堆模型里边有事件需要处理，或者说有事件需要检测，那么是需要通过这个poll、epoll 或者 select来完…
阅读更多...
【数据结构】查找与排序

【数据结构】查找与排序

要查询信息，涉及两个问题： 在哪里查？——查找表 怎么查？——查找方法 一.查找 1.查找表的定义： 查找表是由同类型的数据元素构成的集合 2.对查找表的基本操作： 1）查询某个数据元素是否在查…
阅读更多...
如何进行实例监控

如何进行实例监控

目录 行实例监控 云监控 云监控核心功能 云监控ECS实例 安装插件 查看监控图表 云监控控制台 云服务器ECS控制台 设置报警规则 行实例监控 方式一：在服务器上自行编写并定时运行（计划任务）监控脚本（shell、python&#x…
阅读更多...
众和策略：12月新批国产网游版号数量过百

众和策略：12月新批国产网游版号数量过百

上星期五（22日），A股冲高回落，三大股指挨近午盘拉升走高，午后再度回落走低，沪指尾盘跌幅收窄。到收盘，沪指跌0.13%报2914.78点，深成指跌0.39%报9221.31点，创业板指跌0.37%…
阅读更多...
idea Springboot小区紧急事件上报系统VS开发mysql数据库web结构java编程计算机网页源码maven项目

idea Springboot小区紧急事件上报系统VS开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 springboot 小区紧急事件上报系统是一套完善的信息系统，结合springboot框架和jsp完成本系统，对理解JSP java编程开发语言有帮助系统采用springboot框架（MVC模式开发），系统具 有完整的源代码和数据库&am…
阅读更多...
408数据结构错题知识点拾遗

408数据结构错题知识点拾遗

408相关： 408数据结构错题知识点拾遗 408计算机网络错题知识点拾遗 对于数据结构的学习，个人认为要对概念性的东西进行理解，特别是树的性质、图的相关性质和考察的相应算法。应用题强化的话，对于每一章节尾的应用小节&#xff0c…
阅读更多...
鸿蒙系列--组件介绍之其他基础组件（下）

鸿蒙系列--组件介绍之其他基础组件（下）

​​​​​​鸿蒙系列--组件介绍之其他基础组件（上） 一、 ScrollBar 描述： 滚动条组件 功能： 用于配合可滚动组件使用，如List、Grid、Scroll 子组件：可以包含单个子组件 ScrollBar(value: { scroller…
阅读更多...
自学SLAM（9）《第五讲：特征点法视觉里程计》作业

自学SLAM（9）《第五讲：特征点法视觉里程计》作业

文章目录 1.ORB特征点1.1 ORB提取1.2 ORB描述1.3 暴力匹配1.4 最后，请结合实验，回答下⾯⼏个问题 2.从 E 恢复 R，t3.用 G-N 实现 Bundle Adjustment4.* 用 ICP 实现轨迹对齐 1.ORB特征点 1.1 ORB提取 ORB(Oriented FAST and BRIEF) 特征是 S…
阅读更多...
SM2259XT Intel N18混贴3CH开卡经验分享，SM2259XT2、SM2258XT量产固件参考教程

SM2259XT Intel N18混贴3CH开卡经验分享，SM2259XT2、SM2258XT量产固件参考教程

收了条Intel的512G不认盘的ssd，拆出来两颗29F02T2AMCQH1，这个应该是正品，ID也没问题。然后，还有个山寨的256G SATA，主控2259XT，两个颗粒丝印29F1TB2ALCTH2，但是，ID与CQH1一样&#x…
阅读更多...
2024年科技盛宴“上海智博会·上海软博会”招商工作接近尾声

2024年科技盛宴“上海智博会·上海软博会”招商工作接近尾声

2024年上海智博会和上海软博会即将于3月份在上海跨国采购会展中心盛大召开。作为全球科技和软件行业的盛会，这两大展会汇集了业界顶尖的企业、创新技术和前瞻思想，吸引了来自世界各地的专业人士和参展商。 今年的展会将一如既往地为大家呈现最前沿的科技…
阅读更多...
[SWPUCTF 2021 新生赛]error

[SWPUCTF 2021 新生赛]error

[SWPUCTF 2021 新生赛]error wp 信息搜集 查看页面： 输个单引号会报错： 显然是 SQL 注入。 提示看看有没有什么捷径，你要说捷径的话，sqlmap？你不说我也会用 sqlmap 先跑一下，哈哈。 sqlmap 的使用 先简…
阅读更多...
最新文章

Copyright @ 2022~2023