typescript简介和类型以及编译和打包配置以及类与对象的介绍

news2024/9/30 17:37:07

介绍ts

JS 的超集 javascript 轻量级的变量约束 支持在任何支持JavaScript的平台执行 添加很多类型 提高大型项目的可维护性
最终会编译成JS。类似于预编译的处理类似于less,scss

搭建开发环境

1.下载Node.js
64位: https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64
32位: https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86
2.安装Node.js
3.使用npm全局安装typescript
。进入命令行
。输入: npm i-g typescript
4.创建一个ts文件
5.使用tsc对ts文件进行编译
进入命令行
进入ts文件所在目录
执行命令:
对ts进行解析
tsc xxx.ts

ts类型

：后面指定类型 直接赋值ts可以检测到类型

let a:number
 //指定a的类型为number
let c:boolean=true
//指定完变量直接赋值
//可以把boolean去掉 ts可以对变量进行类型检测
function sum(a:number,b:number){
    return a+b;
}

在这里插入图片描述
any和unkown的区别是unkown不能直接赋值给其他变量 需要转化

let z:string
//用|实现多个类型(联合类型)
let q:'male'| 'female'
//对其关闭了类型检测
//如果不写ang 称为隐式的ang
let t:any
let s:string
s=t
//ang的变量也可以影响别的变量
let e:unknown
let p:string
//p=e
// 1 unkown不能直接赋值给其他变量
if(typeof e==='string'){
    s=e
}
// 2 类型断言
s=e as string
// s=<string> e

ts对象

构造函数和对象的声明

let a2:{name:String}
//语法{属性名:属性值}
// 属性名后面加上？:代表可选的
let b:{name:string,age?:number}
b={name:'qaq',age:18}
//[propeName:string]:ang表示任意类型的属性
let c2:{name:string,[propName:string]:any}
c2={name:"qqq",age:18,gender:'男'}
//设置函数结构体的类型申明
//(形参：类型，形参：类型)=>返回值
let d:(a:number,b:number)=>number
d=function(a:number,b:number):number{
    return 10
}

数组

//字符串数组
let f:string[]
f=['a','b','c']
let g:Array<number>
g=[1,2,3]

编译的配置

在这里插入图片描述
配置文件
tsconfig.json是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译
“include” 用来指定哪些ts 文件需要被编译
路径: ** 表示任意目录
*表示任意文件
"exclude"不需要被编译的
默认值:[“node_modules”，“bower_components”，“jspm_packages”]
罗列了一些常见的配置

{
    "include": [
        "./src/**/*"
    ],
    "exclude": [
    "./src/hello/**/*",
    "node_modules",
    "bower_components",
    "jspm_packages"]
    ,
    "compilerOptions": {
        "target":"ES6",
        "module": "ES2015",
        // "lib": ["es5","DOM"],
       //指定编译后文件 所有全局作用域中会合并一个 不能使用模块化
       //"outDir": "./dist/app.js" module": "system",
        "outDir": "./dist",
        //对js不编译
        "allowJs":false,
        //是否检查js代码
        "checkJs": false,
        //注释
        "removeComments": false,
        //不生成编译后的文件
        "noEmit": false,
        //有错误不生成编译后的文件
        "noEmitOnError": true,
        //严格模式"use strict";
        "alwaysStrict": true,
        //不允许隐式类型
        "noImplicitAny": false,
        //不允许不明确的this
        "noImplicitThis": false,
        //所有检查 建议设置为true
        "strict": false
    }
}

类

有一说一 ts和java很像 都是面向对象编程
下面创建了一个person类 包含了方法和属性

//类包含了属性和方法
class Person{
    name:String='哈哈哈'
    age:Number=18
    //类属性
   static sex:Number=18
   //只读的属性
   readonly sex1:Number=18
   //------方法
   sayHello(){
    console.log('hello');
    
   }

}
const pre=new Person();
//直接定义的是实例属性 如pre.age
//加上static是类属性 静态属性
console.log(Person.sex);

console.log(pre.age);
console.log(pre.sayHello);

构造函数

constructor的this就指向当前实例 可以通过this往对象中添加属性

class Dog{
    name:string;
    age:number;
    constructor(name:string,age:number){
        //在实例方法中 this表示当前实例
        //构造函数中当前对象就指向实例对象 可以通过this
        //向新建的对象中添加属性
        this.name=name;
        this.age=age;
    }
    break(){
        alert('wang')
    }
}
const dog1=new Dog('小黑',4)

使用extends继承

