首页 > 其他分享 >TS基础知识点

TS基础知识点

时间:2023-02-19 14:13:20浏览次数:42  
标签:知识点 const name age 基础 TS number 类型 string

前言:TS简介相关介绍就不一一赘述,网上自行按照需求搜索查阅即可

1.TypeScript 的静态类型

TypeScript 的一个最主要特点就是可以定义静态类型,英文是 Static Typing。那到底是什么意思那?太复杂的概念性东西这里就不讲了,你可以简单的理解“静态类型”为,就是你一旦定义了,就不可以再改变了。比如你是男人就是男人,一辈子都要作男人;是女人就是女人,一辈子都是女人。这个事不可以改变!呃....好像现在也可以随便变来变去啊,这里说的是正常情况。但是它还有一些特性,这个并不像表面的那么简单。现在我们就来学习。

const count:number = 313(此时,count的值就被指定类型为number,如果是其他类型就会报错提醒) 1、自定义静态类型 interface YiHuanhuan {     name: string;     age: number;   } // 需要注意的是,这时候定义的变量也必须具有name和age属性了 const yihuanhuan: YiHuanhuan = {     name: "易欢欢",     age: 18,   }; 2、TypeScript 基础静态类型和对象类型
在 TypeScript 静态类型分为两种,一种是基础静态类型,一种是对象类型,这两种都经常使用,非常重要,我们先来看一下什么是基础静态类型。 基础静态类型:非常简单,只要在声明变量的后边加一个:号,然后加上对应的类型(类似这样常用的基础类型还有,最常用的如,null,undefinde,symbol,booleanvoid等) const name1:null = null 对象类型:对象类型见名就知,自定义的类型是一个对象,对象类型也可以是数组,类、函数等... 1、自定义的类型是一个对象 const yihuanhuan1: {     name: string,     age: number,   } = {     name: "易欢欢1",     age: 18,   }; console.log(yihuanhuan1.name); 2、类型必须是字符串数组,如果数组里面不为字符串,那么就会报错提示 const yihuanhuan2: String[] = ["谢大脚", "刘英", "小红"]; 3、必须是一个Person类对应的对象才可以 class Person {} const yihuanhuan3: Person = new Person();() 4、还可以定义一个函数类型,并确定返回值 const yihuanhuan4: () => string = () => {     return "大脚"; }; 2.TypeScript 中的类型注释和类型推断 let count1: number; count1 = 123; 这段代码就是类型注解,意思是显示的告诉代码,我们的count1变量就是一个数字类型,这就叫做类型注解 let countInference = 123; 这段代码,没有写类型,但是把鼠标放上变量,就会提示改变量为number,这个自动推断的过程就是类型推断 工作中的潜规则就是:
  • 如果 TS 能够自动分析变量类型, 我们就什么也不需要做了
  • 如果 TS 无法分析变量类型的话, 我们就需要使用类型注解
不用写类型注解的例子: const one = 12; const two = 2; const three = one + two; 必须写类型注解的例子 function getTotal(one:number, two:number) {     return one + two; } const total = getTotal(1, 2); 此时,如果不写明两个参数的类型,那么如果不是number类型,就会出现逻辑错误,故此时类型注解必不可少,同时由函数的输入类型可以直接推断出total类型,total就不必须写注解 3.TypeScript 函数参数和返回类型定义 function getTotal(one:number, two:number) {     return one + two; } const total = getTotal(1, 2); 上述代码,仔细会发现其中的坑,就是我们并没有定义getTotal的返回值类型,虽然TypeScript可以自己推断出返回值是number类型。 但是如果这时候我们的代码写错了,比如写成了下面这个样子: function getTotal(one:number, two:number) {     return one + two + ‘’; } const total = getTotal(1, 2); 这样返回的total的类型就变量,如果此时total在指定了类型,此时就会报错,故,代码就不严谨,函数的返回值类型就显得极为重要 function getTotal1(one: number, two: number): number {     return one + two;   } const total1 = getTotal1(1, 2); 1、void无返回值类型: 有时候函数是没有返回值的,比如现在定义一个sayHello的函数,这个函数只是简单的terminal打印,并没有返回值,就可以给他一个类型注解void,代表没有任何返回值 function sayHello(): void {   console.log("hello world"); } 2、never类型: 如果一个函数是永远也执行不完的,就可以定义返回值为never,那什么样的函数是永远也执行不完的那?我们先来写一个这样的函数(比如执行执行的时候,抛出了异常,这时候就无法执行完了)。 function errorFuntion(): never {   throw new Error();   console.log("Hello World"); } 还有一种是一直循环,也是我们常说的死循环,这样也运行不完,比如下面的代码: function forNever(): never {     while (true) {}     console.log("Hello JSPang"); } 4.数组类型的定义

