TypeScript
TypeScript 知识
舜岳
不积跬步无以至千里 v: shunyue1321
展开
-
18. TypeScript 扩展全局变量类型
TypeScript 扩展全局变量类型1. 扩展局部变量// 可以直接使用接口对已有类型进行扩展interface String { double():string}String.prototype.double = function () { return this as string + this;}let str = '123';interface Window { mynane:string}console.log(Window.mynane)2. 模块内全局扩原创 2021-11-22 08:55:04 · 2234 阅读 · 0 评论 -
17. TypeScript 类型声明
TypeScript 类型声明1. 声明全局变量// 普通类型声明declare let age: number;declare function sum(a: string, b: string): void;declare class Animal { };declare const enum Seaons{ Spring, Summer, Autumn, Winter}declare interface Person { name:string,原创 2021-11-22 08:54:54 · 1074 阅读 · 0 评论 -
16. TypeScript 模块和命名空间
模块和命名空间1. 模块// 文件模块: 如果在你的 TypeScript 文件的根级别位置含有 import 或者 export,那么它会在这个文件中创建一个本地的作用域 。// xxx.js 导出export default '456'index.ts导入import name from './xxx'2. 命名空间命名空间可以用于组织代码,避免文件内命名冲突// 命名空间的使用export namespace zoo { export class Dog { eat() {原创 2021-11-22 08:54:43 · 577 阅读 · 0 评论 -
14. TypeScript 自定义类型
TypeScript 自定义类型1. Diff实现// 求两个对象不同的部分let person1 = { name: '123', age: 11, address: '456'}let person2 = { address: '123',}type Diff<T extends object,K extends Object> = Omit<T,keyof K> // Omit忽略属性type DiffPerson = Diff<typeo原创 2021-11-08 08:51:36 · 488 阅读 · 0 评论 -
15. TypeScript unknown
unknown1. unknown类型// unknown类型,任何类型都可以赋值为unknown类型。 它是 any 类型对应的安全类型let unknown:unknown;unknown = '123';unknown = 11;// 不能访问unknown类型上的属性,不能作为函数、类来使用// 联合类型中的unknowntype UnionUnknown = unknown | null | string | number // type UnionUnknown = unkn原创 2021-11-08 08:51:15 · 384 阅读 · 0 评论 -
13. TypeScript 装包和拆包
TypeScript 装包和拆包1. 装包type Proxy<T> = { get():T, set(value:T):void}type Proxify<T> = { [P in keyof T]: Proxy<T[P]>} function Proxify<T>(obj: T):Proxify<T> { let result = {} as Proxify<T>; for (const key in原创 2021-11-08 08:51:01 · 727 阅读 · 0 评论 -
12. TypeScript 内置类型
TypeScript 内置类型1. Partial转化可选属性interface Company { num: number}interface Person { name: string, age: string, company: Company}type PartialPerson = Partial<Person>; // type PartialPerson = { name?: string | undefined; age?: string | unde原创 2021-11-08 08:50:40 · 355 阅读 · 0 评论 -
11. TypeScript 条件类型
TypeScript 条件类型1. 条件类型基本使用// 可以使用extends关键字和三元表达式,实现条件判断interface Fish { name1: string}interface Water { name2: string}interface Bird { name3: string}interface Sky { name4: string}type Condition<T> = T extends Fish ? Water : Sky;/原创 2021-11-08 08:50:23 · 383 阅读 · 0 评论 -
10. TypeScript 交叉类型
TypeScript 交叉类型1. 交叉类型(Intersection Types)是将多个类型合并为一个类型interface Person1 { handsome: string,}interface Person2 { high: string,}type P1P2 = Person1 & Person2;let p: P1P2 = { handsome: '帅', high: '高' }2. 交叉泛型function mixin<T, K>(a: T,原创 2021-11-08 08:50:11 · 782 阅读 · 0 评论 -
9. TypeScript 类型推断
TypeScript 类型推断1. 赋值推断// 赋值时推断,类型从右像左流动,会根据赋值推断出变量类型let str = '123'; // let str: stringlet age = 1; // let age: numberlet bool = true; // let bool: boolean2. 返回值推断// 自动推断函数返回值类型function sum(a: string, b: string) { // function sum(a: s原创 2021-11-08 08:49:56 · 354 阅读 · 0 评论 -
8. TypeScript 类型保护
TypeScript 类型保护通过判断识别所执行的代码块,自动识别变量属性和方法1. typeof 类型保护function double(val: number | string) { if (typeof val === 'number') {} else {} // val 类型是 number}2. instanceof 类型保护class Cat {}class Dog {}const getInstance = (clazz: { new(): Cat | Dog}) =原创 2021-11-04 09:20:14 · 254 阅读 · 0 评论 -
7. TypeScript 兼容性
TypeScript 兼容性TS中的兼容性,主要看结构是否兼容。(核心是考虑安全性)1. 基本数据类型的兼容性let temp:string | number;let num!:number;temp = num // 包含就可以赋值let num2:{ toString():string}// console.log(num2) // error: Variable 'num2' is used before being assigned. 没赋值之前不能使用let str:str原创 2021-11-03 20:07:34 · 249 阅读 · 0 评论 -
6. TypeScript 泛型
TypeScript 泛型泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。1. 指定函数参数类型// 单个泛型const getArray = <T>(times:number, val:T): T[] => { let result:T[] = [] for (let i = 0; i < times; i++) { result.push(val) } return result}原创 2021-11-03 20:07:14 · 140 阅读 · 0 评论 -
5. TypeScript 接口
TypeScript 接口接口可以在面向对象编程中表示行为的抽象,也可以描述对象的形状。 接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。 (接口中不能含有具体的实现逻辑)1. 函数接口参数// 没有接口的写法const fullName = ({firstName,lastName}: {firstName:string,lastName:string}): string => { return firstName + lastName}// 接口写法:使用接口约束函原创 2021-11-03 20:06:56 · 172 阅读 · 0 评论 -
4. TypeScript 类
TypeScript 类1. TS中定义类class Pointer{ x!:number; // 实例上的属性必须先声明 y!:number; constructor(x:number,y?:number,...args:number[]){ this.x = x; this.y = y as number; }}let p = new Pointer(100,200);// 实例上的属性需要先声明在使用,构造函数中的参数可以使用可选参数和剩余参数con原创 2021-11-01 17:10:55 · 145 阅读 · 0 评论 -
3. TypeScript 基础类型
TypeScript 基础类型1. 函数的两种声明方式// 通过function关键字来进行声明function sum1(a: string, b: string):string { // 返回 string return a+b;}sum1('a','b')// 通过表达式方式声明type Sum = (a1: string, b1: string) => string;let sum2: Sum = (a: string, b: string) => { re原创 2021-11-01 16:20:07 · 139 阅读 · 0 评论 -
2. TypeScript 类型推导
TypeScript 类型推导1. 类型推导// 声明变量没有赋予值时默认变量是any类型let name; // let name: anyname = '123' // let name: anyname = 10 // let name: any// 声明变量赋值时则以赋值类型为准let name1 = '123'; // let name1: string// name1 = 10 // Type 'number' is not assignable to type '原创 2021-11-01 15:45:00 · 414 阅读 · 0 评论 -
1. TypeScript 基础类型
TypeScript 基础类型1.布尔、数字、字符串类型let myname: string = "小米";let age: number = 18;let bool: boolean = true;console.log('1.布尔、数字、字符串类型', myname, age, bool);2.元组类型// 限制长度个数、类型一一对应let tuple: [string, number] = ['123', 1]tuple.push('456') // 像元组中增加数据,只能增加元原创 2021-11-01 14:54:24 · 132 阅读 · 0 评论 -
0. 简单搭建一个 ts 开发模板
全局 typescript 编译TS文件npm install typescript -g全局安装typescript可以对.ts文件进行编译tsc --init # 生成tsconfig.jsontsc # 可以将ts文件编译成js文件tsc --watch # 监控ts文件变化生成js文件搭建ts开发模板目录结构:├── build├── src│ └── index.ts├── public│ └── index.html├── rollup.config.j原创 2021-11-01 12:04:58 · 777 阅读 · 0 评论 -
TypeScript装饰器实现原理
TypeScript注解风格的装饰器@decorate装饰器函数的作用是在调用eat方法之前执行执行自定义的功能function decorate(target, property, descriptor) { var oldValue = descriptor.value descriptor.value = msg => { console.log('先洗手') msg = `后 ${msg}` return oldValue.apply(null, [ms原创 2020-12-12 21:50:10 · 521 阅读 · 0 评论