这是我参与「第五届青训营」伴学笔记创作活动的第 21 天
一、本堂课重点内容
1.TypeScript与JavaScript之间的关系
2.TypeScript的优势
3.TypeScript基本语法
二、详细知识点介绍
1.TypeScript简介
1.1 TypeScript的发展
TypeScript是一种流行的前端开发工具，并且它与 JavaScript 息息相关，但是它并不是 JavaScript 的孪生兄弟，也不是一个新的语言，用大家公认的说法，TypeScript 是作为JavaScript 的超集出现的，可以理解为，TypeScript 是进化版的 JavaScript。2012年10月，微软发布了 TypeScript 的第一个版本（0.8）。到今天，TypeScript 已经发展到了V4.5版本，我们熟知的VSCode就是利用了这项工具开发出来的。
1.2 TypeScript 与 JavaScript 的异同
相同之处： 它们都是弱类型语言，在进行运算的时候会自动进行数据类型的转换和兼容，而强类型语言则无法完成不同类型的运算，如整形数据无法和字符型数据进行运算。
不同之处： JS是动态类型语言，而TS是静态类型语言，这就表明JS出现的一些问题只有在运行时才会被发现；而TS的更容易提前发现错误。
2.TypeScript的优势
首先就是静态类型这一特点，它的优势在于：
- 可读性增强：基于语法解析TSDoc，ide增强
- 可维护性增强，在编译阶段就暴露大部分错误
- 在多人合作的大型项目中，获得更好的稳定性和开发效率
其次是作为JS的超集，TS包含于兼容所有JS特性，支持共存；支持渐进式引入和升级。总的来说，JavaScript 有的，TypeScript都有，而且做得更好。JavaScript 没有的，TS也有，而且在很长一段时间内不会被 JavaScript 赶上。
3.基本语法
基础数据类型
/*字符串*/
const q: string = 'string ' ;/*数字*/
const w: number = 1;/*布尔值*/
const e: boolean = true;/* null */
const r: null = null;/* undefined */
const t: undefined = undefined;
与JS语法十分类似，都使用const关键字，但是需要在定义名后加一个冒号，之后写下数据类型以及取值。
对象类型
const bytedancer: IBytedancer = {
jobId: 9303245,
name: 'Lin ',sex: 'man ' ,age: 28,
hobby: 'swimming ' ,}
/* 关键字interface表示接口，是一种定义模式 */
interface IBytedancer {
/*只读属性:约束属性不可在对象初始化外赋值*/
readonly jobId: number;
name: string;
sex: 'man' \ ‘woman' \ 'other' ;age: number;
/*可选属性:加上“？”定义该属性可以不存在*/
hobby? : string;
/*任意属性:约束所有对象属性都必须是该属性的子类型*/
[key: string] : any;
}
在定义之后运行下图所示的代码，就会出现注释里面的情况：
/*报错:无法分配到"jobId"，因为它是只读属性*/
bytedancer.jobId = 12345;
/*成功:任意属性标注下可以添加任意属性*/
bytedancer.plateform = 'data ';
/*报错:缺少属性“name" , hobby可缺省*/
const bytedancer2: IBytedancer = {
jobId: 89757,
sex: 'woman',
age: 18,
}
函数类型
在实现第一个函数时，需要定义函数类型，此时可以用后面两串代码来进行函数类型的定义:
function add(x, y){
return x + y;
}
const mult = (x+y) => x * y
interface IMult {
(x: number, y: number): number;}
const mult: IMult = (x,y)=→>X*y;
function add(x:number, y: number): number {
return x + y;
}
const mult: (x: number,y: number) => number = (x, y)=>X*y;
函数重载
用TS进行函数重载时，会在代码编写时进行提示，不同的数据类型适合什么样的参数，以及当函数引入参数错误的时候会进行提示。
/*对getDate函数进行重载， timestamp为可缺省参数*/
function getDate(type: 'string ' , timestamp?: string): string;
interface IGetDate i
(type: 'string', timestamp?: string) : string;
(type: 'date ', timestamp? : string): Date;
(type: 'string' | 'date ' , timestamp?: string): Date | string;}
/*
不能将类型"(type: any,timestamp: any) => string | Date"分配给类型"IGetDate"。
不能将类型"“string | Date"分配给类型"string”。
不能将类型“Date”分配给类型"string"。ts(2322)
*/
const getDate2: IGetDate = (type, timestamp) => {
const date = new Date(timestamp );
return type == 'string' ? date.toLocaleString() : date;}
数组类型
/*「类型＋方括号」表示*/
type IArr1 = number[];
/*泛型表示*/
type IArr2 = Array<string | number | Record<string,number>>;
/*元祖表示*/
type IArr3 =[number, number, string,stringl ;
/*接口表示*/
interface IArr4 {
[key: number] : any;
}
const arr1: IArr1 = [1,2，3,4，5,6];
const arr2: IArr2 = [1，2，'3','4', { a: 1 }];const arr3: IArr3 = [1,2，'3','4'];
const arr4: IArr4 = [ 'string' ,() => null,{，[]];
补充类型
/*空类型，表示无赋值*/
type IEmptyFunction = () => void;
/* */
type IAnyType =any;
/* */
enum EnumExample{
add = '+',
mult = '*',
}
EnumExample['add'] === '+';
EnumExample['+'] === 'add';
enum EColor{Mon, Tue, Wed, Thu, Fri, Sat, Sun };
Ecolpr[0] === 'Mon';
/* 泛型 */
type INumArr = Array<number>;
三、个人课后总结
对于TypeScript来说，不仅仅是基于JavaScript的一个扩展，更是在数据类型方面取得了重大的突破，我们都知道 TypeScript 最主要的亮点是它的类型系统，这使得在编写代码的时候就能够检测到一些错误。而 JavaScript 是一门动态脚本语言，它不需要编译成二进制代码运行。Node 服务端代码也不需编译即可在服务器起一个服务，你甚至可以直接在服务器修改你的服务代码然后重启就可以，不需要编译等操作。这一切特点使得 JS 的所有调试都需要在运行时才能进行，在编写代码的时候很多问题是无法提前知晓的，而且就JavaScript目前的使用场景来看，它在至少很长一段时间内会保持这样的特点。
而 TypeScript 和 JavaScript 不同的就是，它可以在你编写代码的时候，就对一些错误进行提示，还能在你使用某个数据的时候，列出这个数据可以访问的属性和方法。当我们的项目较为庞大，需要由多人合作开发时，多人协作是需要沟通成本和 review 成本的。一些接口的定义，一些方法的使用，都可能因为个人习惯或沟通不畅导致逻辑实现的差异。而如果引入TypeScript，则会对一些实现进行强校验。如果不按接口实现，编译就没法通过，如果对代码质量要求较高，可以将严格检查全部打开，效果更好。
对于适合使用TypeScript的工作，大概有这样几种：
- 需要多人合作开发的项目
- 开源项目，尤其是工具函数或组件库
- 对代码质量有很高要求的项目