简单数组类型:

const numberArr = [1, 2, 3];

const stringArr: string[] = ["a", "b", "c"];

const numberArr: number[] = [1, 2, 3];

const undefinedArr: undefined[] = [undefined, undefined];

数组中如果有多类型:

const arr: (number | string)[] = [1, "string", 2];

数组中的对象类型定义:

const yihuanhuan5: {name: string, age: Number }[] = [ { name: "刘英", age: 18 }, { name: "谢大脚", age: 28 }, ] 这种形式看起来比较麻烦,而且如果有同样类型的数组,写代码也比较麻烦,TypeScript 为我们准备了一个概念,叫做类型别名 定义别名的时候要以type关键字开始,现在定义一个Lady的别名 type Lady = { name: string, age: Number };

const yihuanhuan5: Lady[] = [ { name: "刘英", age: 18 }, { name: "谢大脚", age: 28 }, ];

5.元组的使用和类型约束

元组:把数组中的每个元素类型的位置给固定住了,这就叫做元组

const xiaojiejie: [string, string, number] = ["dajiao", "teacher", 28];

const xiaojiejies: [string, string, number][] = [ ["dajiao", "teacher", 28], ["liuying", "teacher", 18], ["cuihua", "teacher", 25], ];等价于

const xiaojiejies: {string, string, number}[] = [ ["dajiao", "teacher", 28], ["liuying", "teacher", 18], ["cuihua", "teacher", 25], ];

目前元组用的较少,因为其完全可以用对象类型代替

6.interface接口

TypeScript的核心原则之一是对值所具有的结构进行类型检查,在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约

我们可以把重复的类型注解,定义成统一的接口

interface Girl {     name: string;     age: number;     bust: number; } const fun1 = (yihuanhuan6:Girl) => {     console.log(yihuanhuan6.name, 'yihuanhuan6.name')     console.log(yihuanhuan6.age, 'yihuanhuan6.age')     console.log(yihuanhuan6.bust, 'yihuanhuan6.bust') } const girls = {     name: 'test1',     age: 18,     bust: 23 } fun1(girls) 接口和类型别名的区别: 1、写法区别 类型别名实例: type Lady = { name: string, age: Number };

const yihuanhuan5: Lady[] = [ { name: "刘英", age: 18 }, { name: "谢大脚", age: 28 }, ];

接口实例:

interface Lady {

  name: string;

  age: Number

};

const yihuanhuan5: Lady[] = [ { name: "刘英", age: 18 }, { name: "谢大脚", age: 28 }, ];

2、类型别名可以直接给类型,而接口必须代表对象

type Girl1 = stirng;

3、接口的非必选项得定义(接口的一些特性,类别别名没有)

定义的方式是在冒号“:”前面加“?”

interface Girl {     name: string;     age?: number;     bust: number;
} const fun1 = (yihuanhuan6:Girl) => {     console.log(yihuanhuan6.name, 'yihuanhuan6.name')     if(yihuanhuan6.age){         console.log(yihuanhuan6.age, 'yihuanhuan6.age')     }     console.log(yihuanhuan6.bust, 'yihuanhuan6.bust') }

4、接口允许加入任意值

