TypeScript学习

TypeScript 是一种基于 JavaScript 构建的强类型编程语言。

ts不是js的替代只是为了大型项目更好的扩展，微软编写的一个强类型的脚本。

ts中对参数，变量，返回值 都有限制，不像js那么随意，类的定义也更严格，其中包含接口，抽象类，继承。

1.类型声明

let a: string //变量a只能存储字符串
let b: number //变量a只能存储数值
let c: boolean //变量a只能存储布尔值

a = 'hello'
a = 100 //警告：不能将类型“number”分配给类型“string”

b = 666
b = '你好'//警告：不能将类型“string”分配给类型“number”

c = true
c = 666 //警告：不能将类型“number”分配给类型“boolean”

// 参数x必须是数字，参数y也必须是数字，函数返回值也必须是数字
function demo(x:number,y:number):number{
return x + y
}

demo(100,200)
demo(100,'200') //警告：类型“string”的参数不能赋给类型“number”的参数
demo(100,200,300) //警告：应有 2 个参数，但获得 3 个
demo(100) //警告：应有 2 个参数，但获得 1 个

2.类型推断

let d = -99 //TypeScript会推断出变量d的类型是数字
d = false //警告：不能将类型“boolean”分配给类型“number”

3.类型总览


4.常⽤类型
  4.1 字⾯量

let a: '你好' //a的值只能为字符串“你好”
let b: 100 //b的值只能为数字100
a = '欢迎'//警告：不能将类型“"欢迎"”分配给类型“"你好"”
b = 200 //警告：不能将类型“200”分配给类型“100”
let gender: '男'|'⼥' //定义⼀个gender变量，值只能为字符串“男”或“⼥”
gender = '男'
gender = '未知' //不能将类型“"未知"”分配给类型“"男" | "⼥"”

  4.2 any

any 的含义是：任意类型，⼀旦将变量类型限制为 any ，那就意味着放弃了对该变量的类型检查。

//明确的表示a的类型是any —— 显式的any
let a: any
//以下对a的赋值，均⽆警告
a = 100
a = '你好'
a = false
//没有明确的表示b的类型是any，但TS主动推断了出来 —— 隐式的any
let b
//以下对b的赋值，均⽆警告
b = 100
b = '你好'
b = false

注意点： any 类型的变量，可以赋值给任意类型的变量

/* 注意点：any类型的变量，可以赋值给任意类型的变量 */
let a
let x: string
x = a // ⽆警告

4.3 unknown

any 后点任何的东⻄都不会报错，⽽ unknown 正好与之相反。

let str1: string = 'hello'
str1.toUpperCase() //⽆警告
let str2: any = 'hello'
str2.toUpperCase() //⽆警告
let str3: unknown = 'hello';
str3.toUpperCase() //警告：“str3”的类型为“未知”
// 使⽤断⾔强制指定str3的类型为string
(str3 as string).toUpperCase() //⽆警告

4.4 never

never 的含义是：任何值都不是，简⾔之就是不能有值， undefined 、 null 、 '' 、 0 都不
⾏！
1. ⼏乎不⽤never 去直接限制变量，因为没有意义，例如：

// 限制demo函数不需要有任何返回值，任何值都不⾏，像undeifned、null都不⾏
function demo():never{
throw new Error('程序异常退出')
}

4.5 void


4.6 object

关于Object 与 object ，直接说结论：在类型限制时， Object ⼏乎不⽤，因为范围太⼤了，⽆
意义。

1. object 的含义：任何【⾮原始值类型】，包括：对象、函数、数组等，限制的范围⽐较宽泛，⽤的少。

let a:object //a的值可以是任何【⾮原始值类型】，包括：对象、函数、数组等
// 以下代码，是将【⾮原始类型】赋给a，所以均⽆警告
a = {}
a = {name:'张三'}
a = [1,3,5,7,9]
a = function(){}
// 以下代码，是将【原始类型】赋给a，有警告
a = null // 警告：不能将类型“null”分配给类型“object”
a = undefined // 警告：不能将类型“undefined”分配给类型“object”
a = 1 // 警告：不能将类型“number”分配给类型“object”
a = true // 警告：不能将类型“boolean”分配给类型“object”
a = '你好' // 警告：不能将类型“string”分配给类型“object

