TypeScript 入门 | 青训营笔记

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

一、本堂课重点内容：

• TypeScript 的优势及其主要使用的工具
• TypeScript 高级类型以及常见的解决方案

二、详细知识点介绍：

• TypeScript简介
  TypeScript用来约束js在某些方面太动态了，比如变量没有类型。TS 以JS为基础构建的语言，TS扩展了JavaScript并添加了类型，TS不能被JS解析器直接执行，需要TS->编译->JS；

• 联合交叉类型
  联合类型：通过 | 将变量设置多种类型，赋值时可以根据设置的类型来赋值。

联合基础类型
let age: number | string;
age = 10; //OK
age = "12"; //OK
age = true; //Error

联合对象类型
interface Cat {
    name: string
    miao:() => string
  }
  
  interface Dog {
    name: string
    wang: () => string
  }
  
  const Animal = (): Cat | Dog => {
      return {
          name: "",
          miao: ():string => {return "2333"}
      }
  }
  let obj = Animal();
  obj.name; //ok
  obj.miao() //Error , Property 'miao' does not exist on type 'Dog'   

交叉类型：多种类型的集合，联合对象将具有所联合类型的所有成员

interface Cat {
    name: string
    miao:() => string
  }
  
  interface Dog {
    name: string
    wang: () => string
  }
  
  const Animal = (): Cat & Dog => {
      return {
          name: "",
          // 使用交叉类型之后，就要两个接口所有的属性都得满足
          miao: ():string => {return "miaomiao"},
          wang: ():string => {return "wangwang"}
      }
  }
  let obj = Animal();
  obj.name; //ok
  obj.miao() //ok

• 类型保护与类型守卫
  类型保护又叫类型守卫，是为了提高程序的鲁棒性存在的。类型保护：能够在特定的区块中(比如函数里)保证变量属于某种特定的类型，可以在区块中放心的使用此类型的属性或方法。

三、课后个人总结：

• 了解了 TypeScript 的历史及定义解析、优势及其主要使用的工具。
• 认识 TypeScript 高级类型以及常见的解决方案，通过高级类型的方式，将普通类型的解决方案进行高级化。还对联合交叉类型、类型保护与类型守卫、Merge 函数类型实现有了详细的了解。
• 通过Web 场景为例，了解了 TypeScript 的工程应用。