这是我参与「第四届青训营 」笔记创作活动的的第8天
01 为什么/什么是TypeScript?
JS: 动态类型, 弱类型语言
TS: 静态类型, 弱类型语言
静态类型
- 可读性增强: 基于语法解析TSDoc, ide增强
- 可维护性增强: 在编译阶段暴露大部分错误
- 多人合作的大型项目中, 获得更好的稳定性和开发效率
JS的超集
- 包含于兼容所有JS特性, 支持共存
- 支持渐进式引入与升级
02 基本语法
1 基础数据类型
const q: string = 'string'
const w: number = 1;
const e: boolean = true;
const r: null = null;
const t: undefined = undefined;
2 对象类型
interface IBytedancer {
// 只读属性
readonly jobId: number;
name: string;
sex: 'man' | 'woman' | 'other';
age: number;
// 可选属性
hobby?: string;
// 任意属性
[key: string]: any;
}
3 函数
function add(x: number, y: number): number {
return x + y;
}
const mult: (x: number, y: number) =>number = (x, y) => x * y
interface IMult {
(x: number, y: number): number;
}
const mult: IMult = (x, y) => x * y;
4 数组类型
// 类型 + 方括号
type IArr1 = number[];
// 泛型表示
type IArr2 = Array<string | number | Record<string, number>>;
// 元组表示
type IArr3 = [number, number, string, string];
// 接口表示
interface IArr4 {
[key: number]: any;
}
// 第一种, 第二种常用
5 TS补充类型
// 空类型
void
// 任意类型
any
// 枚举类型 (支持正反映射)
enum EnumExample {
add = '+',
mult = '*'.
}
// 泛型
type INumArr = Array<number>;
// 泛型: 不预先指定具体的类型, 而在使用的时候再指定类型的一种特性
type IGetRepeatArrR = <T>(target: T) => T[];
// 泛型接口
interface IX<T, U> {
key: T;
val: U;
}
// 泛型类
class IMan<T> {
instance: T;
}
// 泛型别名
type ITypeArr<T> = Array<T>;
// 泛型约束
type IGetRepeatStringArr = <T extends string>(target: T) => T[];
// 泛型参数默认类型
type IGetRepeatArr<T = number> = (target: T) => T[];
// 类型别名
type IObjArr = Array<{
key: string;
[objKey: string]: any;
}>
// 类型断言 相当于告诉编译器，我们比它更了解这个变量应该是什么类型，编译器不应该再继续报错
interface FooType {
a: string,
b: number,
}
const Foo = {} as FooType
Foo.a = 'a'
Foo.b = 1
03 高级类型
1 联合/交叉类型
type IBookList = Array<{
author: string;
} & (
{
type: 'history';
range: string;
} | {
type: 'story';
theme: string;
}
)>
2 类型保护与类型守卫
只能访问联合类型共有的属性, 不然会报错
想访问非共有的属性, 要进行类型保护
如
function reverse(target: string | Array<any>) {
// 类型保护
if(typeof target === 'string') {
return target.split('').reverse().join('');
}
// 类型保护
if(target instanceof Object) {
return target.reverse();
}
}
// 类型守卫: 定义一个函数, 它的返回值是一个类型谓词, 生效范围为子作用域
funtcion getIsIA(arg: IA | IB): arg is IA {
return !!(arg as IA).a;
}