2. Object 的含义： Object 的实例对象，限制的范围太⼤了，⼏乎不⽤。

let a:Object //a的值必须是Object的实例对象，
// 以下代码，均⽆警告，因为给a赋的值，都是Object的实例对象
a = {}
a = {name:'张三'}
a = [1,3,5,7,9]
a = function(){}
a = 1 // 1不是Object的实例对象，但其包装对象是Object的实例
a = true // truue不是Object的实例对象，但其包装对象是Object的实例
a = '你好' // “你好”不是Object的实例对象，但其包装对象是Object的实例
// 以下代码均有警告
a = null // 警告：不能将类型“null”分配给类型“Object”
a = undefined // 警告：不能将类型“undefined”分配给类型“Object”

3. 实际开发中，限制⼀般对象，通常使⽤以下形式

// 限制person对象的具体内容，使⽤【,】分隔，问号代表可选属性
let person: { name: string, age?: number}
// 限制car对象的具体内容，使⽤【;】分隔，必须有price和color属性，其他属性不去限制，有
没有都⾏
let car: { price: number; color: string; [k:string]:any}
// 限制student对象的具体内容，使⽤【回⻋】分隔
let student: {
id: string
grade:number
}
// 以下代码均⽆警告
person = {name:'张三',age:18}
person = {name:'李四'}
car = {price:100,color:'红⾊'}
student = {id:'tetqw76te01',grade:3}

4. 限制函数的参数、返回值，使⽤以下形式

let demo: (a: number, b: number) => number
demo = function(x,y) {
return x+y
}

5. 限制数组，使⽤以下形式

let arr1: string[] // 该⾏代码等价于： let arr1: Array<string>
let arr2: number[] // 该⾏代码等价于： let arr2: Array<number>
arr1 = ['a','b','c']
arr2 = [1,3,5,7,9]

4.7 tuple

tuple 就是⼀个⻓度固定的数组。

let t: [string,number]
t = ['hello',123]
// 警告，不能将类型“[string, number, boolean]”分配给类型“[string, number]”
t = ['hello',123,false]


4.8 enum

enum 是枚举

// 定义⼀个枚举
enum Color {
Red,
Blue,
Black,
Gold
}
// 定义⼀个枚举，并指定其初识数值
enum Color2 {
Red = 6,
Blue,
Black,
Gold
}
console.log(Color)
/*
{
0: 'Red',
1: 'Blue',
2: 'Black',
3: 'Gold',
Red: 0,
Blue: 1,
Black: 2,
Gold: 3
}
*/
console.log(Color2)
/*
{
6: 'Red',
7: 'Blue',
8: 'Black',
9: 'Gold',
Red: 6,
Blue: 7,
Black: 8,
Gold: 9
}
*/
// 定义⼀个phone变量，并设置对⻬进⾏限制
let phone: {name:string,price:number,color:Color}
phone = {name:'华为Mate60',price:6500,color:Color.Red}
phone = {name:'iPhone15Pro',price:7999,color:Color.Blue}
if(phone.color === Color.Red){
console.log('⼿机是红⾊的')
}

5.⾃定义类型

⾃定义类型，可以更灵活的限制类型

// 性别的枚举
enum Gender {
Male,
Female
}
// ⾃定义⼀个年级类型（⾼⼀、⾼⼆、⾼三）
type Grade = 1 | 2 | 3
// ⾃定义⼀个学⽣类型
type Student = {
name:string,
age:number,
gender:Gender,
grade:Grade
}
// 定义两个学⽣变量：s1、s2
let s1:Student
let s2:Student
s1 = {name:'张三',age:18,gender:Gender.Male,grade:1}
s2 = {name:'李四',age:18,gender:Gender.Female,grade:2}

6.抽象类

常规类：

class Person {
name: string
age: number
constructor(name:string,age:number){
this.name = name
this.age = age
}
}
const p1 = new Person('张三',18)
const p2 = new Person('李四',19)
console.log(p1)
console.log(p2)

继承：

// Person类
class Person { }
// Teacher类继承Person
class Teacher extends Person { }
// Student类继承Person
class Student extends Person { }
// Person实例
const p1 = new Person('周杰伦',38)
// Student实例
const s1 = new Student('张同学',18)
const s2 = new Student('李同学',20)
// Teacher实例
const t1 = new Teacher('刘⽼师',40)
const t2 = new Teacher('孙⽼师',50)

