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

news2024/11/18 5:38:21

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>('孙悟空')

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

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

相关文章

三国志14信息查询小程序(历史武将信息一览)制作更新过程05-后台接口的编写及调用

1&#xff0c;创建ASP.NET Web API项目 生成完毕&#xff0c;项目结构如下&#xff1a; 运行看一下&#xff1a; 2&#xff0c;后台接口编写 &#xff08;1&#xff09;在Models文件夹中新建一个sandata.cs文件&#xff08;就是上篇中武将信息表的model文件&#xff09; u…

CDN策略好坏的重要性

CDN加速技术在今天的互联网世界中扮演着至关重要的角色&#xff0c;它可以显著提高网站和应用程序的性能&#xff0c;同时也有助于提供更好的安全性。然而&#xff0c;设定安全策略的好坏对CDN的影响是一个关键的议题&#xff0c;本文将深入探讨这个问题。 CDN&#xff08;内容…

易货模式:返璞归真,以物换物。

在这个全球经济一体化的时代&#xff0c;贸易就像是一条熙熙攘攘的街道&#xff0c;各种商品和服务如同川流不息的车辆&#xff0c;往来穿梭。然而&#xff0c;这条街道上的交易形式却像是一个陈旧的迷宫&#xff0c;充满了曲折和困惑。直到有一天&#xff0c;一道新的贸易形式…

三款软件录制电脑屏幕视频

在这个视频信息快速发展的新时代&#xff0c;寻找好用的可以录制电脑屏幕视频的软件变得极其重要&#xff0c;因为制作视频已成为我们生活工作中不可或缺的一部分。 这些好用的录屏软件允许你录制摄像头、特定窗口、部分区域或整个桌面&#xff0c;同时还可对录制中的视频进行…

SAP MASS增加PR字段-删除标识

MASS->BUS2105->发现没有找到PR删除标识字段 SAP MASS增加PR字段-删除标识 1.tcode:MASSOBJ 选中BUS2105 点“应用程序表” 点“字段列表” 2.选中一行进行参考 3.修改字段为删除标识 LOEKZ&#xff0c;保存即可。 4.然后MASS操作&#xff0c;批量设置删除标识&…

Magic Bullet Suite v2024.0.1

Red Giant Magic Bullet Suite是一套AE视频后期处理软件&#xff0c;适用于Premiere Pro、After Effects等视频编辑软件。它提供了多种精美的视频特效和调色工具&#xff0c;使得视频制作更加专业和出色。 Magic Bullet Suite包括多个插件&#xff0c;其中最为知名的是Magic B…

【10】c++11新特性 —>move移动语义(1)

移动语义&#xff08;Move Semantics&#xff09;是C11引入的一个重要特性&#xff0c;它允许在不复制数据的情况下将资源&#xff08;如内存、指针等&#xff09;从一个对象转移到另一个对象&#xff0c;从而可以提高程序的性能。 在C11添加了右值引用&#xff0c;并且不能使用…

Binder 原理

1. Linux 和 Binder 的 IPC 通信原理 进程通信的简单模型如下所示&#xff1a; 1.1 内核空间&#xff08;Kernel space&#xff09;和用户空间&#xff08;User space&#xff09; 操作系统从逻辑上将虚拟空间划分为用户空间和内核空间。Linux 操作系统将较高的 1GB 供内核使…

369-HI-R-M-0-0-0-E 数字化转型如何改变DCS和SCADA

369-HI-R-M-0-0-0-E 数字化转型如何改变DCS和SCADA 高瞻远瞩的过程制造商正在投资数字化转型&#xff0c;而DCS和SCADA最终将成为这些努力的一部分。因此&#xff0c;它们与所有其他流程制造技术一起发展。DCS和SCADA系统的变化符合自动化金字塔正在进行的转变&#xff0c;它也…

助力工业数字化!TDengine 与恩菲 MIM+ 工业互联网平台实现兼容性互认