class 子类 extends 父类 可以通过这个语句继承子类的方法和属性 有父类没有的方法同时也可以对父类的方法覆盖

 (function(){
    class Anima{
        name:string
        age:number
        constructor(name:string,age:number){
            this.name=name;
            this.age=age;
        }
        sayHello(){
            console.log('qaq');
            
        }
    }
    class Dog extends Anima{
        //继承
        //子类独有
        run(){
            console.log('hahah',`${this.name}`);
            
        }
        //子类覆盖掉父类的方法 叫重写
        sayHello(): void {
            
        }
    }
    const dog=new Dog('1111',1);
 })

super关键字 对父类的构造函数的调用

(function(){
    class Anima{
        name:string
        age:number
        constructor(name:string,age:number){
            this.name=name;
            this.age=age;
        }
        sayHello(){
            console.log('qaq');
            
        }
    }
    class Dog extends Anima{
        constructor(name:string,age:number){
            //如果在子类写了构造函数 在子类构造函数中必须对父类的构造函数进行调用
            super(name,age)//调用父类的构造函数
            this.age=age
        }
        sayHello(): void {
            super.sayHello()
            //在类方法中 super就表示当前类的父类
        }
    }
})()

接口

相当于定义一个标准 使得类按照这个标准去创建 接口只提供标准 不涉及具体的值
可以通过implements 去继承这个标准

//对对象类型进行限制
(function(){
    type myType={
        name:string,
        age:number
    }
    const obj:myType={
        name:'sssss',
        age:11111
    }
    //接口  用来定义一个类的结构 定义类中应该包含哪些属性和方法 
    //同时接口也可以当成类型声明去使用
    //如果重名 会合并 限制类的结构
    //接口只定义结构 不考虑实际值 
    interface myInterfacee{
        name:string,
        age:number,
        sayHello():void
    }
    // const obj2:myInterfacee={
    //     name: "'222",
    //     age: 1111,
    //     sayHello: function (): void {
    //         throw new Error("Function not implemented.")
    //     }
    // }
    //定义类 可以使类去实现一个接口 实现了一个标准
    class myclass implements myInterfacee{
        name: string
        age: number
        constructor(name:string,age:number){
            this.name=name;
            this.age=age   
        }
        sayHello(): void {
            console.log('大家好');
            
        }
    }
})()

属性的封装

有三种修饰符 修饰符 public可以在任意位置进行访问修改 private私有属性 只能在内部进行访问修改protected 受保护的 能在子类和原有类访问
因为有些属性常常不能被修改 但是可以通过类里面的方法访问到属性
像 getName() 和 setValue()

(function(){
    class Person {
        //修饰符 public可以在任意位置进行访问修改 
        //private私有属性 只能在内部进行访问修改
        //protected 受保护的 能在子类和原有类访问
        //---通过类里面的方法使得私有属性可以被外部访问 不能在实例访问
        private name:string
        age:number
        constructor(name: string,age: number){
            this.name=name
            this.age=age
        } 
        getName(){
            return this.name
        }
        setValue(val: string){
            if(val){
                return this.name
                //所以可以对传入的数据进行判断
            }
            this.name=val
        }
    }
    const per=new Person('孙悟空',18)
    //这样可以修改属性 堆属性不安全
    // per.age=39
    console.log(per.getName());
    
})

同时ts提供了一个简洁的写法 直接对象.方法名 可以通过这个方式设置

get name(){
            return this._name
        }
        set name(val){
            this._name=val
        }

(function(){
    class Person {
        private _name:string
        _age:number
        constructor(name: string,age: number){
            this._name=name
            this._age=age
        } 
        //ts设置get
        get name(){
            return this._name
        }
        set name(val){
            this._name=val
        }

    }
    const per=new Person('孙悟空',18)
    //直接读取
    per.name='我改名字了'
    console.log(per.name);
})

泛型

当类型不明确时候 使用的 可以通过运行的时候推断也可以通过指定泛型实现 同时可以继承接口 例如

function fn2<T extends Inter>(a:T):number{
    return a.length
}

下面是例子

function fn<T>(a:T):T{
    return a;
}
fn(20)//在运行的时候自动推断
fn<string>("hello")//指定泛型
interface Inter{
    length:number
}
function fn2<T extends Inter>(a:T):number{
    return a.length
}
//T extends Inter 表示泛型T必须使inter的实现类
fn2({length:10})

总结

感觉ts和java很像 先学ts的原因是因为以后写代码需要更准确类型限制的时候自己还不会 下一阶段打算学react

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

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