抽象类：不能去实例化，但可以被别⼈继承，抽象类⾥有抽象⽅法

// Person（抽象类）
abstract class Person { }
// Teacher类继承Person
class Teacher extends Person {
// 构造器
constructor(name: string,age: number){
super(name,age)
}
// ⽅法
speak(){
console.log('你好！我是⽼师:',this.name)
}
}
// Student类继承Person
class Student extends Person { }
// Person实例
// const p1 = new Person('周杰伦',38) // 由于Person是抽象类，所以此处不可以new Perso
n的实例对象

7.接⼝

接⼝梳理：
1. 接⼝⽤于限制⼀个类中包含哪些属性和⽅法：

// Person接⼝
interface Person {
// 属性声明
name: string
age: number
// ⽅法声明
speak():void
}
// Teacher实现Person接⼝
class Teacher implements Person {
name: string
age: number
// 构造器
constructor(name: string,age: number){
this.name = name
this.age = age
}
// ⽅法
speak(){
console.log('你好！我是⽼师:',this.name)
}
}

2. 接⼝是可以重复声明的：

// Person接⼝
interface PersonInter {
// 属性声明
name: string
age: number
}
// Person接⼝
interface PersonInter {
// ⽅法声明
speak():void
}
// Person类继承PersonInter
class Person implements PersonInter {
name: string
age: number
// 构造器
constructor(name: string,age: number){
this.name = name
this.age = age
}
// ⽅法
speak(){
console.log('你好！我是⽼师:',this.name)
}
}

3. 【接⼝】与【⾃定义类型】的区别：

// Person接⼝
interface Person {
// 应该具有的属性
name: string
age: number
// 应该具有的⽅法
speak():void
}
// Person类型
/*
type Person = {
// 应该具有的属性
name: string
age: number
// 应该具有的⽅法
speak():void
}
*/
// 接⼝当成⾃定义类型去使⽤
let person:Person = {
name:'张三',
age:18,
speak(){
console.log('你好！')
}
}

4. 【接⼝】与【抽象类】的区别：

// 抽象类 —— Person
abstract class Person {
// 属性
name:string
age:number
// 构造器
constructor(name:string,age:number){
this.name = name
this.age = age
}
// 抽象⽅法
abstract speak():void
// 普通⽅法
walk(){
console.log('我在⾏⾛中....')
}
}
// Teacher类继承抽象类Person
class Teacher extends Person {
constructor(name:string,age:number){
super(name,age)
}
speak(){
console.log(`我是⽼师，我的名字是${this.name}`)
}
}

接⼝举例：

// 接⼝ —— Person，只能包含抽象⽅法
interface Person {
// 属性，不写具体值
name:string
age:number
// ⽅法，不写具体实现
speak():void
}
// 创建Teacher类实现Person接⼝
class Teacher implements Person {
name:string
age:number
constructor(name:string,age:number){
this.name = name
this.age = age
}
speak(){
console.log('我在⻜快的⾏⾛中......')
}
}

8.属性修饰符


9.泛型

定义⼀个函数或类时，有些情况下⽆法确定其中要使⽤的具体类型（返回值、参数、属性的类型不能确
定），此时就需要泛型了
举例： <T> 就是泛型，（不⼀定⾮叫 T ），设置泛型后即可在函数中使⽤ T 来表示该类型：

function test<T>(arg: T): T{
return arg;
}
// 不指名类型，TS会⾃动推断出来
test(10)
// 指名具体的类型
test<number>(10)

泛型可以写多个：

function test<T, K>(a: T, b: K): K{
return b;
}
// 为多个泛型指定具体⾃值
test<number, string>(10, "hello");

类中同样可以使⽤泛型：

class MyClass<T>{
prop: T;
constructor(prop: T){
this.prop = prop;
}
}

也可以对泛型的范围进⾏约束：

interface Demo{
length: number;
}
// 泛型T必须是MyInter的⼦类，即：必须拥有length属性
function test<T extends Demo>(arg: T): number{
return arg.length;
}
test(10) // 类型“number”的参数不能赋给类型“Demo”的参数
test({name:'张三'}) // 类型“{ name: string; }”的参数不能赋给类型“Demo”的参数
test('123')
test({name:'张三',length:10})

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

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

相关文章

vscode右键菜单栏功能说明

