TypeScript 的基础语法

书接上上文:关于vue3的知识点
和 上文 :TypeScript的安装与报错
我们来接着看TypeScript 的基础语法

TypeScript 语法

1. 类型注解

  • 类型注解是 变量后面约定类型的语法,用来约定类型,明确提示
// 约定变量 age 的类型为 number 类型
let age: number = 18;
age = 19;

TS数据类型

TS 常用类型:

  • JS 已有类型
    • 简单类型,number string boolean null undefined
    • 复杂类型,对象 数组 函数
  • TS 新增类型
    • 联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any、泛型 等
简单类型

完全按照 JS 的类型来书写即可

let age: number = 18;
let myName: string = '王小明';
let isEating: boolean = false;
let nullValue: null = null;
let undefinedValue: undefined = undefined;
复杂类型
  1. 数组类型
// 写法一:(推荐)
let numbers: number[] = [1, 3, 5];
// 写法二:
let strings: Array<string> = ['a', 'b', 'c'];
  1. 对象类型
let obj : {name:string,age:number} = {name:'jack',age:18}let person: {name: string;sayHi(): void;
} = {name: 'jack',sayHi() {},
};

额外内容:

  • 对象中的函数是箭头函数时
let person: {name: stringsayHi: () => void
} = {name: 'jack',sayHi() {},
};
  • 对象中的属性是可选时,关键字是 ? ,例如axios中的get请求method就是可以省略
// axios({url,method}) 如果是 get 请求 method 可以省略
const axios = (config: { url: string; method?: string }) => {};
  1. 函数类型
// 普通函数
function add1(a: number, b: number): number {return 1
}
// 函数表达式
const arr5 = function (a: number, b: number): number {return a + b
}const add = (a: number, b: number): number => {return 1
}
// 箭头函数
const add2: () => string = () => {return '1'
}
const add3: (a: number, b: number) => number = (a, b) => {return 1
}
TS新增类型
1.联合类型
  • 类型与类型之间使用 | 连接,代表类型可以是它们当中的其中一种,这种类型叫:联合类型

当数组中既有 number 又有 string 类型时,例如 arr=[‘1’,a] 这种,就要用到| 来连接了,写法是

let arr:( number | string)[]=['1',a]

再举个例子:

let arr=[{id: 1,name: 'jack',hobby: ['唱歌'],family: {mather: 'jack妈妈'}},{id: 2,name: 'rose',hobby: ['跳舞'],family: {mather: 'rose妈妈'}}
]
2.自定义类型(类型别名)type

类型别名:

  • type 类型别名 = 具体类型 基本语法
  • 定义类型别名,遵循大驼峰命名规范,类似于变量
  • 使用类型别名,与类型注解的写法一样即可
  • 当同一类型(复杂)被多次使用时,可以通过类型别名,简化 该类型的使用
let arr: ( number | string )[] = [ 1, 'a', 4]// 使用类型别名写法: type 类型别名 = 具体类型
type CustomArr = (number | string)[];
let arr: CustomArr = [1, 'a', 4];
let arr2: CustomArr = [2, 'b', 8];
2.1 type的交叉类型
  • 使用 & 可以合并连接的对象类型,也叫:交叉类型
// 使用 type 来定义 Point2D 和 Point3D
type Point2D = {x: number;y: number;
};// 使用 交叉类型 来实现接口继承的功能:
// 使用 交叉类型 后,Point3D === { x: number; y: number; z: number }
type Point3D = Point2D & {z: number;
};let o: Point3D = {x: 1,y: 2,z: 3,
};
3. 接口 interface
  • interface 后面是接口名称,和类型别名的意思一样。
  • 指定 接口名称 作为变量的类型使用。
  • 接口的每一行只能有 一个 属性或方法,每一行不需要加分号。
  • 使用 extends 实现接口继承,达到类型复用。
// 通过interface定义对象类型
interface Person {name: string;age: number;sayHi: () => void;
}
// 使用类型
let person: Person = {name: 'jack',age: 19,sayHi() {},
};
3.1 接口的extends 继承
  • 接口继承的语法:interface 接口A extends 接口B {}
  • 继承后 接口A 拥有 接口B 的所有属性和函数的类型声明
interface Point2D {x: number;y: number;
}
// 继承 Point2D
interface Point3D extends Point2D {z: number;
}
// 继承后 Point3D 的结构:{ x: number; y: number; z: number }
3.2 type和interface 的相同点与区别

