前端之TypeScript | 青训营笔记

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

本堂课重点内容：

TypeScript 历史、优势
联合交叉类型
类型保护与类型守卫
Merge 函数类型实现
函数返回值类型
TypeScript 工程应用

一、TypeScript简介

TypeScript 是由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

TypeScript 是为大型应用之开发而设计，通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。

优点

TypeScript不会阻止JavaScript的运行
代码可读性、健壮性提高，增强了可维护性
应用场景：组件、接口传参/获取数据，避免少传、多传、传错数据类型

二、基本语法

基础数据类型

null、undefined、 symbol、boolean、void、number、string、never、any

 // 参考https://juejin.cn/post/6981319737233899557
 let names: string = "jack";
 let age: number = 13;
 let flag: boolean = true;
 let grade: void = undefined;
 
 let x: any = 1;    // number类型
 x = 'test';    // string类型
 x = false;    // boolean类型
 
 let y: never;
 let z: number;
 
 // 错误，数字类型不能转为 never 类型
 y = 123;
 
 // 正确，never 类型可以赋值给 never类型
 y = (()=>{ throw new Error('exception')})();
 
 // 返回值为 never 的函数可以是抛出异常的情况
 function error(message: string): never {
     throw new Error(message);
 }
 
 // 返回值为 never 的函数可以是无法被执行到的终止点的情况
 function loop(): never {
     while (true) {}
 }

对象类型

对象是包含一组键值对的实例，值可以是标量、函数、数组、对象等。

 class Person {}
 const student: { name: string; age: number; } = { name: 'hua', age: 18 };
 const numbers: number[] = [1, 2, 3];
 const strs: string[] = ['1', '2', '3'];
 const xiaoming: Person = new Person();
 const getTotal: () => number = () => {
     return 123;
 };
 
 // 参考https://juejin.cn/post/6981319737233899557

函数类型

 function add(x: number, y: number): number {
     return x + y;
 }
 console.log(add(1,2))  // 3

数组类型

使用单独的变量名来存储一系列的值

 // 创建一个 number 类型的数组
 var numlist:number[] = [2,4,6,8]

三、高级类型

联合/交叉类型

参考：www.jianshu.com/p/755dd03b7…

TypeScript的基础类型、函数类型等，它们都是单一的类型元素。在实际编程场景，我们还需要通过组合/结合单一类型构造更复杂的类型，以此描述更复杂的数据和结构。这就是使用联合和交叉类型。

联合类型: IA | IB；联合类型表示一个值可以是几种类型之一
交叉类型: IA & IB；多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性

类型保护与类型守卫

 interface IA {a: 1, a1: 2}
 interface IB {b: 1，b1: 2}
 /* 类型守卫:定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域 */
 function getIsIA(arg : IA | IB) : arg is IA{
     return !! ( arg as IA ).a;
 }
 function log2(arg: IA | IB){
     if ( getIsIA(arg) ){
         console.log(arg.a1)}
     else {
         console.log(arg.b1);
     }
 }
 
 // 实现函数reverse
 // 实现函数logBook类型
 // 函数接受书本类型，并logger出相关特征
 function logBook(book:IBookItem){  //联合类型＋类型保护=自动类型推断
     if (book.type === 'history'){
         console.log(book.range)
     }
     else {
         console.loo(book.theme)
     }
 }

前端之TypeScript | 青训营笔记

前端之TypeScript | 青训营笔记

一、TypeScript简介

二、基本语法

基础数据类型

对象类型

函数类型

数组类型

三、高级类型

联合/交叉类型

类型保护与类型守卫

四、工程应用

Web

Node

使用TSC编译