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