TypeScript学习Ts的类型声明,关于类

TypeScript是什么?

  • 以JavaScript为基础构建的语言
  • 一个JavaScript的超集
  • 可以在任何支持JavaScript的平台上执行
  • TypeScript扩展了JavaScript并添加了类型
  • TS不能被JS解析器直接执行

TypeScript开发环境搭建

  • 下载Node.js
  • 安装Node.js
  • 使用npm全局安装TypeScript,输入:npm i -g typescript
  • 创建一个ts文件:进入ts文件所在目录,执行tsc xxx.ts

TypeScript类型声明

  • 例如let a:number,设置了变量类型之后,使用过程中a只能是数字。
  • 如果变量的声明和赋值是同时进行的,TS可以自动对变量进行类型检测let c = false
  • ts的类型声明同样可以用在参数上面。
function add(a:number,b:number){
    console.log(a+b)
}
add(1,1)
  • 变量类型
    在这里插入图片描述
    • any:如果给变量声明为any则相当于关闭了ts变量的声明检测,就和js中一样。如果声明变量时不声明类型,会自动检测为any类型(隐式any)。
    • unknown:any类型的变量可以赋值给任意变量,所以会影响到这个变量,但是unknown不会,如果想要赋值需要对这个变量进行类型判断之后再进行赋值或是使用类型断言之后再赋值。
    • void:通常用于函数的返回值类型的定义,表示没有返回值
    • never:通常用于函数的返回值类型的定义,表示永远都不会返回结果
let s:string
let e:unknown
if(typeof e === "string" ){
    s = e;
}
  • 可以使用|来连接多个类型(联合类型)
let b:number|string
b = 1
b = '1'
  • 类型断言:可以用来告诉解析器变量的实际类型。
s= e as string//方式一
s=<string>e//方式二
  • 返回值的类型定义
 function fun():void{
    return
}
  • 对象类型用来指定时,就是指定这个对象包含的属性以及属性的类型,在属性名后面加一个?代表是可选属性。但如果加上[propname:string]:any,除了已经设置了类型的属性,其他的都是可以是任意类型。另外枚举也是设置对象的类型,
 let f:{name:string,age?:number}
f={
    name:''
}


let f:{name:string,[propname:string]:any}
f={
    name:'',
    age:10
}
  • 函数设置
let g:(a:number,b:number)=>number
g = function(n1:number,n2:number):number{
    return 10
}
  • 数组类型定义,还有一种方式是元组,则是固定长度的数组
let h:number[]
h = [1,2,3]
let d:Array<number>
d = [4,5,6]
let i:[string,string]
i = ['1','2']
  • |表示或,&表示与,&的使用情景为let j :{name:string} & {age:number}
  • 类型的别名
type myType = 1 | 2  | 3 | 4
let m:myType = 1
m = 1

ts文件配置

  • 自动监视tsc app.ts -w
  • 监视整个文件夹的ts并进行编译,需要新建一个配置文件,tsconfig.json
  • include:指定哪些文件需要被监听执行"./src/**"**表示任意目录,*表示任意文件
  • exclude:指定哪些文件不包含,写法与include一致
  • compilerOptions:编译器的选项,他有很多子选项
    • target,用来ts被编译的es版本
    • module,指定要使用的模块化的规范
    • lib,用来指定项目中要使用的库
    • outDir,用来指定文件编译后所在的目录
    • outFile,将代码合成为一个文件
    • allowJs,是否对js文件进行编译,默认是false
    • checkJs,是否检查js代码
    • removeComments,是否移除注释,默认false
    • noEmit,不生成编译后的文件,默认false
    • noEmitOnError,存在错误时不生成编译后的文件
    • alwaysStrict,设置编译后的文件是否使用严格模式,默认为false
    • noImplicitAny,不允许隐式的any类型
    • noImplicitThis,不允许不明确类型的this
    • strictNullChecks,严格的检查空值
    • strict,严格检查的总开关,设置为true时所有严格检查都打开

类的介绍

要想面向对象,操作对象,首先便要拥有对象,那么下一个问题就是如何创建对象。要创建对象,必须要先定义类,所谓的类可以理解为对象的模型,程序中可以根据类创建指定类型的对象,举例来说:可以通过Person类来创建人的对象,通过Dog类创建狗的对象,通过Car类来创建汽车的对象,不同的类可以用来创建不同的对象。

