TypeScript常用知识点整理

最新推荐文章于 2024-07-27 13:04:46 发布

大莲芒

最新推荐文章于 2024-07-27 13:04:46 发布

阅读量473

点赞数

文章标签： typescript

本文链接：https://blog.csdn.net/qq_34574204/article/details/107435782

版权

一，变量类型

number 类型

letnum1 : number = 20;

letnum2 : number = 175.5;

leta1 : number = Infinity; //正无穷大

leta2 : number = -Infinity; //负无穷小

leta3 : number = NaN;

注意：Infinity, -Infinity, NaN 也属于Number类型。

undefined 类型

let un : undefined = undefined;



undefined 类型的数据只能被赋值为 undefined；

在 typescript中，已声明未初始化的值要直接访问的话，类型需要定义为undefined。

null 类型

null 类型只能被被赋值为null

null是一个空指针对象，undefined是未初始化的变量，所以，可以把undefined看成一个空变量，把unll看成一个空对象。

特别注意：默认情况下，undefined 和 null 类型，是所有其它类型的子类型，也可以说成，它俩可以给所有其他类型赋值。

string 类型

//值类型

letstr : string ='你好！'

//引用类型

letstr1 : String = new String('你好！')

boolean 类型

letboo : boolean =true;

letboo1 : boolean =false；

6.symbol 类型

let sy : symbol = Symbol('bar');

数组类型

//字面量

letarr1 : number[] = [1, 2]

//泛型---->相当于数组中每个元素的类型

letarr2 : Array = ['a','s']

//构造函数

letarr3 : string[] = new Array('a','s')

//联合类型-->这里的联合类型的意思是，数组中元素的类型可以是number 或 string，两种都有也可以

letarr4 : Array = [2,'a']

元组类型（tuple）

let tup : [string,number] = ['asdasd', 43233];

元组和数组看起来有点类似，但是，是有区别的

元组的长度是有限的，而且分别为每一个元素定义了类型。

枚举类型（enum）

enum--->组织收集一组相关变量的方式。

数字枚举

enum REN {

    // nan = 1 ----->初始化下标

    nan,

    nv,

    yao

}

console.log(REN.nan)//0

console.log(REN.nv)//1

console.log(REN.yao)//2

//使用数字枚举时，TS 会为枚举成员生成反向映射

console.log(REN[2])// yao

数字的枚举---->下标从0开始,也可以自行设置枚举成员的初始值，它们会依次递增

字符串枚举

字符串枚举类型允许使用字符串来初始化枚举成员，可以是一个字符串字面量或者另一个字符串的枚举成员

字符串枚举类型不支持成员自增长，每个成员必须初始化，另外字符串枚举不会为成员生成发向映射。

void 类型

void 类型--->表示没有任何返回值，一般用于定义方法时方法没有返回值。

functionf1() : void {

console.log('void类型')

}

这里你也可以指定返回值类型为 undefined。因为 JS 中，如果函数没有返回值，则会默认返回 undefind。不过，使用 void 类型可以使表意更清晰。

any 类型

其他类型都是any类型的子类型，any类型的值可以被赋值为任何类型的值。

letan : any ='any 类型';

console.log(an)//any 类型

an = 25;

console.log(an)//25

注意：对于any 需要注意两点

如果在声明变量时，没有声明其类型，也没有初始化，（因为类型推断会自动判断类型），那么它就会被判断为any类型。

letan1;

an1 ='没有声明其类型，也没有初始化';

console.log(an1)//没有声明其类型，也没有初始化

an1 = 25

console.log(an1)//25

在any类型变量上可以访问任何属性，即使它不存在。

letsomething: any = 42

something.mayExist()    // 没问题，因为其可能在运行时存在

something.toFixed() // 没问题，虽然确实存在，但是编译器并不会去检查

never 类型

never 表示永远不会存在的值的类型， never 是任何类型的子类型，但是没有任何类型是never的子类型或可以赋值给never类型（除了never本身之外）。即使 any也不可以赋值给never。

never 类型常用于两种情况

用于描述从不会有返回值的函数—》返回never的函数必须存在无法达到的终点

functionf5() : never {

while(true) {

//dosomething

    }

}

用于描述总抛出错误的函数

functionf2(msg : string) : never {

    throw new Error(msg)

}

日期类型

letda : Date = new Date()

console.log(da)

正则表达式类型

//构造函数声明法

letreg1 : RegExp = new RegExp('ljy','gi')

console.log(reg1)

//字面量的声明法

letreg2 : RegExp = /ljy/gi

console.log(reg2)

二，函数

函数定义

定义函数有函数声明和函数表达式两种形式。定义函数的参数和返回值可以指定其类型；当调用函数时，传入参数类型必须与定义函数参数类型保持一致。

函数声明定义

//            参数类型    返回值类型