vscode右键菜单栏功能说明

本文主要介绍在vscode中的python代码文件中&#xff0c;单击鼠标右键出现的菜单栏功能。部分功能可能与安装插件相关&#xff0c;主要用于个人查阅。 单击右键菜单栏如下&#xff1a; GO to xx类型命令 “Go to Definition”、“Go to Declaration”、"Go to Type Defin…
阅读更多...
数据结构（C语言）代码实现（十）——链队列循环队列

数据结构（C语言）代码实现（十）——链队列循环队列

目录 参考资料 链队列的实现 LinkQueue.h LinkQueue.cpp 测试函数test.cpp 测试结果 循环队列的实现&#xff08;最小操作子集&#xff09; 完整代码 测试结果 参考资料 数据结构严蔚敏版 链队列的实现 LinkQueue.h #pragma once #include <cstdio> #incl…
阅读更多...
springboot之jdbc、druid、mybatis

springboot之jdbc、druid、mybatis

springboot整合jdbc spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://192.168.52.3:3306/mybatis?useUnicodetrue&characterEncodingutf-8&serverTimezoneUTCusername: rootpassword: root<?xml version"1.0" encodi…
阅读更多...
SpringBoot+Vue全栈开发-刘老师教编程（b站）（三）

SpringBoot+Vue全栈开发-刘老师教编程（b站）（三）

vue框架快速上手 1.导入vue的脚本文件 2.声明要被vue所控制的DOM区域 3.创建vue的实例对象 1.基本用法 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content&…
阅读更多...
2024.2.28

2024.2.28

什么是回调函数&#xff1a;回调函数就是一个参数&#xff0c;将这个函数作为参数传到另一个函数里面&#xff0c;当那个函数执行完之后&#xff0c; 再执行传进去的这个函数。这个过程就叫做回调 结构体和共用体的区别&#xff1a;结构体的各个成员会占用不同的内存&#xff…
阅读更多...
【ArcGIS】基本概念-空间参考与变换

【ArcGIS】基本概念-空间参考与变换

