TS入门 | 青训营笔记

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

本堂课重点内容

1. 1. TypeScript 历史及定义解析
   2. TypeScript 优势解读
   3. TypeScript 练习工具
2. 1. 联合交叉类型
   2. 类型保护与类型守卫
   3. Merge 函数类型实现
   4. 函数返回值类型
   5. TypeScript 工程应用

详细知识点

TS与JS

JS：动态类型、弱类型语言
TS：静态类型、弱类型语言

TS优势

可读性增强

可维护性增强

是JS的超集，包含兼容所有JS特性，支持共存、渐进式引入与升级

基本语法

1. 基本类型声明

   在JS的基础上增加了类型声明 let 变量：类型 ​

2. 对象类型

   使用interface接口

   interface IBytedancer {
   /* 只读属性:约束属性不可在对象初始化外赋值 */
   readonly jobId: number;
   name: string;
   sex: 'man'|'woman'| 'other';
   age: number;
   /* 可选属性: 定义该属性可以不存在 */
   hobby?: string;
   /* 任意属性: 约束所有对象属性都必须是该属性的子类型 */
   [key: string]: any;
   }
   

3. 函数类型

   定义参数和返回值的类型

   function add(x: number, y: number): number {
       return x + y;
   }
   const mult: (x: number, y: number)number = (x,y)=>X*y;
   

   同样可以使用interface接口

   interface IMult {
   (x: number，y: number): number;
   }
   const mult: IMult = (x,y) => x * y;
   

4. 数组类型

   /* 类型 + 方括号 表示 */
   type IArr1 = number[];
   /* 泛型表示 */
   type IArr2 = Array<string | number |Record<string,number>>;
   /* 元祖表示 */
   type IArr3 = [number, number, string, string];
   /* 接口表示 */
   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,{},[]];
   

5. ts补充类型

   void：空值; any：任意类型; enum：枚举，支持枚举值到枚举名的正、反向映射;

   let unusable: void = undefined;
   
   let d: any = 4;
   d = 'hello';
   d = true;
   
   enum EnumExample {
   add = '+';
   mult = '*';
   }
   
   EnumExample['add'] === '+';
   EnumExample['+']=== 'add';
   

6. 函数重载

   函数重载就是同一个函数，传递的参数不同（数量、类型），会有不同的表现形式

通过下面这个简单的例子可以认识函数重载

```ts
function double(x: number): number; // 输入是 number 类型，输出也是 number 类型
function double(x: string): string; 
function double(x: number | string): number | string {
    if (typeof x === 'number') {
        return x * 2;
    } else {
        return x + ', ' + x;
    }
}

let d = double(1);
```

7. typescipt泛型

泛型就是不预先指定具体类型，而在使用的时候在指定类型的一种特性。其实就是相当于定义了一个叫T的变量，它的类型只有在使用的时候才知道。

泛型在其他方面也有应用，比如泛型接口、泛型类。

高级语法：泛型约束和泛型参数默认类型

以上两种是常用的语法，对泛型的类型进行约束、设置默认的泛型类型

8. 类型别名&类型断言

   使用别名就是为某个类型或者类型集合创建一个新的名字，通常使用type关键字。

类型断言的作用就是告诉编译器某个值应该为一个更加确切的类型。

语法：值 as 类型 或 <类型>值

高级类型

1. 联合/交叉类型

   联合类型:​ |A |B; 联合类型表示一个值可以是几种类型之

   var val:string|number 
   val = 12 
   console.log("数字为 "+ val) 
   val = "Runoob" 
   console.log("字符串为 " + val)
   

   交叉类型: |A & B;多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性

   interface PersonInterface{
       name: string,
       age: number
   }
   interface StudentInterface{
       school: string
   }
   // 交叉类型必须满足所有类型
   let stu: PersonInterface & StudentInterface = {
       name: 'John',
       age: 18,
       shool: 'Oxford'
   }
   

2. 类型保护与类型守卫

   类型守卫: 定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域

工程应用

1. Webpack

• 配置webpack loader相关配置
• 配置tsconfig.js相关文件
• 运行webpack启动，打包
• loader处理ts文件时，会自动进行编译与类型检查

2. 使用TSC编译（node）

• 安装node与npm
• 使用npm安装tsc
• 配置tsconfig.js文件
• 使用tsc运行编译得到js文件

课后个人总结

从JavaScript到TypeScript是一个必然的过程，TS弥补了JS的不足之处，大大提高了前端开发的效率。从以上的知识点可以看出来TypeScipt比JavaScript有更严谨的语法，更强大的功能，能够保障代码的正确性、完整性和质量。相信，TypeScript会越来越成为主流，成为前端开发者的第一选择。作为前端初学者，我们要尝试去用TypeScript，认真去学TypeScript，努力拥抱TypeScript。

参考

juejin.cn/post/702948…