关键的区别在于不能重新打开类型以添加新属性,而接口总是可扩展的。

interfacetype
支持:对象类型支持:对象类型,其他类型
复用:可以继承复用:交叉类型
  • 它们都可以定义对象类型
  • 它们都可以复用,interface 使用 extends , type 使用 &
  • type 不能重复定义,interface 可以重复定义但是会合并

详解不同的点:

  • type 不可重复定义
type Person = {name: string;
};
// 标识符“Person”重复  Error
type Person = {age: number;
};
  • interface 重复定义会合并
interface Person {name: string;
}
interface Person {age: number;
}
// 类型会合并,注意:属性类型和方法类型不能重复定义
const p: Person = {name: 'jack',age: 18,
};
4. 类型推断

在 TS 中存在类型推断机制,在没有指定类型的情况下,TS 也会给变量提供类型。

// 函数返回值的类型被自动推断为:number
const add = (num1: number, num2: number) => {return num1 + num2;
};
  • 将来在开发项目的时候,能省略类型注解的地方就省略,充分利用TS推断 的能力,提高开发效率。
  • 如果你不知道类型怎么写,可以把鼠标放至变量上,可以通过 Vscode 提示看到类型
5. 字面量类型

使用 js字面量 作为变量类型,这种类型就是字面量类型,使用字面量类型更加精确、严谨

let str1 = 'Hello TS';
const str2 = 'Hello TS';
// str1的字面量是string   str2的字面量是'Hello TS'  
// 因为const声明的变量不能再改变,而str2 是 const 声明的,值只能是 Hello TS,所以类型只能是 Hello TS
  • 再例如性别只有男和女
type Gender = '男' | '女'
let gender: Gender = '男'
gender = '女'
  • 字面量类型配合联合类型来使用,表示:一组明确的可选的值
// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'function changeDirection(direction: Direction) {console.log(direction)
}// 调用函数时,会有类型提示:
changeDirection('up')
6. any

any 类型的作用是逃避 TS 的类型检查

  • 显式any情况:当变量的类型指定为 any 的时候,不会有任何错误,也不会有代码提示,TS会忽略类型检查
let obj: any = { age: 18 }
obj.bar = '100'
const n: number = obj
console.log('n',n);
  • 隐式any的情况:声明变量不给类型或初始值,函数参数不给类型或初始值
// 声明变量不给类型或初始值
let a;
// 函数参数不给类型或初始值
const fn = (n) => {}
7. 类型断言 -as

一种将变量或表达式的类型强制转换为开发者指定的类型的方式

  1. 使用 as 关键字实现类型断言也可以使用尖括号(<>)语法进行类型断言(不推荐)
  2. 关键字 as 后面的类型是一个更加具体的类型
  3. 使用场景 :消除类型检查错误、处理联合类型、处理any类型

这里,我们将一个any类型的变量str断言为string类型,并使用它的length属性获取字符串的长度。

// 1. 使用尖括号语法的类型断言:
let str: any = "hello";
let len1: number = (<string>str).length;
// 2.使用as语法的类型断言:
let str: any = "hello";
let len2: number = (str as string).length;
8.泛型

在TypeScript中,泛型是一种创建可复用代码组件的工具。这种组件不只能被一种类型使用,而是能被多种类型复用。类似于参数的作用,泛型是一种用以增强类型(types)、接口(interfaces)、函数类型等能力的非常可靠的手段。

8.1 泛型别名
// 对后台返回的数据进行类型定义
type User = {name: string;age: number;
}type Goods = {id: number;goodsName: string;
}type Data<T> = {msg: string;code: number;data: T
}// 使用类型
type UserData = Data<User>
let userData: UserData = {msg: 'success',code: 200,data: {name: 'jack',age: 18}
}
console.log(userData.data.name);type GoodsData = Data<Goods>
let goodsData: GoodsData = {msg:'success',code: 200,data: {id: 1,goodsName: 'iphone'}
}
console.log(goodsData.data.goodsName);
  • 泛型:定义类型别名后加上<类型参数> 就是泛型语法, 使用的时候传入具体的类型即可
  • <T> 是一个变量,可以随意命名,建议遵循大驼峰即可。
  • 和类型别名配合,在类型别名后加上泛型语法,然后类型别名内就可以使用这个类型参数
  • 泛型可以提高类型的复用性灵活性