定义类
class 类名 {
         属性名:类型;
         constructor(参数:类型){
           this.属性名 = 参数
         }
         方法名(){
         ....
         }
}
class Person{
    // 定义实例属性,需要创建对象实例进行访问
    name:string = '孙悟空'
    // 在属性前使用static关键字可以定义属性(静态属性,即不用创建对象实例能访问)
    static age:number = 12
    // 定义只读属性
    readonly sex:string = '男'
    // 定义只读静态属性
    static readonly love:string = '篮球'
    //  定义方法
    sayHello(){
        console.log('Hello!!!')
    }

}
const per = new Person()

console.log(per.name)
console.log(Person.age)
per.sayHello()
构造函数

在构造函数中通过传参并用this对类的属性进行赋值,才可以获得不同的实例对象。

class Dog{
    name:string
    age:number
    // 构造函数会在对象创建时调用时
    constructor(name:string,age:number) {
        // 在实例方法中的this代表的是当前的实例,所以可以通过this给当前实例对象添加属性
        this.name = name
        this.age = age
    }
}

const dog = new Dog('旺财',1)
console.log(dog)
继承
// 使Dog继承Animal的类,Animal被称为父类,Dog被称为子类,继承后子类会继承所有的父类
// 如果需要在子类中添加一些父类中没有的属性或方法,直接加就行
// 如果在子类中添加了和父类中相同的方法,子类的方法会覆盖父类的方法,这个称为方法的重写
// 父类还有一个名字,那就是超类,在类的方法中,super就是当前类的父类
abstract class Animal{
    name:string
    age:number
    // 构造函数会在对象创建时调用时
    constructor(name:string,age:number) {
        // 在实例方法中的this代表的是当前的实例,所以可以通过this给当前实例对象添加属性
        this.name = name
        this.age = age
    }
    sayHello(){
        console.log('叫')
    }
}
class Dog extends Animal{
    run(){
        console.log(this.name+'在跑')
    }
    sayHello() {
        console.log('汪汪汪')
    }
}

class Cat extends Animal{
    sayHello() {
        super.sayHello();
    }
    age:number
    constructor(name:string,age:number) {
        // 如果在子类中写了构造函数,在子类的构造函数中必须对父类的构造函数进行调用
        super(name,age);
        this.age = age
    }
}

const dog = new Dog('旺财',1)
console.log(dog)
dog.sayHello()
dog.run()
const cat = new Cat('喵喵',2)
console.log(cat)
cat.sayHello()
抽象类

以abstract开头的类是抽象类,抽象类与其他类区别不大,只是不能用来创建对象,抽象类就是专门用来被继承的类,抽象类中可以添加抽象方法,抽象方法用abstract开头没有方法体,抽象方法只能定义在抽象类中子类必须对抽象方法进行重写。

abstract class Animal{
    name:string
    age:number
    // 构造函数会在对象创建时调用时
    constructor(name:string,age:number) {
        // 在实例方法中的this代表的是当前的实例,所以可以通过this给当前实例对象添加属性
        this.name = name
        this.age = age
    }
    // 抽象方法用abstract开头没有方法体,抽象方法只能定义在抽象类中子类必须对抽象方法进行重写
    abstract sayHello():void
}
接口

接口就是用来定义一个类的结构,接口是可以重复声明的,接口中的所有方法都是抽象方法,定义类是,可以使类去实现一个接口,实现接口就是满足接口的要求,即是对类的限制。

// 接口用来定义一个类结构,用来顶一个类中应该包含哪些属性和方法,同时接口也可以当成类型声明去使用
// 接口是可以重复声明的,
interface myInterface{
    name:string
    age:number
}
interface myInterface{
    sex:string
}
const  obj:myInterface = {
    name:'sss',
    age:11,
    sex:'男'
}

//接口可以在定义类的适合去限制类的结构,接口中的属性都不能有实际的值,接口只定义对象的结构,而不考虑实际值
interface myInter{
    name:string
    sayHello():void
}

class Myclass implements  myInter{
    name:string
    constructor(name:string) {
        this.name = name
        console.log(name)
    }
    sayHello() {
        console.log(this.name+'在喵喵喵')
    }
}

class Dog2 extends Myclass{

}
const dog3 = new Dog2('旺财')
dog3.sayHello()
属性的封装