interface Girl {     name: string;     age?: number;     bust: number;     [propname: string]: any; } 这个的意思是,属性的名字是字符串类型,属性的值可以是任何类型 实例如下: const fun1 = (yihuanhuan6:Girl) => {     console.log(yihuanhuan6.name, 'yihuanhuan6.name')     if(yihuanhuan6.age){         console.log(yihuanhuan6.age, 'yihuanhuan6.age')     }     console.log(yihuanhuan6.bust, 'yihuanhuan6.bust')     yihuanhuan6.sex && console.log("性别是:"+yihuanhuan6.sex) } const girls = {     name: 'test1',     // age: 18,     bust: 23,     sex:'女' } fun1(girls)

5、接口里的方法

接口里不仅可以存属性,还可以存方法

interface Girl {     name: string;     age?: number;     bust: number;     [propname: string]: any;     say(): string; } 6、接口和类的约束 interface Girl {     name: string;     age?: number;     bust: number;     [propname: string]: any;     say(): string; } class Yihuanhuan implements Girl {     name = "易欢欢";     age = 12;     bust = 34;     sex = '女';     say(){         return '12313'     } } 7、接口之间的继承

接口也可以用于继承的,比如你新写一个Teacher接口,继承于Girl 接口

interface Girl {     name: string;     age?: number;     bust: number;     [propname: string]: any;     say(): string; } interface Yi extends Girl {       teach(): string; } class Yihuanhuan1 implements Yi {     name = "易欢欢";     age = 12;     bust = 34;     sex = '女';     say(){         return '12313'     };     teach(): string {         return '我在教书'     } } 子接口继承父接口,那么子接口就拥有了父接口的访问父接口所有公用属性和方法的能力,同时还可以自己新定义一些属性和方法 7.类的概念和使用

1、类的基本使用:

class Lady {

  content = "Hi,赛高";

  sayHello() {

    return this.content;

  }

}

const goddess = new Lady();

console.log(goddess.sayHello());

2、类的继承

TypeScrip 的继承和ES6中的继承是一样的,关键字也是extends,子类继承父类,那么子类就拥有了访问父类所有公用属性和方法的能力

class Lady {     content = "Hi,lisa";     sayHello() {       return this.content;     }   } class lisa1 extends Lady {     sayLove() {         return "I love you";     } }   const goddess = new lisa1();   console.log(goddess.sayHello());   console.log(goddess.sayLove());

3、类的重写:

重写就是子类可以重新编写父类里边的代码

class XiaoJieJie extends Lady {

  sayLove() {

    return "I love you!";

  }

  sayHello() {

    return "Hi , honey!";

  }

}

4、super关键字使用

当我们在继承父类的时候,在子类里面还想用到父类中的一些方法,就需要用到super关键字了

  class Lady1 {       text = "我是父亲的内容";       sayHello(){           return '我是父亲的方法'       }   }   class Luipte extends Lady1 {       name = '李四';       sayHello(){           return '我是'+this.name+',后面的内容来自我爸爸'+super.sayHello()+this.text       }   }   const son1 = new Luipte()   console.log(son1.sayHello())

5、typescript中类的访问类型

类的访问类型就是基于三个关键词privateprotectedpublic,也是三种访问类型

public类型:public从英文字面的解释就是公共的或者说是公众的,在程序里的意思就是允许在类的内部和外部被调用

private类型:只允许在类的内部被调用,外部不允许调用

protected类型:允许在类内及继承的子类中使用

class Person1 {     public name:string = "";     private ago:number = 0;     protected text:string = "1212";     readonly color:string ="red";     public sayHello(){         // 类内         console.log(this.name +this.ago+this.text+ 'say Hello')     } } //-------以下属于类的外部-------- const person = new Person1() person.name = 'yihuanhuan.com' // 不会报错 // person.age = 12 // 会报错 // person.text = "rrrrrr" // 会报错 // person.color = "yellow" // 会报错 console.log(person.color) // 可以读取 person.sayHello() class Son extends Person1 {     public sayBy(){         console.log(this.text + '121122') // 不会报错     } }

