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 编译器,无法避免运行时的错误,反而滥用类型断言可能会导致运行时错误

上一篇:算数运算符


下一篇:小数点后保留两位,整数和小数通用