javascript的超集 typescript详细解读

typescript的好处

typescript超越javascript点在于它

有了更多的通用语言方法

并且对于javascript有了更多的语言限制

确定返回值的类函数功能

这里的eat函数非常简洁后面一个小小的引号跟着void展现出了eat的返回值类型

观察下面这个函数可以帮你更好的体会到typescript的创新之处

const m2 = (name:string):string =>

{

        return name.toLowerCase()+msg

}

这是typescript详细解读

这段TypeScript代码定义了一个名为 m2 的函数，我们可以逐步拆解并解读其组成部分：

1. const m2 = (name: string): string => {...}:

   • const 关键字用于声明一个常量，这意味着一旦 m2 被赋予了一个函数定义，它的值就不应再被改变。
   • m2 是这个函数的名称。
   • (name: string) 定义了一个名为 name 的参数，类型为 string。这意味着当你调用这个函数时，必须传递一个字符串类型的参数给它。
   • : string 指出了这个函数的返回类型是 string，即这个函数将返回一个字符串值。

2. => {...}:

   • 这里使用了箭头函数的语法 (=>)，它是一种定义函数的简洁方式。箭头函数能够继承其所在上下文的 this 关键字。

3. return name.toLowerCase()+msg:

   • name.toLowerCase() 调用了字符串对象 name 的 toLowerCase() 方法，这个方法会将 name 中的所有字符转换为小写，然后返回转换后的字符串。
   • +msg 表示将 name.toLowerCase() 的返回值与另一个名为 msg 的变量的值进行字符串连接。这里有一个问题：在函数定义中并没有提及或定义 msg 变量，这可能是一个错误或遗漏，因为使用未定义的变量会导致运行时错误。

整体上，这段代码定义了一个函数 m2，它接收一个字符串参数 name，将其转为小写，然后尝试与一个未定义的变量 msg 的值进行连接，并返回结果字符串。

以上是对函数功能的解析

现在我们来看看

接口功能

并且可以通过后面加个问号来让数据变的可选

解下来还有更加惊喜的 非常完善的

类功能

这里的constructor可以作为构造类进行工作 做到了构造方法的自定义

而且在类的下方还能够自定义函数 属于是非常强大

study()
{       

console.log('[${this.name}]正在学习')

}

可以进行完整的类内部函数调用

console.log(u.name)

u.study()

这致命节奏展现了u.name的外部可访问性

和u.study的外部可调用性质

接口通过类的implement进行实现

//接口定义

interface Animal{

        name:string

        eat():void

}

//

class Bird implements Animal{

        name:string

        constructor(name:string){

                this.name=name

        }

        eat():void{

                console.log(this.name+'eat')

        }

}

//创建类型

const b1=new Bird('杜鹃')

console.log(b1.name)

b1.eat()

类的继承extends

class Parrot extends Bird{

        say():void{
                console.log(this.name+' say hello')

        }

}

const myParrot =new Parrot('Polly')

myParrot.say()

myParrot.eat()