TypeScript快速过一遍

已于 2022-12-20 16:07:54 修改
阅读量411 收藏 1
点赞数
分类专栏： 笔记 文章标签： typescript javascript 前端
于 2022-12-19 22:37:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39123467/article/details/128369962
版权
本文详细介绍了 TypeScript 和 JavaScript 中的变量、常量概念，包括 undefined、any、数组和枚举的使用，以及类型别名、循环遍历、函数、面向对象编程（类、构造器、继承、接口等）和设计模式（如单例、观察者）等核心内容。
摘要由CSDN通过智能技术生成

文章目录

变量，常量

//TypeScript JavaScript
//1.类型 2.面向对象的
//输出语句
let personName = "涛涛";
document.write(personName);

//const声明的是常量
const tmp = "我是常量";

//类型限制
let personName2:string= "涛涛2";
document.write(typeof(personName2))

变量类型

undefined

//undefined:声明了一个变量，还没有赋值
let tmp:number;
document.write(tmp + "");    //undefined

any

//any代表任何值都可以存
let tmp:any = false

tmp = 2;
document.write(tmp)

tmp = "123";
document.write(tmp)

tmp = false;
document.write(tmp)

array数组

//array
//类型相同，含义相同
let a:string[] = ["1","2","3"];
//因为document.write必须打印string，所以我们要给array转string，用+来变更类型
document.write(a+"")

枚举

//枚举 自己定义一个属于自己的类型
enum Color{
    red,
    blue,
    green
}

enum State{
    idle,
    run,
    death,
    attack
}

let color:Color = Color.green;   
let state:State = State.idle;   

//使用演示
switch(state){
    case State.idle:
        console.log("站立")
        break;
    case State.run:
        console.log("奔跑")
        break;
    case State.death:
        console.log("死亡")
        break;
    case State.attack:
        console.log("攻击")
        break;
    default:
        console.log("其他状态")
}

注意script

在这里插入图片描述

细节扩展

插值语法

// +号插入
let tmp:number = 3;
document.write('这个数字是' + tmp);    //这个数字是3

// ${变量} 语法不再支持
let tmp:number = 3;
document.write('这个数字是${tmp}');    //这个数字是${tmp}

同时支持两种类型

let tmp:number|string = 3;
tmp = "测试";

typeof

let a = 2
console.log(typeof a)

类型别名

//类型别名，定义一个自己的类型别名
type NewNumber = number;
let num:NewNumber = 3;
console.log(num)    //number

循环遍历

foreach（遍历）

of

//遍历内容
let names:string[] = ["小红","小明"]
for(let tmpName of names){
	console.log(tmpName)    //小红，小明
}

in

//遍历索引
let names:string[] = ["小红","小明"]
for(let tmpName in names){
	console.log(tmpName)    //0，1
}

函数

返回值写法

//无返回值，void可以省略
function add(num:number):void{
    console.log(num)
}

let test = add(2)

匿名函数

//匿名函数
let add = function():number{
    return 1 + 2;
}

console.log(add)

箭头函数

//箭头函数
let add2 = (num1:any,num2:any):number => {
    return num1 + num2;
}

console.log(add2)

面向对象

基础class

//定义类
class Person{
    name:string = "默认"
    age:number = 0
    
    say(){
        console.log(this.age)
    }
    
}

//实例化对象
let a = new Person();
console.log(a.name) //默认
a.say()             //0

构造器

//构造函数与java一样，默认一个无参构造器
class Person{
    name:string = "默认"
    age:number = 0
    
    //注意只能写一个构造器
    //两个参数构造器
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }

    say(){
        console.log(this.age)
    }
    
}

//实例化对象
let a = new Person("我",18);
console.log(a.name) //我
a.say()             //18

静态属性、方法

//静态与java一样
class Person{
    //静态属性
    static des:string = "这是一个person类"
    //静态方法
    static callPerson(){
        console.log('你使用了静态方法')
    } 