相关文章

C++笔记之嵌套类中的成员函数识别外层类的成员变量

C++笔记之嵌套类中的成员函数识别外层类的成员变量

C++笔记之嵌套类中的成员函数识别外层类的成员变量 —— 杭州 2024-03-10 code review! 文章目录 C++笔记之嵌套类中的成员函数识别外层类的成员变量1.嵌套类声明完之后跟一个标识符是什么含义？2.嵌套类中的成员函数如何识别外层类的成员变量？1.嵌套类声明完之后跟一个标识…
阅读更多...
2024蓝桥杯每日一题（双指针）

2024蓝桥杯每日一题（双指针）

一、第一题&#xff1a;牛的学术圈 解题思路&#xff1a;双指针贪心 仔细思考可以知道&#xff0c;写一篇综述最多在原来的H指数的基础上1&#xff0c;所以基本方法可以是先求出原始的H指数&#xff0c;然后分类讨论怎么样提升H指数。 【Python程序代码】 n,l map(int,…
阅读更多...
java中使用rabbitmq

java中使用rabbitmq

文章目录 前言一、引入和配置1.引入2.配置 二、使用1.队列2.发布/订阅2.1 fanout(广播)2.2 direct(Routing/路由)2.3 Topics(主题)2.4 Headers 总结 前言 mq常用于业务解耦、流量削峰和异步通信,rabbitmq是使用范围较广,比较稳定的一款开源产品,接下来我们使用springboot的sta…
阅读更多...
第十五届蓝桥杯模拟赛（第三期）

第十五届蓝桥杯模拟赛（第三期）

大家好&#xff0c;我是晴天学长&#xff0c;本次分享&#xff0c;制作不易&#xff0c;本次题解只用于学习用途&#xff0c;如果有考试需要的小伙伴请考完试再来看题解进行学习&#xff0c;需要的小伙伴可以点赞关注评论一波哦&#xff01;蓝桥杯省赛就要开始了&#xff0c;祝…
阅读更多...
【谈一谈】并发_Synchronized

【谈一谈】并发_Synchronized

Synchronized 又到周末了,最近的话(有点子小日子不好过,哈哈哈!~)但是,我还是报之以歌哈哈哈 本次写关于并发_Synchronized的优化以及底层实现原理 说说心里话~其实是非常的累,原因应该怎么说呢?我发现自己在如今的这家公司,我处于一种活多钱少以及关键现在给的或自己不想干,因…
阅读更多...
【HarmonyOS】ArkTS-联合类型

【HarmonyOS】ArkTS-联合类型

目录 联合类型实例 联合类型 联合类型是一种灵活的数据类型&#xff0c;它修饰的变量可以存储不同类型的数据。 语法&#xff1a;let 变量: 类型1 | 类型2 | 类型3 值 基于联合类型&#xff0c;变量可存不同类型数据 实例 // 需求&#xff1a;定义一个变量&#xff0c;存放…
阅读更多...
C语言---单身狗问题

C语言---单身狗问题

1.单身狗初阶 这个题目就是数组里面有一串数字&#xff0c;都是成对存在的&#xff0c;只有一个数字只出现了一次&#xff0c;请你找出来 &#xff08;1&#xff09;异或是满足交换律的&#xff0c;两个相同的数字异或之后是0&#xff1b; &#xff08;2&#xff09;让0和每个…
阅读更多...
JDBC和连接池

JDBC和连接池

JDBC和连接池 大纲 JDBC连接数据库的方式 具体案例 JDBC 需求&#xff1a;满足Java程序能对多个不同的数据库进行操作&#xff0c;而创建了一种接口&#xff0c;实现对数据库的规范 连接数据库的方式 1.方法1 先创建一个Driver对象&#xff0c;然后设置连接到的数据…
阅读更多...
操作系统常见问题

操作系统常见问题

操作系统常见问题 调度相关调度算法进程、线程、协程 同步相关进程间通信方式死锁&#xff08;deadlocks&#xff09;是指两个或多个进程在等待对方释放资源时发生的一种状态。操作系统原子操作多线程锁 内存相关虚拟内存页表用户空间分布线程切换上下文线程拥有哪些资源栈中主…
阅读更多...
双向数据绑定：Vue.js的魔法背后

双向数据绑定：Vue.js的魔法背后

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
python单例模式应用之pymongo连接

python单例模式应用之pymongo连接

