菜鸟笔记之TypeScript

180 阅读3分钟

TypeScript

TypeScript是静态类型,弱类型语言

静态类型

  • 可读性增强:基于语法解析TSDoC,ide增强
  • 可维护性增强:在编译阶段暴露大部分错误=>多人合作的大型项目中,获得更好的稳定性和开发效率 JS的超集
  • 包含于兼容所有Js特性,支持共存
  • 支持渐进式引入和升级

基本语法

基础数据类型

/* 字符串 */
const g: string = 'string':
/* 数字 */
const w: number = 1:
/* 布尔值 */
const e: boolean = true;
/*null*/
const r: null = null;
/* undefined */
const t: undefined = undefined;

对象类型

interface IBytedancer {
/* 只读属性:约束属性不可在对象初始化外赋值 */
readonly jobId: number:
name: string;
sex:'man' |'woman'|'other':
age: number;
/* 可选属性:定义该属性可以不存在 */
hobby?: string;
/* 任意属性:约束所有对象属性都必须是该属性的子类型 *,
[key: string]: any;

函数类型

function add(x: number, y: number): number {
return x + y:
}
const mult: (x: number, y: number)=>number = (x,y)=x*y;

interface IMult {
(×: number, y: number): number;
}             
const mult: IMult = (x,y)=>x*y;

数组类型

/*「类型 +方括号」表示 */
type IArr1 = number[];
/* 泛型表示*/
type IArr2 = Arraysstring | number | Recordsstring, number>>;
/* 元祖表示 */
type IArr3 = [number, number, string, string];
/* 接口表示 */
interface IArr4 {
[key: number]: any;
}
const arrl: IArr1 = [1, 2,3,4, 5, 6];

const arr2: IArr2 = [1, 2,'3','4', { a: 1 }];
const arr3: IArr3 = [1, 2,'3','4'];
const arr4: IArr4 = ['string', () => null, {}, []];

(
/* 空类型,表示无赋值 */
type IEmptyFunction =() => void;
/* 任意类型,是所有类型的子类型 */
type IAnyType = any;
/* 枚举类型:支持枚举值到枚举名的正、反向映射 */
enum EnumExample {
add='+'
mult='*'
}
EnumExample ['add' ]==='+';
EnumExample['+'] ==='add'
enum ECorlor { Mon, Tue, Wed, Thu, Fri, Sat, Sun };
ECorlor['Mon']
=== 0:
ECorlor[0] === 'Mon':
/*泛型*
type INumArr = Array<number>;

Typescript泛型

/* 泛型约束:限制泛型必须符合宇符串 */
type IGetRepeatStringArr = <T extends string>(target: T) => T[]:
const getStrArr: IGetRepeatStringArr = target => new Array(100).fill(target);
/* 报错:类型"number"的參数不能赋给类型"string"的參数 */
getStrArr(123);
/* 泛科参数默认类刊 */
type IGetRepeatArre<T = number> = (target: T) => T[];
const getRepeatArr: IGetRepeatArr = target => new Array(100).fill(target);
/* 报错:类型"string”的參数不能赋给类型"number"的參数 */
getRepeatArr('123'):
类型别名 & 类型断言
/* 通过type关键宇定义了I0bjArr的别名类型 冰
type I0bjArr = Array<{
key: string;
[obikey: string]: any:
}>
function keyBy<T extends I0bjArr>(objArr: Array<T>) (
/* 未指定类型时,result类型为 {} */
const result = objArr. reduce((res, val, key) => {
res [key] = val;
return res;
},{})
/* 通过as关键宇,断言result类型为正确类型 */
return result as Record<string, T>;
}

宇符串/数字 字面量



/* 允许指定字符串/数字必须的固定值 */

/* IDomTag必须为html、 body、div、span中的其一 */
type IDomTag= ‘html'|'body'|'div' |'span';
/* IOddNumber必须为1、3、5、7、9中的其一 */
type I0ddNumber = 1 | 3 | 5 | 7 | 9;

联合/交叉类型

  • 联合类型:iA|iB;联合类型表示一个值可以是几种类型之一
  • 交叉类型:iA&iB; 多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性

类型保护与类型守卫

interface IA ( a: 1, al: 2 }
interface IB { b: 1, b1: 2 }
function log(arg: IA I IB)
*报错:类型“iA|iB"上不存在展性"a",类型"B"上不存在屭性〞
/*结论:访问联合类型时,处于程序安全,仅能访问联合类型中的交集部分 *
if (arg.a) {
console. log(arg.al)
] else {
console. log(arg.b1);
}
} 
//实现函数reverse
//其可格数组或字符串进行反转
function reverse(target: string | Array<any) {
/* typof 类型保护*/
if (typeof target ==='string') {
return target.split('").reverse().join('');
}
/* instance 类型保护*/
if (target instanceof Object) {
return target.reverse();
}
}
//实现函数logBook类型
!/西数接受书本类型,并logger出相关特征
function logBook(book: IBookItem) {
//联合类型 +类型保护 - 自动类型推断
if (book.type ===
"history"){
< console. log (book. range)
} else {
console. log (book. theme);
}
}

高级类型

/**
* 实现merge函数类型
* 要求sourceObj必须为targetObj的子集
*/
function mergel(source0bj, targetobj) {
const result = { ...sourceObj }:
for(let key in targetObj) {
const itemVal = source0bj [key];
itemVal && ( result(kev] = itemVal):
}
return result;
}
function mergez(sourceObj, targetObj)
{
return {... sourceObj,...targetObj };
}

函数返回值类型

// 实现函数dolayCall的类型声明
// delayCal接受一个函数作为入参,其实现延迟1s运行函数
//其返回promise,结果为入参函数的返回结果

function delayCall(func){
return new Promise(resolve => {
setTimeout(() => {
const result = func();
 resolve(result);
},1000);
});
}
type IDelayCall = <T extends () => any>(func: T) => ReturnType<T>;
type IReturnType<T extends (...args: any) => any> = T extends (...args: any)
=> infer R? R: any

//关键字 【extends】跟随泛型出现时,表示类型推断,其表达可类比三元表达式
//如T=== 判断类型?类型A:类型B

//关键宇【infer】出现在类型推荐中,表示定义类型变量,可以用于指代类型
// 如 该场景下,将西数的返回值类型作为变量,使用新泛型A表示,使用在类型推荐命中的结果中