    name:string = "默认"
    age:number = 0
    
    //注意只能写一个构造器
    //两个参数构造器
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }

    say(){
        console.log(this.age)
    }
    
}

console.log(Person.des)     
Person.callPerson();

封装

//封装
class Person{
    private _name:string;
    
    set name(value){
        this._name = value;
    }

    get name(){
        return this._name
    }
}

let a = new Person();
a.name;

继承与抽象类

继承

super错误用法

//继承
//人类class
class Person{
    name:string = "人类"
    age:number = 0

    say(){
        console.log(this.age)
    }
    
}

//学生class
class Student extends Person{
    name:string = "学生"
    
    say0(){
        console.log(this.name)
    }

    say1(){
        console.log(super.name)
    }
}

let stu = new Student();
stu.say0()   //学生
stu.say1()   //undefined

super正确用法

//继承
//人类class
class Person{
    name:string = ""
    age:number = 0

    say(){
        console.log(this.name)
    }
    
}

//学生class
class Student extends Person{
    say(){
        super.say()
    }
}

let stu = new Student();
stu.name = "学生"
stu.say()   //学生

抽象类

//抽象类，不能被实例化，但是可以被继承
//人类class
abstract class Person{
    name:string = ""
    age:number = 0

    run(){

    }

    //这个方法子类必须实现，需要返回值
    abstract say():void;
    
}

//学生class
class Student extends Person{
    //实现父类的抽象方法
    say(){
       console.log("say hello")
    }
}

//实例化,可以这样写，但是没必要，可以看得清楚一点而已
let a:Person = new Student()
a.say();

接口

//接口就是抽象类，只不过默认属性和方法全部都是抽象的

命名空间

//a b
//两人代码冲突问题
namespace aa{
    export class Person{
        name:string = '刘';
    }
}

namespace bb{
    export class Person{
        name:string = '张';
    }
}

//尝试实例化Person
let person = new aa.Person();
let person2 = new bb.Person();

泛型

//T泛型代表任何类型
function add<T>(num:T):T{
    if(typeof num == "number"){
        num++
        return num;
    }
    return num;
}
console.log(add<number>(3) + "")   //4
console.log(add<string>("3"))   //3

元组，数组，字典

//元组
let hero:[string,number] = ["超人",100];
hero[0] = "蝙蝠侠"
console.log(hero[0])

//数组
let array1:number[] = [1,2,3]
let array2:Array<number> = new Array<number>();
//在数组后面追加元素
array1.push(4)
//在数组前面添加元素
array1.unshift(0)
//删除（取出）最后的元素
array1.pop()
//从第几位开始删除几个
array1.splice(0,1)
//删除（取出）最前面的
array1.shift();
//合并两个数组为array1
array1 = array1.concat(array2)
//查找元素位置
let index = array1.indexOf(3);  //2
console.log(index)
//排序
array1.sort();  
//翻转
array1.reverse();   

//["a","b","c"] key value 0:"a" 1:"b" 2:"c"
//字典
//就是不想用原来的索引key 0，1，2...然后自定义索引
let dic:{[key:string]:string} = {
    "name":"王小虎",
    "name2":"李逍遥"
}
dic["name3"] = "令狐冲"
console.log(dic["name3"])   //令狐冲

回调

无参

//回调函数
function func1(value:Function){
    //调用函数
    //先做一些事情后，再调用回调函数
    console.log(1 + 1)
    value();
}

func1(test)

//回调函数
function test(){
    console.log('test')
}



//调用匿名回调函数
func1(function(){
    console.log('test2')
})

//调用箭头函数回调函数
func1(() => {
    console.log('test3')
})

有参

//回调函数
function func1(value:Function){
    //调用函数
    //先做一些事情后，再调用回调函数
    console.log(1 + 1)
    value("nana");
}

func1(test)

