青训营TypeScript学习笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第4天 typescript是一种静态类型的，弱类型语言，与JS相比，JS是动态类型，弱类型语言。 TypeScript 是由微软开发的一款开源的编程语言，TypeScript 是 Javascript 的超集，遵循最新的 ES6、ES5 规范，TypeScript 扩展了 JavaScript 的语法。TypeScript 更像后端 Java、C#这样的面向对象语言，可以让 JavaScript 开发大型企业项目。

静态类型意思是：1.可读性增强：基于语法解析TSDoc，ide增强，2.可维护性增强：在编译阶段暴露大部分错误，有利于多人合作的大项目中，获得更好的稳定性和开发效率。

TypeScript4数据类型 变量格式一： let 变量名: 变量类型 = 初始化值;

变量格式二： let 变量名: 变量类型 | undefined; 变量名 = 变量值;

布尔类型： let flag: boolean = true; console.log(flag);

数字类型 整数型： let num: number = 123; console.log(num);

浮点型： let num: number = 3.1415926; console.log(num); 字符串类型 let str: string = "Hello,TypeScript"; console.log(str);

数组类型 第一种定义数组的方式：以数字类型数组为例 let arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]; console.log(arr);

第二种定义数组的方式：以数字类型数组为例 let arr: Array<number> = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]; console.log(arr);

枚举类型 enum 枚举名 { 标识符[= 整型常数/字符串], 标识符[= 整型常数/字符串], ... 标识符[= 整型常数/字符串], };

函数格式 function 函数名(参数列表): 返回值类型 { 函数体 ... [return 返回值;] } 或 let 函数名 = function (参数列表): 返回值类型 { 函数体 ... [return 返回值;] };

重载函数 重载指的是两个或者两个以上同名函数，但它们的参数不一样，这时会出现函数重载的情况。

TypeScript 中的重载是通过为同一个函数提供多个函数类型声明来实现函数重载的功能的。

function getInfo(name: string): string;
function getInfo(name: string, age: number): string;

function getInfo(name: string, age?: string | number): string {
    if (age) {

        return "我叫：" + name + "，年龄：" + age;
    } else {

        return "我叫：" + name;
    }
}

console.log(getInfo("zhangsan"));// 正确
console.log(getInfo("lisi", 20));// 正确
console.log(getInfo(123));// 错误

箭头函数

setTimeout(function () {
    console.log("匿名函数执行了...");
}, 1000);

setTimeout(() => {
    console.log("箭头函数执行了...");
}, 1000);

在 TypeScript 中，如果我们显式声明函数的返回值类型为 undfined，将会得到如下所示的错误提醒。 function fn(): undefined { // ts(2355) A function whose declared type is neither 'void' nor 'any' must return a value // TODO }

正确的做法是使用 void 类型来表示函数没有返回值的类型（这是“废柴” void 类型唯一有用的场景） function fn1(): void { } fn1().doSomething(); // ts(2339) Property 'doSomething' does not exist on type 'void' 我们可以使用类似定义箭头函数的语法来表示函数类型的参数和返回值类型，此时=> 类型仅仅用来定义一个函数类型而不用实现这个函数。

需要注意的是，这里的=>与 ES6 中箭头函数的=>有所不同。TypeScript 函数类型中的=>用来表示函数的定义，其左侧是函数的参数类型，右侧是函数的返回值类型；而 ES6 中的=>是函数的实现。