JavaScript & TypeScript 学习总结

一.TypeScript 简介

1. TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。
2. TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。
3. TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。

二.javaScript 和 TypeScript 的概要介绍

TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言

1.JavaScript

JavaScript 是一种轻量级的解释性脚本语言，可嵌入到 HTML 页面中，为用户带来流畅多样的用户体验.
JavaScript 是基于对象和事件驱动的，无需特定的语言环境，只需在支持的浏览器上就能运行。
JavaScript 语言具有以下特点:

• JavaScript 的语法简单，使用的变量为弱类型。
• JavaScript 兼容性较好，能够与其他技术（如 XML，REST API 等）一起使用。
• JavaScript 语言较为安全，仅在浏览器端执行，不会访问本地硬盘数据。
• JavaScript 只依赖于浏览器，与操作系统的因素无关。因此 JavaScript 是一种跨平台的语言。

2.TypeScript

TypeScript 是 Microsoft 开发和维护的一种面向对象的编程语言,可以载入 JavaScript 代码运行
TypeScript 具有以下特点:

• TypeScript 可用于开发大型的应用
• TypeScript 易学易于理解
• TypeScript 增加了静态类型、类、模块、接口和类型注解
• TypeScript 是 Microsoft 推出的开源语言，使用 Apache 授权协议

四.TypeScript 的优势

1.大型的开发项目

有时为了改进开发项目,需要对代码库进行小的增量更改.这些小小的变化可能会产生严重的、意想不到的后果，因此有必要撤销这些变化。使用TypeScript工具来进行重构更变的容易、快捷。

2.静态输入

静态类型化是一种功能，可以在开发人员编写脚本时检测错误。查找并修复错误是当今开发团队的迫切需求。有了这项功能，就会允许开发人员编写更健壮的代码并对其进行维护，以便使得代码质量更好、更清晰。

3.更好的协作

当发开大型项目时，会有许多开发人员，此时乱码和错误的机也会增加。类型安全是一种在编码期间检测错误的功能，而不是在编译项目时检测错误。这为开发团队创建了一个更高效的编码和调试过程。

4.更强的生产力

干净的 ECMAScript 6 代码，自动完成和动态输入等因素有助于提高开发人员的工作效率。这些功能也有助于编译器创建优化的代码。

五.JavaScript 的优势

1.人气

JavaScript 的开发者社区可以很方便地找到大量成熟的开发项目和可用资源。

2.本地浏览器支持

TypeScript 代码需要被编译（输出 JavaScript 代码），这是 TypeScript 代码执行时的一个额外的步骤。

3.不需要注释

为了充分利用 TypeScript 特性，开发人员需要不断注释他们的代码，这可能会使项目效率降低。

4.灵活性

有些开发人员更喜欢 JavaScript 的灵活性。

六.TypeScript 开发环境搭建和编译代码

1.下载 Node.js

node.js 管网:https://nodejs.org/zh-cn/

2.安装 Node.js

这里就不详细说了,直接下一步就可以了

3.使用npm全局安装typescript

// 安装：   进入 cmd 命令行
npm install -g typescript
// 查看版本
tsc -v

注意点：编写ts文件，运行ts文件是先编译成js后在执行

4.编译代码

在命令行上，运行TypeScript编译器：

tsc greeter.ts

输出结果为一个greeter.js文件，它包含了和输入文件中相同的JavsScript代码。

七.基础类型

js基础类型分为两种：原始类型和对象类型，其中原始类型包括：数值、字符串、布尔值、null、undefined以及es6中的symbol、biignt。
ts支持与js几乎相同的数据类型。

1.布尔值/字符串/数值

// 声明一个变量a,同时指定它的类型为number
let a: number;
// a 的类型设置为number,在以后的使用过程中a的值只能是数字
a = 10;
// a = 'hello'   // 此行代码会报错,因为变量a的类型是number,不能赋值字符串

let b: string;
b = 'hello';

// 声明完变量直接进行赋值
// let c:boolean = false;

// 如果变量的声明和赋值是同时进行的.Ts可以自动对变量进行类型检测
let c = false;
c = true;

//声明变量没有设置类型和初始值，类型可以是任意类型，默认初始值为 undefined：
//var [变量名];
var cord;

(1). 如果变量的声明和赋值是同时进行的，ts可以自动对变量进行类型检测。

let str: string;
str = 'hello';
str = 9; // 报错

2.null和undefined

//这两个类型只有 自己
const onlyNull: null = null;
const onlyUndefined: undefined = undefined;

3.数组

TS里手动指明一个数组类型很简单，只需要在普通类型注解后面加上[]符号。比如声明一个布尔数组为 :boolean[]

//数组泛型，Array<元素类型>
let list: Array<number> = [1, 2, 3];

//string[] 字符串数组
let list: string[];
list = ['a', 'b', 'c'];

//number[] 数值数组
let list: number[] = [1, 2, 3];

示例如下:

let boolArray: boolean[];

boolArray = [true, false];
console.log(boolArray[0]);     // true
console.log(boolArray.length); // 2
boolArray[1] = true;
boolArray = [false, false];

boolArray[0] = 'false';        // 错误
boolArray = 'false';           // 错误
boolArray = [true, 'false'];   // 错误

4.元组

元组:元组就是固定长度的数组
元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同

// 语法：[类型, 类型, 类型]
let list: [string, number];
list = ['hello', 123];

list = ['hello'];// 报错
list = [123, 'hello']; // 顺序不一致
list = ['hello', 123, 11]; // 多余

5.| 和 &

// | 或 表示可以是字符串或数值,只要有一个符合就行
let str: string | number;

str = 1;
console.log(str.length)// 报错
str = 'hello';
console.log(str.length)// 正常运行
str = false; //报错

//& 表示同时,必须都符合
let str2: {name: string} & {age: number};
str2 = {name: '嘿嘿'}; //报错
str2 = {name: '嘿嘿', age: 18};

6.function

1. 默认参数( = )就是可以给 参数一个默认值 同时也可以给指定一个类型

const add = (a: number = 10, b: number = 20): number => {
     return a + b
};
let result = add();
console.log(result);      // 30

2. 因为指定了默认参数 add() 函数中在没有传递任何参数的时候 就按照给出的默认值去执行

const add = (a: number = 10, b: number = 20, c: number): number => {
     return a + b + c
};
let result = add(undefined, undefined);

上面 add() 函数设定了3个参数 但是我在执行的时候只传递了 2 个占位参数,所以会报错

3. 在 js 中都可以不传递所有参数的 那么如何解决这个问题呢？

两个方法:

1. 直接 用 undefined 做占位符传递一个 c 参数进去就好了

const add = (a: number = 10, b: number = 20, c: number): number => {
     return a + b + c
};
let result = add(undefined, undefined, 30);    // 60

1. 可选参数

// 可选参数( ? )就是 这个参数可以是不传的
const add = (a: number = 10, b: number = 20, c?: number): number => {
     return a + b + c
};
let result = add();
console.log(result);      // 30

这样的函数方法 一个参数都不用传递 还可以正常运行

总结:TypeScript 正在成为开发大型编码项目的有力工具。因为其面向对象编程语言的结构保持了代码的清洁、一致和简单的调试。因此在应对大型开发项目时，使用 TypeScript 更加合适。如果有一个相对较小的编码项目，似乎没有必要使用 TypeScript，只需使用灵活的 JavaScript 即可。