TypeScript发展与基本语法 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

TypeScript与JavaScript对比

TypeScript是JavaScript 的一个超集，设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的JavaScript可以运行在任何浏览器上。

JavaScript：动态类型语言，弱类型语言，适合用于简单的应用程序
Typescript：静态类型语言，弱类型语言，适合用于开发大型的应用
动态语言：在执行阶段进行类型的匹配
静态语言：在执行之前会进行一个编译的流程，可以暴露出大部分错误

相比于javascript的优势

1. 编译可以提前暴露bug，提升开发效率，有更好的编码体验。
2. TypeScript支持模块，因此它允许模块化编程。
3. 强大的类型系统提升了代码的可维护性，使得重构代码更加容易。
4. TypeScript兼容第三方库，提供了更好的API文档，而且总是与源代码同步。
5. TypeScript支持最新的ECMAScript语法。
6. 在用Typescript编写的函数代码中允许任意数量的可选参数。

TypeScript一些基本语法

定义变量：
const 变量名: 数据类型 = 初始值;

数组：

/*[类型 ＋方括号]表示 */
type IArr1 = number[];
/* 泛型表示 */
type IArr2 = Array<string | number | Record<string, number>>;
/* 元组表示 */
type IArr3 = [number, number, string, string];
/* 接口表示 */
interface IArr4 {
[key: number]: any;
}

函数：
主要是可以补充函数的参数类型还有返回值类型。
const 函数名: (参数1: 数据类型, 参数1: 数据类型, ...) => 返回值类型 =

函数重载：方法名字相同，参数不同，返回类型可以相同也可以不同。

function getDate(type: 'string' timestamp?: string): string; 
function getDate(type: 'date' timestamp?: string): Date; 

对象类型：

interface 接口名称 {
    变量名: 数据类型;
    /* 只读属性 */
    readonly 变量名: 数据类型;
    /* 可选属性 */
    变量名?: 数据类型;
    /* 任意属性(这里补充说明：key值是一个字符串，value是任意值，并且可有可无) */
    [key: string]: any;
}
const 对象名: 接口名 = {
    属性名: 属性值;
}