文章目录 单例模式介绍模块简介安装简单的连接使用单例模式的连接单例类的实现配置的使用单例模式的测试 单例连接的调用 https://gitee.com/allen-huang/python 单例模式介绍 适用场景&#xff1a; 单例模式只允许创建一个对象&#xff0c;因此节省内存&#xff0c;加快对象访…
阅读更多...
网页设计中通过css在一个固定宽度的div容器中让一行超出的文本隐藏并省略掉

网页设计中通过css在一个固定宽度的div容器中让一行超出的文本隐藏并省略掉

实现效果&#xff1a; 实现的关键css&#xff1a; overflow&#xff1a;hidden&#xff1b;这个表示超出容器的内容进行隐藏 white-space&#xff1a;nowrap&#xff1b;表示文本不断行显示 text-overflow&#xff1a;ellipsis&#xff1b;表示超出的部分用省略号进行表示 …
阅读更多...
定制repo（不再切换python和google源）

定制repo（不再切换python和google源）

文章目录 定制repo&#xff08;不再切换python和google源&#xff09;前言各用各的repo定制repo2/repo3源码自动识别repo2/repo3项目完整解决方案&#xff1a; 定制repo&#xff08;不再切换python和google源&#xff09; 众知&#xff0c;Android/AOSP/ROM系统开发&#xff0c…
阅读更多...
C语言-写一个简单的Web服务器(一）

C语言-写一个简单的Web服务器(一）

基于TCP的web服务器 概述 C语言可以干大事&#xff0c;我们基于C语言可以完成一个简易的Web服务器。当你能够自行完成web服务器&#xff0c;你会对C语言有更深入的理解。对于网络编程&#xff0c;字符串的使用&#xff0c;文件使用等等都会有很大的提高。 关于网络的TCP协议在…
阅读更多...
太长不看！公众号文章AI省流助手，从文章直接跳转总结！

太长不看！公众号文章AI省流助手，从文章直接跳转总结！

大家好啊&#xff0c;我是豆小匠。 好久不见&#xff0c;最近在完善独立开发的小程序&#xff1a;豆流便签。 这期来分享新开发的一个功能&#xff1a;公众号文章直接跳转AI总结&#xff0c;并提供保存便签功能。 1. 前置条件 只支持解析公众号文章。只支持解析文字&#xf…
阅读更多...
基于神经网络的偏微分方程求解器再度取得突破,北大字节的研究成果入选Nature子刊

基于神经网络的偏微分方程求解器再度取得突破,北大字节的研究成果入选Nature子刊

目录 一.引言:神经网络与偏微分方程 二.如何基于神经网络求解偏微分方程 1.简要概述 2.基于神经网络求解偏微分方程的三大方向 2.1数据驱动 基于CNN 基于其他网络 2.2物理约束 PINN 基于 PINN 可测量标签数据 2.3物理驱动(纯物理约束) 全连接神经网路(FC-NN) CN…
阅读更多...
STM32CubeMX学习笔记15---CAN总线

STM32CubeMX学习笔记15---CAN总线

1、CAN简介 CAN总线网络的结构有闭环和开环两种形式 闭环结构的CAN总线网络&#xff0c;总线两端各连接一个1202的电阻。这种CAN总线网络由ISO11898标准定义&#xff0c;是高速、短距离的CAN网络&#xff0c;通信速率为125kbit/s到1Mbit/s。在1Mbit/s通信速率时&#x…
阅读更多...
IOS使用Unity容器动态加载3D模型

IOS使用Unity容器动态加载3D模型

项目背景 我们的APP是一个数字藏品平台，里面的很多藏品需要展示3D模型，3D模型里面可能会包含场景，动画，交互。而对应3D场景来说，考虑到要同时支持iOS端，安卓端，Unity是个天然的优秀方案。 对于Unity容器来说，需要满足如下的功能： 1.在APP启动时，需要满足动态下载最…
阅读更多...
【开源】SpringBoot框架开发软件学院思政案例库系统

【开源】SpringBoot框架开发软件学院思政案例库系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统管理员2.2 普通教师 三、系统展示四、核心代码4.1 查询思政案例4.2 审核思政案例4.3 查询思政课程4.4 思政案例点赞4.5 新增思政案例评语 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的软件学…
阅读更多...
OCP Java17 SE Developers 复习题09

OCP Java17 SE Developers 复习题09

答案 A, E. For the first scenario, the answer needs to implement List because the scenario allows duplicates, narrowing it down to options A and D. Option A is a better answer than option D because LinkedList is both a List and a Queue, and you just nee…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023