8.2 泛型接口
  • 在接口名称的后面添加 <类型变量>,那么,这个接口就变成了泛型接口,接口中所有成员都可以使用类型变量。
// 对象,获取单个ID函数,获取所有ID函数,ID的类型肯定是一致的,但是可能是数字可能是字符串
interface IdFn<T> {id: () => T;ids: () => T[];
}const idObj: IdFn<number> = {id() { return 1 },ids() { return [1, 2] },
};
8.3 泛型函数
export { }
// 泛型---函数
type F1 = {id: number
}// 普通函数
function fn1<T>(a: T, b): T {return a + b
}
fn1<number>(1, 2)// extends
function fn2<T extends F1>(a: T): T {return a
}
fn2({ id: 1 })
9.枚举型-enum
enum Day {sunday,monday,tuesday,wednesday,thursday,friday,saturday
}
function day(Day: Day) {console.log(Day);}
day(Day.saturday)// 可以给初始值,不给就是从0开始
enum num {one = 1,two,     //2three,    //3four      //4
}

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

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

相关文章

Ubuntu Linux 入门指南:面向初学者

目录 1. Ubuntu Linux 简介 Ubuntu 的由来 Ubuntu 与其他 Linux 发行版的比较 Debian&#xff1a; Fedora&#xff1a; openSUSE&#xff1a; Arch Linux&#xff1a; Linux Mint&#xff1a; 第二部分&#xff1a;安装 Ubuntu 1. 准备安装 系统需求 创建 Ubuntu 启…

Spring Cloud Gateway + Nacos 灰度发布

前言 本文将会使用 SpringCloud Gateway 网关组件配合 Nacos 实现灰度发布&#xff08;金丝雀发布&#xff09; 环境搭建 创建子模块服务提供者 provider&#xff0c;网关模块 gateway 父项目 pom.xml 配置 <?xml version"1.0" encoding"UTF-8"?…

数据库-期末考前复习-第3章-关系数据库标准语言SQL

1、掌握SQL语言实现数据查询、定义、操纵、控制的关键字。 数据查询&#xff1a;使用SELECT关键字进行数据查询操作。数据定义&#xff1a;使用CREATE和ALTER关键字进行数据库、表、视图、索引等的定义操作。数据操纵&#xff1a;使用INSERT、DELETE和UPDATE关键字进行数据的插…

2312d,d调用中文C++库

调用方: import core.stdcpp.string; //用C的串. import std.stdio;extern(C){bool bb(ref string a); } bool cc(ref string a);void main() {string c"bb";string d"";writeln(c,d);bool acc(c);writeln(c,d);bool bbb(d);writeln(a,b); }C这边,根据需要…

阿里云服务器开放端口Oracle 1521方法教程

阿里云服务器ECS端口是在安全组设置的&#xff0c;Oracle数据库1521端口号开放是在安全组中添加规则来实现的&#xff0c;阿里云服务器网aliyunfuwuqi.com来详细说下阿里云服务器开放Oracle 1521端口方法教程&#xff1a; 阿里云服务器开放Oracle 1521端口 在阿里云服务器ECS…

微信小程序自定义步骤条效果

微信小程序自定义一个步骤条组件&#xff0c;自定义文字在下面&#xff0c;已完成和未完成和当前进度都不一样的样式&#xff0c;可点击上一步和下一步切换流程状态&#xff0c;效果如下。 这是视频效果&#xff1a; 前端实现步骤条效果 下面我们一步步实现编码&#xff0c;自定…

华为鸿蒙运行Hello World

前言&#xff1a; 从11月中旬开始通过B站帝心接触鸿蒙&#xff0c;至今一个半月左右不到&#xff0c;从小白到入坑&#xff0c;再到看官网案例&#xff0c;分析案例&#xff0c;了解技术点&#xff0c;还需要理清思路&#xff0c;再写博客&#xff0c;在决定写 &#xff1c;Har…

配置Docker私有仓库

# 打开要修改的文件 vi /etc/docker/daemon.json # 添加内容&#xff1a; "insecure-registries":["http://自己服务器的ip地址:设置的端口号"] # 重加载 systemctl daemon-reload # 重启docker systemctl restart docker在自己设定的文件夹内使用DockerCo…

仓库管理系统

基于SSM框架的仓库管理系统

.net8 AOT编绎-跨平台调用C#类库的新方法-函数导出

