TS核心知识点总结及项目实战案例分析

前言

最近工作一直很忙，复盘周期也有所拉长，不过还是会坚持每周复盘。今天笔者将复盘一下typescript在前端项目中的应用，至于为什么要学习typescript，我想大家也不言自明，目前主流框架vue和react以及相关生态的内部构建大部分都采用了typescript，其原因就在于它的静态类型检查极大的提高了代码的可读性和可维护性，而且定位问题非常方便。下面上一份关于typescript的官方定义，方便大家理解：

TypeScript 是由微软开发的自由和开源的编程语言, 是JavaScript 的一个超集，支持 ECMAScript 6 标准。其设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

本文将通过介绍ts的核心知识点以及实际案例来带大家轻松掌握typescript。

概要

任何语言的学习都要有学习和思考体系，前端也不例外，笔者将按照如下图所示结构来进行讲解：

正文

我们目前项目开发用的最多的就是webpack，对于ts，我们也很方便的可以通过ts-loader对其进行编译配置，为了降低大家学习ts的难度，笔者推荐采用vue-cli3或者umi直接搭建ts项目，这样可以更快的上手ts开发。

核心知识点

1. 基础类型

TypeScript支持与JavaScript几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。接下来我们简单介绍一下这几种类型的用法.

// 布尔类型
let isCookie:boolean = true
 
// 数值类型
let myMoney:number = 12
 
// 字符串类型
let name:string = '徐小夕'
 
// 数组类型, 有两种表示方式,第一种可以在元素类型后面接上[]，表示由此类型元素组成的一个数组
let arr:number[] = [1,2,2]
 
// 数组类型, 使用数组泛型
let arr:Array<number> = [1,2,2]
 
// 元组类型, 允许表示一个已知元素数量和类型的数组，各元素的类型不必相同
let xi: [string, number];
// 初始化xi
xi = ['xu', 10]; // 正确
xi = [11, 'xu']; // 错误
 
// 枚举类型, 可以为一组数值赋予友好的名字
enum ActionType { doing, done, fail }
let action:ActionType = ActionType.done    // 1
 
// any, 表示任意类型, 可以绕过类型检查器对这些值进行检查
let color:any = 1
color = 'red'
 
// void类型, 当一个函数没有返回值时，通常会设置其返回值类型是 void
function getName(): void {
    console.log("This is my name");
}
 
// object类型, 表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型
let a:object;
a = {props: 1}
 
复制代码

以上是typescript中常用的几种类型, 也是我们必须掌握的基本知识. 这里值得补充的是typescript的类型断言, 也是解决ts警告的利器,比如我们确切的知道某种数据的数据类型,我们可以这么做:

let arrLen: number = (someValue as Array<string>).length;
// 解决window下设置属性的ts报错, 但不可滥用
(window as any).name = 'xuxi'
 
复制代码

2. 接口

TypeScript的核心原则之一是对值所具有的结构进行类型检查。 在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。接下来我们看看如何定义和使用接口(Interface):

interface Product {
  name: string;
  size: number;
  weight: number;
}
 
let product1:Product = {
    name: 'machine1',