【TypeScript入门(一) | 青训营笔记】

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

本堂课的重点内容：

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

详细知识点介绍：

1. TypeScript vs. JavaScript

• TypeScript：静态类型，弱类型语言
• JavaScript：动态类型，弱类型语言

2. TypeScript

• 静态类型：
  • 可读性增强：基于语法解析TSDoc，ide增强
  • 可维护性增强：在编译阶段暴露大部分错误（多人合作的大型项目中，获得更好的稳定性和开发效率）
• JS的超集：
  • 包含于兼容所有js特性，支持共存
  • 支持渐进式引入与升级

3. TypeScript基本数据类型

• const q ='string'；(字符串)
• const w=1；(数字)
• const e=true；(布尔值)
• const r=null；(nul)
• const t=undefines;(undefined)

4. TypeScript对象类型（是一种键类型对结构，在开发时尽量使用明确的结构来定义对象）

• 可匿名：

function greet(person: { name: string; age: number }) {
  return "Hello " + person.name;
}

• 接口来命名：

interface Person {
  name: string;
  age: number;
}
 
function greet(person: Person) {
  return "Hello " + person.name;
}

• 一个类型别名命名：

type Person = {
  name: string;
  age: number;
};
 
function greet(person: Person) {
  return "Hello " + person.name;
}

• 属性修饰符：属性类型，属性是否可选，属性是否可写
  • 可选属性：属性名后加？符号 eg:name?:string（可选参数后面不允许再出现必须参数了）
  • 只读属性：属性标记readonly eg:readonly hoby:string(在类型检查期间无法再被重写)
  • 任意属性：约束所有对象属性都必须是该属性的子类型any eg:[key: string]:any

5. TypeScript函数类型（在 TypeScript 的类型定义中，=> 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型） `function add1(x: number, y: number) { return x + y; }

    function add1_1(x: number, y: number): number {
      return x + y;
    }
   
    const add2 = function (x: number, y: number): number {
      return x + y;
    };
   
    const add3 = (x: number, y: number): number => x + y;
    const add3_1 = (x: number, y: number) => x + y;
   
   
    const add4: { (x: number, y: number): number } = (x: number, y: number): number => x + y;
   
    type TAdd = {
      (x: number, y: number): number
    }
    const add5: TAdd = (x: number, y: number): number => x + y;
    const add5_1: TAdd = function (x: number, y: number): number {
      return x + y;
    };
   
    interface IAdd {
      (x: number, y: number): number
    }
    const add6: IAdd = (x: number, y: number): number => x + y;
    const add6_1: TAdd = function (x: number, y: number): number {
      return x + y;
    };
    `
   

6. TypeScript函数重载：函数的名称相同，但是参数类型不同的几个函数 `//第一步：创建2个重载函数 function add(num1: number, num2: number): number; function add(num1: string, num2: string): string;

    //第二步：编写通用函数以及实现
    function add(num1: any, num2: any): any {
      //在这里我们可以进行进一步的判断
      if (typeof num1 === 'string' && typeof num2 === 'string') {
        return num1.length + num2.length
      }
      return num1 + num2
    }
   
    const result = add(20, 30)
    const result2 = add("abc", "cba")
    console.log(result) //50
    console.log(result2) //6
   
    // 在函数的重载中, 实现函数是不能直接被调用的
    // add({name: "why"}, {age: 18})
    `
   

7. TypeScript数组类型：

• 类型+方括号表示 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]; const arr2:Iarr2=[1,2,'3','4',{a:1}]; const arr3:IArr3=[1,2,'3','4']; const arr4:IArr4=['string',()=>null,{},[]];

8. TypeScript补充类型

• 空类型，表示无赋值：type test1=（）=>void
• 任意类型，是所有类型的子类型：type test2=any
• 枚举类型，支持枚举值到枚举名的正反向映射： enum test3{ add='+', mult='*' }

这是我参与【第五届青训营】伴学笔记创作活动的第4天,TypeScript 是 JavaScript 的语法超集，它添加了静态类型，通过学习了解到了typescript的优势，以及typescript的相关知识点包括数据类型等，以及typescript主要的使用开发工具。