普通情况下类的属性可以被任意修改,会导致对象中的数据变得非常不安全。
TS可以再属性前添加属性的修饰符

  • public 修饰的属性可以再任意位置访问(修改) 是默认值
  • private 私有属性,私有属性只能在类的内部访问,可以通过在类中添加方法,使这个私有属性被外部访问,TS中可以设置getter方法的方式
  • protected 受包含的属性,只能在自己和自己子类中访问
    注意:可以直接将属性定义在构造函数中
class Friend{
    private _name:string
    private _age:number
    protected _sex:string
    constructor(name:string,age:number) {
        this._name = '孙悟空'
        this._age = 12
    }
    // 获取
    getName(){
        return this._name
    }

    // 修改
    setAge(value:number){
        if(value >= 0){
            this._age = value
        }
    }

    get name(){
        return this._name
    }

    set name(value:string){
        this._name = value
    }
}
const fri = new Friend('竹巴吉',11)
console.log(fri.getName())
fri.setAge(-11)
fri.name = '旺财'
console.log(fri)
class C{
    constructor(public name:string,public age:number) {
    }

}    
const c = new C('SUNWU',1)

泛型

在定义函数或类时,如果遇到不明确类型的属性就可以使用泛型,可以直接调用具有泛型的函数。

function fn<T>(a:T):T{
    return a
}
fn(10)//不指定泛型,TS可以自动对类进行推断
fn<string>('hello')//指定泛型
function fn2<T,K>(a:T,b:K):T{
    return a
}
fn2<number,string>(1,"1")
function fn3<T extends myInter>(a:T):string{
    return a.name
}
class MyClass<T>{
    name:T
    constructor(name:T) {
        this.name = name
    }
}
const mc = new MyClass<string>('孙悟空')

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

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

相关文章

BAM(Bottleneck Attention Module)

BAM&#xff08;Bottleneck Attention Module&#xff09;是一种用于计算机视觉领域的深度学习模型结构&#xff0c;它旨在提高神经网络对图像的特征提取和感受野处理能力。BAM模块引入了通道注意力机制&#xff0c;能够自适应地加强或减弱不同通道的特征响应&#xff0c;从而提…

python用tkinter随机数猜数字大小

python用tkinter随机数猜数字大小 没事做&#xff0c;看到好多人用scratch做的猜大小的示例&#xff0c;也用python的tkinter搞一个猜大小的代码玩玩。 猜数字代码 from tkinter import * from random import randint# 定义确定按钮的点击事件 def hit(x,y):global s_Labprint(…

EPLAN中的电位,编号和报表

一、电位-eplan路由的理论基础 电位&#xff0c;信号和网络是eplan中的隐藏三君子。官网帮助中对电位和信号的解释如下&#xff1a; 在 EPLAN 中区分电位和信号。通过电位使连接属性的默认值和电位信息进入到项目中。 通过电位定义点或电位连接点定义一个电位或信号。此处录入…

玄子Share-Git 入门手册

玄子Share-Git 入门手册 简单介绍 Git Git 是一个自由和开源的分布式版本控制系统&#xff0c;旨在快速和高效地处理从小型到大型的所有项目 Git 简单易学&#xff0c;占用空间小&#xff0c;性能快如闪电。它比Subversion、CVS、Perforce和ClearCase等SCM工具更有优势&…

ASO优化之如何进行ios和Android关键词研究2

在关键词研究的这个阶段&#xff0c;提出尽可能多的想法非常重要。不要太在意我们所提出的关键词质量&#xff0c;首先要关注数量。为了最大限度地增加关键的数量&#xff0c;我们将向大家介绍拓展关键词的方法。 1、了解应用程序的作用。 关键词需要描述用户使用我们的应用所…

hub.docker访问不了的问题(一步解决)

暂时我也不清楚&#xff0c;但是下面这个网址可以用(可以先用着)Docker Hub Container Image Library | App Containerization (axlinux.top)https://hub.axlinux.top/

能谈一下 CAS 机制吗

&#xff08;本文摘自mic老师面试文档&#xff09; 一个小伙伴私信我&#xff0c;他说遇到了一个关于 CAS 机制的问题&#xff0c;他以为面试官问的是 CAS 实现单点登录。 心想&#xff0c;这个问题我熟啊&#xff0c;然后就按照单点登录的思路去回答&#xff0c;结果面试官一…

美格智能5G RedCap模组顺利完成中国联通5G物联网OPENLAB开放实验室认证