//回调函数
function test(name:any){
    console.log(name)
}



//调用匿名回调函数
func1(function(name:any){
    console.log(name)
})

//调用箭头函数回调函数
func1((name:any) => {
    console.log(name)
})

正则表达式

let reg = /\d{4}-\d{7}/g;
let str = "0345-1234567";
let res = reg.exec(str);
console.log(res);   // ["0345-1234567"] 

res.forEach(function(value,index){
    console.log(value,index)       //"0345-1234567",  0         匹配到的内容，以及匹配到的下标
})

访问修饰符

与java一样，不再讨论

设计模式

单例模式

在这里插入图片描述

饿汉式

//单例模式
//简单模拟_饿汉式
class SoundManager{
    static Instance = new SoundManager();

    private constructor(){

    }
}
//用声音管理类
SoundManager.Instance

懒汉式

//单例模式
//简单模拟_懒汉式
class SoundManager{
    private static instance:SoundManager;
    private constructor(){

    }

    static Instance(){
        //当前单例是否产生
        //懒加载
        if(!SoundManager.instance){
            SoundManager.instance = new SoundManager();
        }
        return SoundManager.Instance;
    }
}
//用声音管理类，不管调用几次，对应的都是同一个对象
SoundManager.Instance();
SoundManager.Instance();
SoundManager.Instance();
SoundManager.Instance();

代理模式

在这里插入图片描述

interface ICalc{
    calc(num1:number,num2:number):number
}
//被委托人
class Npc1 implements ICalc{
    calc(num1:number,num2:number){
        return num1 + num2;
    }
}
//被委托人
class Npc2 implements ICalc{

    calc(num1:number,num2:number){
        return num1 - num2;
    }
}

//委托者
class Person{
    //代理
    delegate:ICalc
//
|undefined
    
    GetNum(num1:number,num2:number){
        //拿到num1和num2计算后的结果
        let num = this.delegate.calc(num1,num2)
        console.log(num + "")
    }
}

//实例化委托人
let person = new Person()
//设定一个代理
person.delegate = new Npc1()
person.GetNum(3,4)  //7

person.delegate = new Npc2()
person.GetNum(3,4)  //-1

观察者模式

在这里插入图片描述

interface IObserver{
    nameChanged(newName:any):any;
}
class Person{
    //所有的观察者
    observers:Array<IObserver> = new Array<IObserver>();

    private _name:string|undefined

    set name(value){
        this._name = value
        //发生变化
        //遍历观察者数组，给所有的观察者发消息
        for (let observe of this.observers){
            observe.nameChanged(this._name);
        }
    }

    get name(){
        return this._name;
    }
}

class Test implements IObserver{
    nameChanged(newName: string){
        console.log("监听到变化，名字变为" + newName)
    }
}

let person = new Person();
let test = new Test();
//设置为监听对象
person.observers.push(test)

person.name = "哈哈哈"

工厂模式

在这里插入图片描述

enum EnemyType{
    Boss,
    Monster,
}

class Enemy{
    name:string|undefined
    //工厂方法，用来创建对象
    static Create(enemyType:EnemyType):Enemy{
        let enemy:Enemy
        switch(enemyType){
            case EnemyType.Boss:
                enemy = new Boss();
                break;
            case EnemyType.Monster:
                enemy = new Monster();
                break;
        }
        return enemy;
    }
}

class Boss extends Enemy{}
class Monster extends Enemy{}

let boss1 = Enemy.Create(EnemyType.Boss)

链表（目前不用特别关注，目前CPU性能够高，用不上）

链表从中间删除数据比较方便，直接把next直到下一个
在这里插入图片描述
在这里插入图片描述

链表遍历

class Person{
    name:string|undefined;
    next: Person;

    constructor(name:string){  
        this.name = name;
    }
}

let person = new Person("李逍遥")
person.next = new Person("王小虎")
person.next = new Person("赵灵儿")