functionf(age:number) : string {

return`找到了${age}的小哥哥`;

}

letage : number = 22;

letres : string = f(age);

console.log(res)

函数表达式定义

letf1 = (age:number) : string => {

return`找到了${age}的小哥哥`;

}

letage1 :number = 21;

letres1 : string = f1(age1);

console.log(res1)

注意：表达式定义完以后，必须调用函数；

函数表达式还有一种写法：函数表达式：指定变量fn的类型

注意不要混淆了 TypeScript 中的 => 和 ES6 中的 =>

在 TypeScript 的类型定义中，=> 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。

//let fn: (x: Type, y: Type) => Type = (x, y) => {}

例子

var run3: (x: number, y: number) => string =function(x: number, y: number): string{

return'run3';

}

console.log(run3(1, 2))

//当给变量run3指定类型的时候，应该是函数的参数和返回值的约束类型。如果用后面学到的ts类型推论，可以简写为：

var run4: (x: number, y: number) => string =function(x, y){

// 类型推论可以确定函数的参数和返回值类型，也就可以省略类型指定

return'run4';

}

console.log(run4(1, 2))

函数没有返回值可以使用void类型值定返回值

function f3 () : void {

console.log('没有返回值')

}

f3 ()；

可选参数的函数

可选参数一定要放在参数的最后面

functionf4(age:number, cm?:number) : string {

    //cm为可选参数，可传可不传

if(cm) {

return`可选参数------身高为${cm}厘米`;

}else{

return`可选参数-----年龄${age}岁`

    }

}

console.log(f4(12))；

console.log(f4(24, 175))；

有默认值参数的函数

ts会将添加了默认值的参数识别为可选参数，有默认值的参数的位置不受【可选参数必须放在后面】的限制

function f5 (age:number, cm:number = 188) : string {

return`默认参数----年龄为${age}岁---身高为${cm}cm`

}

console.log(f5(25))；

剩余参数的函数

//当有很多参数的时候，或者参数个数不确定，可以用三点运算符

function f6(...rest: number[]) : number[] {

return [...rest];

}

console.log(f6(1,2,3,4,5,6,7,8,9))

function f7(a:number, b:number, ...rest:number[]) : number[] {

return [a, b, ...rest]

}

console.log(f7 (100,200,1,2,3,4,5,6));

接口中的函数

第一种写法

interface int1 {

    say (age:number) : void  //抽象方法

}

第二种写法

interface int2 {

    say : (age:number) => void  //抽象方法

}

7.函数的重载

先声明所有方法重载的定义，不包含方法的实现

再声明一个参数为any类型的重载方法

实现any类型的方法并通过参数类型（和返回类型）不同来实现重载

typescript中的重载：通过为同一个函数提供多个函数类型定义来实现多种功能的目的

TypeScript 会优先从最前面的函数定义开始匹配，所以多个函数定义如果有包含关系，需要优先把精确的定义写在前面。

function f1(x: number, y: number): number;

function f1(x: string, y: string): string;

// 上面定义函数的格式，下面定义函数的具体实现

function f1(x: any, y: any): any {

return x + y;

}

f1(1, 2);

f1('a','b');

三，类

访问修饰符

public：公共修饰符

表示属性或方法都是公有的，在类的内部，子类的内部，类的实例都能被访问,默认情况下，为public

class People {

    public name : string

    constructor (name:string) { //构造函数必须写

        this.name = name

    }

    public say () :void {

console.log('你好')

    }

}

private 私有修饰符

表示在当前类中可以访问，子类，外部类不可以访问

class People {

    private name : string

    constructor (name:string) { //构造函数必须写

        this.name = name

    }

    private say () :void {

console.log('你好')

    }
 }

protected 保护类型

表示在当前类中和子类中可以访问，外部类不可以访问

class People {

    protected name : string

    constructor (name:string) { //构造函数必须写

        this.name = name

    }

    protected say () :void {

console.log('你好')

    }

}

TypeScript 只做编译时检查，当你试图在类外部访问被 private 或者 protected 修饰的属性或方法时，TS 会报错，但是它并不能阻止你访问这些属性或方法。

readonly 只读修饰符

表示某个属性是只读的，不能被修改

class People {

readonlyname : string

    constructor (name:string) { //构造函数必须写

        this.name = name

    }

}

声明类

class People {

    name : string //默认为public

    age : number

    constructor (name:string, age:number) { // 构造函数必须写

        this.name = name

        this.age = age

    }

    say () :void {

console.log('你好')

    }

}

const HH : People = new People('含含', 21)

console.log(HH.name)

console.log(HH.age)

HH.say()

类的继承

class Student extends People {

    cm : number

    constructor (name:string, age:number, cm:number) {

        super(name, age) //super 继承父类的构造函数，并向构造函数传参，super必须写在第一行

        this.cm = cm

    }

