玩转TypeScript之函数和枚举

2023-05-16

TypeScript加更中💭💭💭今天继续更新TypeScript内容,需要的朋友可以收藏💨

文章目录

  • 函数
    • 语法格式🌄
      • 匿名函数自调用
    • Lambda 函数🏜️
    • 无参版本🌅
    • 玩玩有参🌆(为函数定义类型)
    • 玩玩参数默认值🌃
    • 玩玩参数可选操作🌇
    • 剩余参数☃️
    • 函数重载
  • 枚举
    • 注意点

函数

语法格式🌄

和JavaScript一样,TypeScript函数可以创建有名字的函数和匿名函数。 你可以随意选择适合应用程序的方式,不论是定义一系列API函数还是只使用一次的函数。

// Named function
function add(x, y) {
    return x + y;
}

// Anonymous function
let myAdd = function(x, y) { return x + y; };

匿名函数是一个没有函数名的函数。
匿名函数在程序运行时动态声明,除了没有函数名外,其他的与标准函数一样。
我们可以将匿名函数赋值给一个变量,这种表达式就成为函数表达式。

匿名函数自调用

匿名函数自调用在函数后使用 () 就ok🏌️‍♂️🏌️‍♂️

(function () { 
    var x = "Hello!!";   
    console.log(x)     
 })()

Lambda 函数🏜️

Lambda 函数也称之为箭头函数
箭头函数表达式的语法比函数表达式更短

var foo = (x:number)=>10 + x 
console.log(foo(100))      //输出结果为 110

无参版本🌅

function test() {   // 函数定义
    console.log("调用函数") 
} 
test()              // 调用函数

在这里插入图片描述

玩玩有参🌆(为函数定义类型)

函数类型包含两部分:参数类型和返回值类型。

import { log } from "console";

const fn = function(name:string, age:number):string{
    return name+age;
}
let a = fn("李四",19);
log(a)

在这里插入图片描述

我们可以给每个参数添加类型之后再为函数本身添加返回值类型。 TypeScript能够根据返回语句自动推断出返回值类型,因此我们通常省略它。 这叫做“按上下文归类”,是类型推论的一种。 它帮助我们更好地为程序指定类型。

玩玩参数默认值🌃

const fn = function(name:string, age:number = 18):string{
    return name+age;
}
let a = fn("李四");
log(a)

在这里插入图片描述

玩玩参数可选操作🌇

JavaScript里,每个参数都是可选的,可传可不传。 没传参的时候,它的值就是undefined。 在TypeScript里我们可以在参数名旁使用?实现可选参数的功能。

import { log } from "console";

const fn = function(name:string, age?:number):string{
    return name+age;
}
let a = fn("李四");
log(a)

在这里插入图片描述

不传入值的话那就默认是undefined,否则就是你写入的值😏😏

在这里插入图片描述

剩余参数☃️

必要参数,默认参数和可选参数有个共同点:它们表示某一个参数。 有时,你想同时操作多个参数,或者你并不知道会有多少参数传递进来。 在JavaScript里,你可以使用arguments来访问所有传入的参数。(这个使用应该很熟悉吧~)

在TypeScript里,我们可以把所有参数收集到一个变量里

function buildName(firstName: string, ...restOfName: string[]) {
    log(restOfName[0]);
    return firstName + " " + restOfName.join(" ");
  }
  
  let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
  log(employeeName)

剩余参数会被当做个数不限的可选参数可以一个都没有,同样也可以有任意个。 编译器创建参数数组,名字是你在省略号(…)后面给定的名字,你可以在函数体内使用这个数组。

在这里插入图片描述

函数重载

重载是方法名字相同,而参数不同,返回类型可以相同也可以不同
每个重载的方法(或者构造函数)都必须有一个独一无二的参数类型列表

参数类型不同:

function my(string):void; 
function my(number):void;

参数数量不同:

function my(n1:number):void; 
function my(n1:number,n2:number):void;

参数类型顺序不同:

function my(n1:number,s1:string):void; 
function my(s:string,n:number):void;

如果参数类型不同,则参数类型应设置为 any。
参数数量不同你可以将不同的参数设置为可选
(总之就是玩起来就行)

枚举

“枚举类型用于定义数值集合。”

使用枚举我们可以定义一些有名字的数字常量。 枚举通过enum关键字来定义。😏😏举个小例子😏

  enum MyEnum {
    a = 1,
    b,
    c,
    d
}
console.log(MyEnum.a);  //1
console.log(MyEnum.b);  //2
console.log(MyEnum.c);  //3
console.log(MyEnum.d);  //4

不给初始值的话,那么默认就是0

一个枚举类型可以包含零个或多个枚举成员。 枚举成员具有一个数字值,它可以是常数或是计算得出的值 当满足如下条件时,枚举成员被当作是常数
1️⃣不具有初始化函数并且之前的枚举成员是常数。 在这种情况下,当前枚举成员的值为上一个枚举成员的值加1。 但第一个枚举元素是个例外。 如果它没有初始化方法,那么它的初始值为0。
2️⃣枚举成员使用常数枚举表达式初始化。 常数枚举表达式是TypeScript表达式的子集,它可以在编译阶段求值。 当一个表达式满足下面条件之一时,它就是一个常数枚举表达式:
数字字面量
引用之前定义的常数枚举成员(可以是在不同的枚举类型中定义的) 如果这个成员是在同一个枚举类型中定义的,可以使用非限定名来引用。
带括号的常数枚举表达式
+, -, ~ 一元运算符应用于常数枚举表达式
+, -, *, /, %, <<, >>, >>>, &, |, ^ 二元运算符,常数枚举表达式做为其一个操作对象。 若常数枚举表达式求值后为NaN或Infinity,则会在编译阶段报错。

除了上面列举的几种情况外,所有其它情况的枚举成员被当作是需要计算得出的值。

注意点

这里注意一下这三者的差别!!🪐🪐🪐

enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c);    // 输出 2
console.log(Color[0]);  //Red
console.log(Color[c]);  // Blue

特殊情况:如果第一个枚举值是不是常量,而是通过计算得到的,那么后续的枚举值就必须先设定一个“初始值”,比如下面这种情况的话编译会报错:

在这里插入图片描述

枚举值A是通过其他方法计算得到,那么从A的下一位也就是B开始,要为其设置初始值,不然会报错,现在假设为B设定一个初始值:

在这里插入图片描述

可以看到不再报错,并且B的下一位C的值是2

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

玩转TypeScript之函数和枚举 的相关文章

随机推荐