//删除
person.next = person.next.next;

//添加
let tmpPerson = new Person("赵四")
tmpPerson.next = person.next;
person.next = tmpPerson;

while(person){
    console.log(person.name)
    //让节点后移
    person = person.next
}
鬼鬼骑士
关注
专栏目录
遍历ts的enum类型数据
sunzhen15896的博客
08-26 306
label”: “苹果”,“label”: “梨子”,“label”: “桃子”,“label”: “橘子”,
我用8个小时，把TypeScript从头学了一遍，并没有你想象的那么难！！！
宋承佑
03-30 4760
TypeScript 建议先学JavaScript再看TypeScript，这样你就会很快的理解。 文章目录TypeScript第一节 基础类型第二节 变量声明类型断言类型推断变量作用域第三节 运算符算术运算符关系运算符逻辑运算符短路运算符（&& 与 ||）位运算符赋值运算符三元运算符（？ ：）类型运算符typeof 运算符instanceof 运算符其它运算符负号运算符（-）字符串运算符：连接运算符（+）第四节 条件语句if 语句if...else 语句if...else if...els
TypeScript 枚举(enum)
FastText的博客
06-16 1448
TypeScript变量作用域：变量的作用域是指变量有效性的范围，就是用户自定义的变量可以使用的代码范围，它与变量定义的位置密切相关。
TypeScript 基础类型 —— 枚举 enum
且听风吟的博客
05-25 688
枚举 enum 是对 JavaScript 标准数据类型的一个补充，用于定义数值集合。
如何在 TypeScript 中遍历 Enum 的两种方案
乐闻世界
12-26 4043
TypeScript 中有一个 JavaScript 中没有的声明关键字，即 `enum` ,在 TypeScript 项目开发过程中，我发现使用枚举enum的概率是极高的。枚举是一种特殊的数据类型，它允许开发者定义一个静态变量集合。枚举类型帮助开发者清晰的预设集合中的变量，并且不允许运行时修改，这为程序运行提供了可预测性和稳定性的保障。 在开发过程中，我们经常遇到需要遍历对象中所有属性的情况，对于特殊的枚举enum对象，这种情况也是很常见的。
8.TypeScript中的枚举
sinat_41212418的博客
10-14 1195
枚举 使用枚举我们可以定义一些带名字的常量。 使用枚举可以清晰地表达意图或创建一组有区别的用例。 TypeScript支持数字的和基于字符串的枚举。 数字枚举 首先我们看看数字枚举，如果你使用过其它编程语言应该会很熟悉。 enum Direction { Up = 1, Down, Left, Right } 如上，我们定义了一个数字枚举， Up使用初始化为 1。 其余的成员会从 1开始自动增长。 换句话说， Direction.Up的值为 1， Down为 2， Left
TS学习看这一篇就足够啦~(内含vue3+ts示例)
零凌林的博客
10-11 1367
typescript基础
typescript服务器性能,TypeScript - 不止稳，而且快
weixin_30587341的博客
08-05 739
前言关于 TypeScript 是什么，应该大部分人都已经知道了，但是在这儿，还是摘抄一下知乎的回答：TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JavaScript，所以 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。对于我个人而言， 使用 TypeS...
基于vue3.x + typeScript 实现的组织架构图.zip
最新发布
01-16
6. 脚手架工具：Vue CLI是Vue3.x的官方脚手架，用于快速初始化项目，包括配置构建工具、设置typescript支持等，简化了项目的搭建过程。 7. 测试与调试：Vue3.x支持Jest或Mocha等测试框架，结合Vue Test Utils可以对...
TypeScript从入门到放弃
MicalChen的博客
05-08 2000
关注我们 关注【郑大钱呀】【公】【众】【号】，我们一起交流，一起学习。 TypeScript准备工作 什么是TypeScript TypeScript(下文简称为ts)是微软开发的一个开源的编程语言，通过在JavaScript(下文简称为js)的基础上添加静态类型定义构建而成。ts通过其编译器或Babel转译为js代码，可运行在任何浏览器，任何操作系统。ts是js的超集，它支持所有js的语法，我们可以在ts中使用原生js语法，可以简单的理解成TS是JS的升级版。 ts与js两者的主要的区别如下：
搭建自己的 typescript 项目 + 开发自己的脚手架工具 ts-cli
m0_65634190的博客
12-28 1247
这个事情起始于前两天给团队写一个脚手架工具，这段时间刚做做完一个系统，是团队第一个正式意义上的全栈项目；团队有自己的前端脚手架，但是没有后端脚手架，所以想着给团队写一个后端脚手架工具，这样团队在开展后续的全栈项目时可以使用脚手架构建项目，避免了重复搭建项目初始架构的大量工作，成员直接编写业务代码即可。
TS新增遍历方法
xuelang532777032的博客
05-26 1361
ts 循环遍历object对象
【TS】enum 枚举（含数字枚举转数组方法）
qq_45677671的博客
09-16 1万+
枚举的功能类似于字面量类型+联合类型组合的功能，也可以表示一组明确的可选值。数字枚举: 枚举成员的值为数字的枚举。字符串枚举：枚举成员的值是字符串。
TS枚举详解
AMD23的博客
03-23 2万+
Enums（枚举）是TypeScript的少数功能之一，它不是JavaScript的类型级扩展。 枚举允许开发者定义一组命名的常量。使用枚举可以使其更容易记录意图，或创建一组不同的情况。TypeScript提供了基于数字和字符串的枚举。 1 数值型枚举 我们首先从数字枚举开始，如果你来自其他语言，可能会更熟悉它。一个枚举可以用 enum 关键字来定义。 enum Direction { Up = 1, Down, Left, Right, } 上面，我们有一个数字枚举，其
enum枚举类的一个简单例子
kainever的专栏
07-25 5028
定义一个枚举类：   public enum Time { // 通过构造方法给常量传值 DATE1("2016-6-26 12:14:10"), DATE2("2016-6-26 12:14:10"), DATE3("2016-6-26 12:14:10"), DATE4("2016-6-26 12:14:10"), DATE5("2016-6-26 12:14:10"
typescript中的enum和类型转换
Martin 的博客
01-02 2万+
typescript中的enum和类型转换
Typescript I: 遍历Array的方法：for, forEach, every等
热门推荐
Wrote Ideas Down, Together with Skills
09-08 5万+
Typescript的官方文档 Iterators and Geneators （https://www.typescriptlang.org/docs/handbook/iterators-and-generators.html）方法一，for…of 这个貌似是最常用的方法，angular 2中HTML语法绑定也是要的这种语法。let someArray = [1, "string", fal
枚举类型enum用法
mindboycsdn的博客
09-24 5317
枚举常量是枚举类型中的值，即枚举值。 枚举类型是一种用户定义的类型，只有用户在程序中定义它后才能被使用。用户通常利用枚举类型定义程序中需要使用的一组相关的符号常量。枚举类型的定义格式为: enum <枚举类型名> {<枚举表>}; 它是一条枚举类型定义语句，该语句以enum保留字开始，接着为枚举类型名，它是用户命名的一个标识符，以后就直接使用它表示该类型，枚举类型名后为该类型的定义体，它是由一对花括号和其中的枚举表所组成，枚举表为一组用逗号分开的由用户命名的符号常量，每个
ts中enum枚举类型
weixin_51035283的博客
06-19 1万+
枚举类型 enumsex{ male="男", female="女", unknown="未知", } //数字型枚举 enumcolor{ red=10, green, yellow, } //易构型枚举 enum{ up="上", green=10, } //常量型枚举(成员类型值不能为变量) letunfind=404; enumsta{ success=200, unf...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鬼鬼骑士

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值