    work () : void {

console.log('学习')

    }

}

const  stu1 : Student = new Student('liu', 22, 175)

console.log(stu1.name)

console.log(stu1.age)

console.log(stu1.cm)

stu1.say()

stu1.work()

静态属性和静态方法

静态方法和静态属性必须使用类名调用

静态属性和静态方法在实例化之前就已经存在

class People {

static name1 : string ='静态属性';

    static say () :void {

console.log('静态方法')

    }

}

console.log(People.name1)

People.say()

静态方法调用不了实例化方法和实例化属性，因为静态域加载是在解析阶段，而实例化是在初始化阶段，（java原理），所以静态方法里面不能调用本类的方法和属性，可以调用静态属性和静态方法。

多态

多态---->重写方法

父类定义一个方法不去实现，让继承它的子类去实现，每个子类的该方法有不同的表现。

class Animal {

    name : string

    constructor (name:string) {

        this.name = name

    }

    eat () : void {

        //让它的子类去实现不同的eat方法

    }

}

class Laohu extends Animal {

    constructor (name:string) {

        super(name)

    }

    eat () : void {

console.log(`${this.name}吃肉！`)

    }

}

class Laoshu extends Animal {

    constructor (name:string) {

        super(name)

    }

    eat () : void {

console.log(`${this.name}吃粮食！`)

    }

}

const laohu : Laohu = new Laohu('老虎')

laohu.eat()

const  laoshu : Laoshu = new Laoshu('老鼠')

laoshu.eat()

类和接口

类可以实现（implement）接口。通过接口，你可以强制地指明类遵守某个契约。你可以在接口中声明一个方法，然后要求类去具体实现它。

接口不可以被实例化，实现接口必须重写接口中的抽象方法

interface Play {

    plays (difang:string) : void;

}

class Playy implements Play {

    plays(difang: string): void {

console.log(`我们要去${difang}玩！！！`)

    }

}

const pl : Playy = new Playy();

pl.plays('北京')

注意：类和接口的区别

类可以实现（implement）多个接口，但只能扩展（extends）自一个抽象类。

抽象类中可以包含具体实现，接口不能。

抽象类在运行时是可见的，可以通过 instanceof判断。接口则只在编译时起作用。

接口只能描述类的公共（public）部分，不会检查私有成员，而抽象类没有这样的限制。

抽象类和抽象方法

用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类(抽象类的子类)中实现

抽象类：它是提供其他类继承的基类，不能直接被实例化，子类继承可以被实例化

abstract修饰的方法(抽象方法)只能放在抽象类里面

抽象类和抽象方法用来定义标准(比如定义标准为：抽象类Animal有抽象方法eat，要求它的子类必须包含eat方法)

abstract class People {

    name : string

    constructor (name:string) {

        this.name = name

    }

    abstract eat (food:string) :void;//抽象方法不包括具体实现，并且必须再派生类中实现

}

class Stud1 extends People {

    //抽象类的子类必须实现抽象类中的抽象方法

    constructor (name:string) {

        super(name)

    }

    eat(food: string): void {

console.log(`我爱吃${food}`)

    }

}

const stu11 : Stud1 = new Stud1('liu')

stu11.eat('面条')

四，接口

接口定义：接口是对传入参数进行约束；或者对类里面的属性和方法进行声明和约束，实现这个接口的类必须实现该接口里面属性和方法；typescript中的接口用interface关键字定义。

接口作用：接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。typescrip中的接口类似于java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等。

属性接口

对传入对象的约束，也就是json数据

interface Sx {

    name : string

    age : number

}

functionf8(peop:Sx) {

    //name age 必须传递

    console.log(peop)

}

const obj = {

name :'liu',

    age : 25

}

f8(obj)

函数类型的接口

对方法传入的参数和返回值进行约束

interface Sta {

    (difang : string, todo : string) : string

}

letplay : Sta = (difang:string, todo:string) : string => {

return`我们去${difang}吃${todo}`

}

console.log(play('灞桥','吃烧烤'))

可索引的接口

对索引和传入的参数的约束

//对数组的约束

interface UserArr {

    //索引为number，参数为string

    [index : number] : string

}

const arr : UserArr = ['a','b']

console.log(arr)

//对 对象的约束

interface UserObj {

    [index : number] : number

}

const obj1 : UserObj = { 2:1, 3:4 }

console.dir(obj1)

类类型接口

对类的约束

interface Anmal {

    //对类里面的属性和方法进行约束

    name : string

    eat (food:string) : void

}

//类实现接口要用implements , 子类必须实现接口里面声明的属性和方法

class Laoshu implements Anmal{

    name : string

    constructor (name : string) {

        this.name = name

    }

    eat(food:string):void {

console.log(`${this.name}吃${food}`)

    }

}

const lao : Laoshu = new Laoshu('老鼠')

