TypeScript基本学习（一）

首先基于vue和react开发全面拥抱TypeScript是一个趋势，所以简单写一下TypeScript

TypeScript 是 Microsoft 开发和维护的一种面向对象的编程语言，是JavaScript（以下称JS）超集，简称TS

优点：

• 代码的可读性和可维护性
• 在 编译阶段 就发现大部分错误，避免了很多 线上bug

• 增强了编辑器和 IDE 的功能，包括 代码补全 、 接口提示 、 跳转到定义 、 重构 等

缺点：

• 有一定的 学习成本 ，需要理解接口（Interfaces）、泛型（Generics）、类（Classes）、枚举类型（Enums）等前端工程师可能不是很熟悉的概念
• 会增加一些 开发成本 ，当然这是前期的，后期维护更简单了

• 一些JavaScript库需要 兼容 ，提供声明文件，像vue2，底层对ts的兼容就不是很好。
• ts编译是需要 时间 的，这就意味着项目大了以后，开发环境启动和生产环境打包的速度就成了考验

TS类型

• 常用（ boolean、number、string、array、enum、any、void）
• 不常用（tuple、null、undefined、never）

let isDone: boolean = false; // boolean布尔值
let price: number = 24 // number数值
let name: string = 'TypeScript' // string字符串
let me: [string, number] = ['孙悟空', 120] // array数组
enum ThemeEnum { // enum枚举
  DARK = 'dark',
  LIGHT = 'light',
}
ThemeEnum['DARK'] // 'dark'
let someAny: any = 'whatever' // any任意值 相当于没有类型限制，可以把任意数据类型数据赋值给该变量 
someAny = 1
function sayHello(): void { // 没有返回值的函数: void空值
  console.log("hello world");
}
const LOL: [string, string, number] = ["zed", "darts", 25]; // tuple元组
let u: undefined = undefined; // undefined
let n: null = null; // null
function errorFuntion(): never { // 一个函数是永远也执行不完的，就可以定义返回值为 never
  throw new Error();
  console.log("Hello World");
}
// 联合类型
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

定义类型的方式——接口（Interfaces）、类型别名（type alias）

简单理解interface 和 type 的区别：

• interface只能定义对象类型
• type声明的方式可以定义组合类型、交叉类型和原始类型
  相同点：
  1、都可以描述一个对象或者函数
  2、 都允许拓展（extends）
  不同点
  1、type可以声明基本类型别名、联合类型、元祖等类型
  2、type语句中还可以使用typeof获取实例的类型进行赋值
  3、 interface能够声明合并
  总结：一般来说，能用interface实现，就用interface，如果不能就用type，type 更强大

interface Person {
    name: string;
    age: number;
}
let tom: Person = {
    name: 'Tom',
    age: 25
};

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

泛型 T（Type）

简单说就是：泛指的类型，不确定的类型，可以理解为一个 占位符 （使用T只是习惯，使用任何字母都行）,输出类型是跟参数类型一致的

• K（Key）：表示对象中的键类型；
• V（Value）：表示对象中的值类型；

• E（Element）：表示元素类型。

// T 自定义名称
function myFun<T>(params: T[]) {
   return params;
}
myFun <string> (["123", "456"]);
// 定义多个泛型
function join<T, P>(first: T, second: P) {
  return `${first}${second}`;
}
join <number, string> (1, "2");

断言

断言用来手动指定一个值的类型。 值 as 类型  or  <类型>值
<类型>在 ts 中除了表示类型断言之外，也可能是表示一个泛型,故建议大家在使用类型断言时，统一使用  值 as 类型  这样的语法

interface Cat {
    name: string;
    run(): void;
}
interface Fish {
    name: string;
    swim(): void;
}

function isFish(animal: Cat | Fish) {
    if (typeof (animal as Fish).swim === 'function') {
        return true;
    }
    return false;
}

需要注意的是，类型断言只能够「欺骗」TypeScript 编译器，无法避免运行时的错误，反而滥用类型断言可能会导致运行时错误