在云计算、物联网、5G等新兴技术快速发展的当下&#xff0c;制造企业想要运用新兴技术实现数字化转型&#xff0c;工业互联网平台的应用和打造是非常关键的转型要素。在工业互联网平台的发展中&#xff0c;数据处理上存在的问题一直都是令企业所头疼的&#xff0c;越来越多的案…

一对一交友App开发指南:从概念到上线的完整路线图

作为现代社交方式的重要组成部分&#xff0c;一对一交友App在满足人们社交需求方面扮演着重要角色。本文将为您呈现一对一交友App的开发指南&#xff0c;从概念到上线的完整路线图&#xff0c;帮助您构建一款成功的交友平台。 概念阶段 在一对一交友App开发的初期&#xff0c…

电子电表和智能电表有什么区别?

随着科技的不断发展&#xff0c;电力计量设备也在不断更新换代。电子电表和智能电表作为两种常见的电力计量设备&#xff0c;虽然在功能和性能上有一定的相似性&#xff0c;但在原理、应用场景等方面存在显著差异。接下来&#xff0c;小编将为大家详细解析电子电表和智能电表的…

linux地址空间

地址空间 内存空间示意图虚拟地址空间虚拟地址进程地址空间生命周期图解为什么要有地址空间呢&#xff1f; 小结 内存空间示意图 进程是在内存中运行的&#xff0c;为了便于管理&#xff0c;不同的数据会存储在不同的区域&#xff0c;因此内存就被分为几部分&#xff0c;如下图…

Java中访问修饰符

类和类之间的关系有如下几种: 以Hero为例自身&#xff1a;指的是Hero自己同包子类&#xff1a;ADHero这个类是Hero的子类&#xff0c;并且和Hero处于同一个包下不同包子类&#xff1a;Support这个类是Hero的子类&#xff0c;但是在另一个包下同包类&#xff1a; GiantDragon 这…

相关性分析——Pearson相关系数+热力图(附data和Python完整代码)

相关性分析&#xff1a;指对两个或多个具有相关性的变量元素进行分析 1.散点图和相关性热力图 2.相关系数 相关系数最早是由统计学家卡尔 皮尔逊设计的统计指标&#xff0c;是研究变量之间线性相关承兑的值&#xff0c;一般用字母 r 表示。 2.1Pearson相关系数 Pearson相关…

蓝桥杯算法竞赛系列第九章·巧解哈希题,用这3种数据类型足矣

你好&#xff0c;我是安然无虞。 文章目录 哈希基础概念哈希相关题目 有效的字母异位词 赎金信 字母异位词分组 两个数组的交集 快乐数 两数之和 四数相加 II 最长连续序列 查找共用字符 同构字符串 单词规律 字节跳动面试&#xff1a;缺失的第一个正数 哈喽哈喽&#xff0c;好…

vr航空博物馆综合展馆趣味VR科普体验

第十期广州科普开放日 10月28日周六上午九点半&#xff0c;广州卓远VR科普基地再次迎来一批前来体验的亲子家庭&#xff0c;陆续到达的市民朋友让整个基地都热闹了起来&#xff0c;他们在这里开启了一场别开生面的VR科普体验。 一期一会&#xff0c;趣味VR科普 10月广州科普开放…

Pinia 是什么?Redux、Vuex、Pinia 的区别?

结论先行&#xff1a; Pinia 是 Vue 官方团队开发的一个全新状态管理库。与 Redux、Vuex 相同&#xff0c;核心都是解决组件间的通信和数据的共享问题。 Pinia 和 Vuex 类似&#xff0c;但使用起来更加简单和直观。因为 Pinia 基于 Vue3 的 Composition 组合式 API 风格&…

【k8s】数据存储

一、数据存储的概念 pod的生命周期可能很短&#xff0c;会被频繁地创建和销毁。那么容器在销毁时&#xff0c;保存在容器中的数据也会被清除。这种结果对用户来说&#xff0c;在某些情况下是不乐意看到的。为了持久化保存容器的数据&#xff0c;kubernetes引入了Volume的概念。…

【Linux】 OpenSSH_9.3p2 升级到 OpenSSH_9.4p1(亲测无问题,建议收藏)

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…