 6、类的构造函数

比如,我们在使用类,new一个实例对象的时候,想要直接通过传递参数的形式,给里面的属性赋值,此时就需要用到构造函数,关键字是constructor

class Person2{     public name :string;     constructor(name:string){         this.name=name     } } const person2= new Person2('易欢欢') console.log(person2.name) 还可以简写成: class Person3{     constructor(public name:string){   //这种写法就相当于你定义了一个name,然后在构造函数里进行了赋值,这是一种简化的语法,在工作中我们使用这种语法的时候会更多一些     } } const person3= new Person3('周工') 7、继承类的构造器 在子类中使用构造函数需要用super()调用父类的构造函数 class Person4 extends Person2 {     constructor(public age:number){         super('周工')     };     sayHello(){         console.log(this.name +'今年是'+this.age +'岁啦!')     } } const person4 = new Person4(26) person4.sayHello() 子类继承父类并有构造函数的原则,就是在子类里写构造函数时,必须用super()调用父类的构造函数,如果需要传值,也必须进行传值操作。就是是父类没有构造函数,子类也要使用super()进行调用,否则就会报错。 8、类的 Getter 和 Setter 和static(通过 Getter 和 Setter 的形式来访问和修改这个属性。) class Person5 {     constructor(private _age:number){}     get age(){         return this._age-10     }     set age(age:number){       this._age=age+3     } } const person5 = new Person5(28) person5.age=25 console.log(person5.age)
学习类,都知道要想使用这个类的实例,就要先New出来(),但是有时候不想要new实例,想要直接使用类里面的方法 此时用static声明的属性和方法,不需要进行声明对象,就可以直接使用 class Person6 {     static sayLove() {       return "yihuanhuan";     } } console.log(Person6.sayLove());    

标签:知识点,const,name,age,基础,TS,number,类型,string
From: https://www.cnblogs.com/yihuanhuan/p/17132617.html

相关文章

  • Spring Tool Suite 3(sts)手动添加namespace
    设置位置:window-->preferences-->spring-->namespaces 选中对应的namespace内容加入到xml文件中; ......
  • K8S的基础概念
    一、Kubernetes介绍1、什么是Kubernetes?Kubernetes(通常称为K8s,K8s是将8个字母“ubernete”替换为“8”的缩写)是一个以容器为中心的基础架构,可以实现在物理集群或虚拟......
  • Linux基础 - 进程管理 ps
     psaux|sort-k4,4nr|head-n10 #查看内存占用前10名的程序ps-e/ps-ef/ps-eF/ps-ely  #Toseeeveryprocessonthesystemusingstandardsy......
  • 文件上传基础小总结
    基础及过滤方式什么是文件上传漏洞?存在文件上传的地方均有可能有文件漏洞(但不是一定有);如果上传代码某个地方存在验证疏忽,则会有文件漏洞危害可能直接获取网站权限,危......
  • tsup 简单快速的typescript库打包工具
    tsup是一个很不错的工具,可以方便的进行typescript应用打包以及构建,支持了灵活的资源加载处理tsx也是一个不错的工具,可以进行dev模式的处理tsup参考配置tsup.confi......
  • Linux基础 - 文件系统 /proc
      一、/proc文件系统1.1/proc:一个虚拟文件系统/proc文件系统是一种内核和内核模块用来向进程(process)发送信息的机制(所以叫做/proc)。最初的设计目的是允许......
  • oracle 存储过程知识点
    第一个简单的存储过程:createorreplaceprocedureupdate_sal(idnumber,namevarchar2)isv_sqlcodenumber;v_sqlerrmvarchar(1000);begininsertintotesta(id,na......
  • 软件测试|Python数据可视化神器——pyecharts教程(一)
    前言我们都知道百度开源了一个Echarts数据可视化库,支持绘制各种主流的图表。Python在数据分析方面是十分强大的,于是,pyecharts就应运而生了。pyecharts简介及安装pyecharts继......
  • Java基础知识点(带返回值方法的定义和调用
    一:带返回值方法的定义方法的返回值其实就是方法运行的最终结果。如果要在调用处根据方法的结果,去编写另外一段逻辑,为了在调用处拿到方法的结果,就需要定义带返回值的方法。eg......
  • 软件测试|数据可视化神器——pyecharts教程(二)
    前言上篇文章我们介绍了pyecharts的安装和绘制基础的柱状图,本篇文章我们将介绍绘制Map图,很多时候,我们统计数据都会分地区来展示,将数据和地图结合会更加直观,所以,我们今天就来......