ArcGIS基本概念-空间参考与变换 1 空间参考与地图投影1.1 空间参考1.2 大地坐标系&#xff08;地理坐标系&#xff09;1.3 投影坐标系总结 2 投影变换预处理2.1 定义投影2.2 转换自定义地理&#xff08;坐标&#xff09;变换2.3 转换坐标记法 3 投影变换3.1 矢量数据的投影变换…
阅读更多...
Django模型进阶(Mysql配置、模型管理，表关联、一对一、一对多，多对多）

Django模型进阶(Mysql配置、模型管理，表关联、一对一、一对多，多对多）

模型进阶&#xff1a; Mysql配置&#xff1a; 1.安装mysql 2安装MySQL驱动&#xff0c;使⽤mysqlclient pip install mysqlclient pip install -i https://pypi.douban.com/simple mysqlclientLinux Ubuntu下需要先安装&#xff1a;apt install libmysqld-dev 再安装: apt…
阅读更多...
[spark] RDD 编程指南（翻译）

[spark] RDD 编程指南（翻译）

Overview 从高层次来看&#xff0c;每个 Spark 应用程序都包含一个driver program&#xff0c;该程序运行用户的main方法并在集群上执行各种并行操作。 Spark 提供的主要抽象是 resilient distributed dataset&#xff08;RDD)&#xff0c;它是跨集群节点分区的元素集合&…
阅读更多...
【C++】结构体类

【C++】结构体类

文章目录 问题提出一、结构体1.1结构体的声明1.1.1正常定义的结构体1.1.2在声明结构体的同时声明变量1.1.3typedef1.1.4成员变量 1.2结构体成员变量的使用1.2.1成员运算符 .1.2.2成员运算符 -> 1.3内存对齐1.3.1什么是内存对齐1.3.2内存对齐原则1.3.3结构体成员的定义顺序 1…
阅读更多...
ISP代理是什么？怎么用？

ISP代理是什么？怎么用？

在跨境出海业务中&#xff0c;代理IP对于您的在线任务至关重要&#xff0c;尤其是对于那些运行多个帐户的人来说。为您的帐户选择正确类型的代理对于确保帐户安全非常重要&#xff0c;劣质的IP容易使账号遭受封号风险。IPFoxy的多种代理IP类型应用范围各有侧重&#xff0c;其中…
阅读更多...
Java 小项目开发日记 02（用户接口的开发）

Java 小项目开发日记 02（用户接口的开发）

Java 小项目开发日记 02&#xff08;用户接口的开发&#xff09; 项目目录 配置文件&#xff08;pom.xml&#xff09; <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation&q…
阅读更多...
2007-2022年上市公司绿色化转型数据（仅结果）

2007-2022年上市公司绿色化转型数据（仅结果）

2007-2022年上市公司绿色化转型数据&#xff08;仅结果&#xff09; 1、时间&#xff1a;2007-2022年 2、范围&#xff1a;上市公司 3、来源&#xff1a;上市公司年报、上市公司社会责任报告、上市公司网站信息 4、指标&#xff1a;证券代码、年份、绿色化转型 5、方法说明…
阅读更多...
【JAVA日志】关于日志系统的架构讨论

【JAVA日志】关于日志系统的架构讨论

目录 1.日志系统概述 2.环境搭建 3.应用如何推日志到MQ 4.logstash如何去MQ中取日志 5.如何兼顾分布式链路追踪 1.日志系统概述 关于日志系统&#xff0c;其要支撑的核心能力无非是日志的存储以及查看&#xff0c;最好的查看方式当然是实现可视化。目前市面上有成熟的解决…
阅读更多...
【Go语言】Go语言中的数组

【Go语言】Go语言中的数组

Go语言中的数组 1 数组的初始化和定义 在 Go 语言中&#xff0c;数组是固定长度的、同一类型的数据集合。数组中包含的每个数据项被称为数组元素&#xff0c;一个数组包含的元素个数被称为数组的长度。 在 Go 语言中&#xff0c;你可以通过 [] 来标识数组类型&#xff0c;但…
阅读更多...
瑞_Redis_Redis命令

瑞_Redis_Redis命令

文章目录 1 Redis命令Redis数据结构Redis 的 key 的层级结构1.0 Redis通用命令1.0.1 KEYS1.0.2 DEL1.0.3 EXISTS1.0.4 EXPIRE1.0.5 TTL 1.1 String类型1.1.0 String类型的常见命令1.1.1 SET 和 GET1.1.2 MSET 和 MGET1.1.3 INCR和INCRBY和DECY1.1.4 SETNX1.1.5 SETEX 1.2 Hash类…
阅读更多...
Java+SpringBoot+Vue+MySQL：狱内罪犯危险性评估系统全栈开发

Java+SpringBoot+Vue+MySQL：狱内罪犯危险性评估系统全栈开发

✍✍计算机毕业编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java、…
阅读更多...
5.WEB渗透测试-前置基础知识-常用的dos命令

5.WEB渗透测试-前置基础知识-常用的dos命令

内容参考于&#xff1a; 易锦网校会员专享课 上一篇内容&#xff1a;4.WEB渗透测试-前置基础知识-快速搭建渗透环境&#xff08;下&#xff09;-CSDN博客 常用的100个CMD指令 1.gpedit.msc—–组策略 2. sndrec32——-录音机 3. Nslookup——-IP地址侦测器 &#xff0c;是一个…
阅读更多...
ruoyi框架学习

ruoyi框架学习

RBAC模型 数据字典 拦截器 token没有&#xff0c;submit&#xff0c;request.js中&#xff0c;前端前置拦截器&#xff0c;响应拦截器 后台 注解
阅读更多...
35岁了，还能转行做鸿蒙开发吗？

35岁了，还能转行做鸿蒙开发吗？

随着互联网行业的蓬勃发展时&#xff0c;不止从何时网上开始就有了&#xff1a;“程序员30岁危机、35岁中年危机”这种类似的话题&#xff0c;可以说影响了不少程序员。 人们一般常说的是三十而立&#xff0c;一个人应该对生活、职业、个人信仰等方面有了明确的认识和规划&…
阅读更多...
【Linux】HTTP协议

【Linux】HTTP协议

目录 预备知识 认识url urlencode和urldecode http和https的区别 http request 和 http response http request格式: http reponse格式&#xff1a; HTTP的请求方法 HTTP的状态码 HTTP常见Header cookie文件 cookie是什么 问题 解决方案 预备知识 认识url 平时…
阅读更多...
最新文章

Copyright @ 2022~2023