VB.NET AOT无法编绎DLL,微软的无能&#xff0c;正是你的机会 .net8 AOT编绎-跨平台调用C#类库的新方法-函数导出 1&#xff0c;C#命令行创建工程&#xff1a;dotnet new classlib -o CSharpDllExport 2&#xff0c;编写一个静态方法&#xff0c;并且为它打上UnmanagedCallersO…

PWM应用篇

一.什么是PWM 用图话&#xff0c;如下图所示&#xff1a; PWM&#xff08;脉冲宽度调制&#xff09;&#xff1a;这是一种模拟控制方式&#xff0c;可以根据载荷的变化来调制晶体管基极或MOS管栅极的偏置&#xff0c;实现晶体管或MOS管导通时间的改变&#xff0c;从而改变开关稳…

【STM32】STM32学习笔记-TIM输入捕获(17)

00. 目录 文章目录 00. 目录01. 输入捕获简介02. 频率测量03. 输入捕获通道04. 主从触发模式05. 输入捕获基本结构06. PWMI基本结构07. 其它08. 附录 01. 输入捕获简介 IC&#xff08;Input Capture&#xff09;输入捕获 输入捕获模式下&#xff0c;当通道输入引脚出现指定电平…

SpringBoot 一个注解实现数据脱敏

什么是数据脱敏 数据脱敏是指对某些敏感信息&#xff0c;例如姓名、身份证号码、手机号、固定电话、银行卡号、邮箱等个人信息&#xff0c;通过脱敏算法进行数据变形&#xff0c;以保护敏感隐私数据。 数据脱敏通常涉及以下几种主要方法&#xff1a; 替换&#xff1a; 将原始…

Redis:原理+项目实战——Redis实战1(session实现短信登录(并剖析问题))

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;Redis&#xff1a;原理速成项目实战——Redis的Java客户端 &#x1f4da;订阅专栏&#xff1a;Redis速成 希望文章对你们有所帮助…

普中STM32-PZ6806L开发板(HAL库函数实现-PWM呼吸灯)

简介 实现PWM呼吸灯。 主芯片 STM32F103ZET6呼吸灯引脚 : PC7电路原理图 LED8 电路图 LED8 与 主芯片连接图 其他知识 公式 PWM周期公式: Tpwm ( (ARR 1) * (PSC 1) ) / Tclk Tclk为定时器的输入时钟频率 Tout则为定时器溢出时间 ARR为计数周期 PSC为预分频器的值…

python 图像处理ORB算法

python 图像处理ORB算法 1.ORB&#xff08;Oriented FAST and Rotated BRIEF&#xff09;算法是一种高效的特征检测和描述符&#xff0c;它在图像匹配中有广泛的应用。以下是一个简单的使用Python和OpenCV实现ORB算法进行图像匹配的示例。 首先&#xff0c;你需要安装必要的库…

[XDCTF 2015]filemanager

[XDCTF 2015]filemanager 我们打开题目&#xff0c;大概看了下存在文件上传功能&#xff0c;并且可以执行重命名和删除文件的操作 扫描目录发现有源码泄露 我们逐一分析 upload.php <?php require_once "common.inc.php";if ($_FILES) {$file $_FILES["…

基于RetinaFace+Jetson Nano的智能门锁系统——第一篇(烧录系统)

文章目录 设备1.首先在PC端安装VMware虚拟机和Ubuntu182.安装VMware Tools3.安装SDK Manager 设备 Jetson NanoMicro-USB - USB-A电源线HDMI线屏幕PC一台 1.首先在PC端安装VMware虚拟机和Ubuntu18 VMware下载地址&#xff1a;https://www.vmware.com/cn/products/workstatio…

SpringBoot + MyBatis-Plus 实现分页操作详解

在SpringBoot项目中&#xff0c;结合MyBatis-Plus&#xff08;简称MP&#xff09;可以非常方便地实现分页功能。MP为开发者提供了分页插件PaginationInterceptor&#xff0c;只需简单配置即可使用。 一、配置分页插件 首先&#xff0c;在SpringBoot的配置类中&#xff08;通常…

软件测试/测试开发丨Windows系统chromedriver安装与环境变量配置

一、selenium 环境配置 1、chrome 浏览器的安装与配置 目前比较常用的浏览器是 Google Chrome 浏览器&#xff0c;所以本教程以 chrome 为主&#xff0c;后面简介一下其他浏览器的环境配置。 &#xff08;1&#xff09;chrome 下载: www.google.cn/chrome/ &#xff08;2&a…