近日&#xff0c;美格智能5G RedCap模组SRM813Q顺利通过中国联通5G物联网OPENLAB开放实验室端到端的测试验收&#xff0c;并获得OPENLAB实验室的认证证书。这标志着该模组产品各项性能均已符合RedCap商用标准&#xff0c;为5G RedCap规模商用奠定了坚实基础。 中国联通5G物联网…

Element-Plus表单label实现两端对齐(左右对齐)

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 在使用Element-Plus的form的时候,label只有左右,居中对齐&#xff0c;缺少两端对齐的选项 故研究一下如何实现&#xff0c;其他方法也试过&#xff0c;都没效果&#xff0c;我在别人的基础上又研究了一…

【LeetCode: 54. 螺旋矩阵 | 模拟】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

前端学习基础知识

环境搭建 windows环境 nodejs版本管理工具NVM nvm全英文也叫node.js version management&#xff0c;是一个nodejs的版本管理工具。nvm和n都是node.js版本管理工具&#xff0c;为了解决node.js各种版本存在不兼容现象可以通过它可以安装和切换不同版本的node.js。 安装学习访…

Leetcode刷题详解——N 皇后

1. 题目链接&#xff1a;51. N 皇后 2. 题目描述&#xff1a; 按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上&#xff0c;并且使皇后彼此之间不能相互攻击。 给你一个整数 n …

qml编译多语言

qml编译多语言 windows下转换将qml需要转换内容提取转为.ts文件将.ts文件转换为.qm文件.qm文件可以用QTranslator::load进行使用 windows下转换 打开QT自带的 MinGW 控制台 将qml需要转换内容提取转为.ts文件 qml转换字段内容需要qsTr() 将qml转为 filename.ts 文件 转到程序…

电脑怎么录制视频,录制的视频怎么剪辑?

在现今数字化的时代&#xff0c;视频成为了人们日常生活中不可或缺的一部分。因此&#xff0c;对于一些需要制作视频教程、录制游戏或者是进行视频演示的人来说&#xff0c;电脑录屏已经成为了一个必不可少的工具。那么&#xff0c;对于这些人来说&#xff0c;如何选择一个好用…

Hikyuu 1.3.0 发布,高性能量化交易研究框架

Hikyuu 是一款基于 C/Python 的高性能开源量化交易研究框架&#xff0c;用于快速策略分析及回测。与其他量化平台或回测软件相比&#xff0c;具备&#xff1a; 超快的回测速度&#xff1b;对完整的系统交易理念进行抽象&#xff0c;并分解为不同的组件&#xff0c;通过重用不同…

C# Dictionary与List的用法区别与联系

C#是一门广泛应用于软件开发的编程语言&#xff0c;其中Dictionary和List是两种常用的集合类型。它们在存储和操作数据时有着不同的特点和用途。本文将详细探讨C# Dictionary和List的用法区别与联系&#xff0c;并通过代码示例进行对比&#xff0c;以帮助读者更好地选择适合自己…

React进阶之路(四)-- React-router-v6、Mobx

文章目录 ReactRouter前置基本使用核心内置组件说明编程式导航路由传参嵌套路由默认二级路由404路由配置集中式路由配置 Mobx什么是Mobx环境配置基础使用计算属性&#xff08;衍生状态&#xff09;异步数据处理模块化多组件数据共享 ReactRouter 前置 在一开始前端开发都是单…

电力输送、材料和互连领域即将发生巨大变化

在设备互连方面&#xff0c;铜无可匹敌。其低电阻率和高可靠性为业界提供了出色的片上互连和芯片间连线服务。但在逻辑芯片中&#xff0c;随着互连堆栈上升到14级范围&#xff0c;并且阻容(RC)延迟在总延迟中所占的比例越来越大&#xff0c;晶圆厂正在寻求替代金属来维持性能。…

使用ffmpeg 压缩视频

我有一批1080p的视频,在网上播放占用空间太大,需要进行压缩以后再上传,下面是记录一下ffmpeg命令的使用情况 原视频大小:288mb --压缩加修改分辨率 640p ffmpeg -y -i C4995.mp4 -vcodec libx264 -crf 18 -s vga C4995\C4995_2.MP4 -y: 强制覆盖 -i :输入文件 -vcodec lib…

vue3+antv2.x的画布

报错信息&#xff1a; TypeError: Cannot destructure property component of registry_1.shapeMaps[node.shape] as it is undefined. at VueShapeView.renderVueComponent (http://192.168.10.35:9029/node_modules/.vite/deps/antv_x6-vue-shape.js?v49fbfab0:5569:19…