lao.eat('粮食')

接口继承

//父类Anmal看上面

//实现LaoHu的这个接口，必须也要实现LaoHu继承的Anmal接口中的方法

interface LaoHu extends Anmal{

    say (sa : string) : void

}

//继承并实现接口

class XiaoLaoHu implements LaoHu{

    name : string

    constructor (name : string) {

        this.name = name

    }

    eat (food : string) : void {

console.log(`${this.name}吃${food}`)

    }

    say(sa: string): void {

console.log(`${this.name}说${sa}`)

    }

}

const xiao : XiaoLaoHu = new XiaoLaoHu('老虎')

xiao.eat('肉')

xiao.say('你好')

五，泛型

很多时候，类型是写死的，不利于复用，泛型可以简单的理解为给类型的这种值设置变量，解决类，接口

方法的复用性，以及对不特定数据类型的支持

语法 : <类型变量名> 一般是单字母大写

泛型函数

函数再调用时，指定泛型T的类型

functionf9(value:T) : T {

    //传入参数类型为T，返回值的类型也为T

console.log(`我传入了${value}`)

returnvalue

}

f9<number>(10)

functionf10 (value:T) : any {

    //传入参数的类型为T，返回任意类型的值

console.log(`我返回了${value}`)

return`我返回了${value}`

}

console.log(f10('我是ljy'))

泛型类

泛型类，使用 < > 跟在类名后面

class Ni <T> {

    name : T

    constructor (name : T) {

        this.name = name

    }

    say (value : T) : any {

return`${this.name}说${value}`

    }

}

const ni1 = new Ni('ljy')//实例化类，指定类的类型是string

console.log(ni1.say('你好'))

const ni2 = new Ni<number>(20)//实例化类，指定类的类型是number

console.log(ni2.say(23))

泛型接口

第一种

interface Niniubi {

    <T> (value:T) : any

}

letfff : Niniubi = (value : T) : any => {

return`我传入了${value}`

}

console.log(fff<number>(25))

console.log(fff('ljy'))

第二种

interface ConfigFnTwo<T>{

    (value:T):T;

}

functionsetDataTwo(value:T):T{

returnvalue

}

varsetDataTwoFn:ConfigFnTwo =setDataTwo

setDataTwoFn('name');

六，命名空间

namespace Shuaige {

exportclass DeHua {

public name : string ='刘德华'

say() {

console.log(`我是${this.name}`)

        }

    }

}

namespace Bajie {

exportclass DeHua {

public name : string ='马德华'

say() {

console.log(`我是${this.name}`)

        }

    }

}

const de : Shuaige.DeHua = new Shuaige.DeHua()

de.say()

const de1 : Bajie.DeHua = new Bajie.DeHua()

de1.say()

七, 联合类型

联合类型表示一个值可以是几种类型之一，我们使用（ | ）分隔每个类型

联合类型的变量在被赋值的时候，会根据类型推论的规则推断出一个类型

如果一个值是联合类型，我们只能访问此联合类型的所有类型里面共有的成员

letddd : string | number

ddd ='nihao'

console.log(ddd.length)//ddd被推断成了 string，访问它的 length 属性不会报错

console.log(`联合类型${ddd}`)

ddd = 255

console.log(`联合类型${ddd}`)

console.log(ddd.length)//报错 ddd被推断成了 number，访问它的 length 属性时就报错了

//ddd =falseerr

//console.log(`联合类型${ddd}`)  err

访问联合类型的属性或方法

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法：

functionf11(name : string, age : string | number) {

    console.log(age.length)//报错

}

f11('ljy','21')

报错：Property'length'does not exist ontype'string | number'.Property'length'does not exist ontype'number'.

上例中，length 不是 string 和 number 的共有属性，所以会报错。所以只能访问类型的共有的属性或方法

functionf12(name : string, age : string | number) {

    console.log(age.toString)

}

f12('ljy', 21)

八，类型断言

类型断言（Type Assertion）可以用来手动指定一个值的类型。

语法：<类型>值或值 as 类型

类型断言的用法如上，在需要断言的变量前加上即可

就刚才上边TypeScript 不确定一个联合类型的变量到底是哪个类型的时候来说

functionf13(name : string, age : string | number) {

if(age.length) { //报错

        console.log(age.length) //报错

}else{

        console.log(age.toString)

    }

}

f13('ljy', 21)//Property'length'does not exist ontype'string |number'.Property'length'does not exist ontype'number'

此时可以使用类型断言，将 age 断言成 string

functionf14(name : string, age : string | number) {

if((age).length) {//断言

        console.log((<string>age).length)//断言

}else{

        console.log(age.toString)

    }

}

f14('ljy', 21)

类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的：

functiontoBoolean(something: string | number): boolean {

returnsomething;

}

Type'string | number'cannot be converted totype'boolean'

大莲芒

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