typescript
文章平均质量分 73
TypeScript 从入门到精通
星宇大前端
大前端编程爱好者,开源爱好者。
展开
-
TypeScript系列教程《单例》
单例模式是一个编程中使用频率很高的模式,各种语言的写法都差不多,TS的也不例外。单例模式是为了解决一个应用中的内存只存在一份,不允许多个的需求,类似于主题。下面通过theme 主题切换举例。原创 2022-10-27 11:48:37 · 777 阅读 · 0 评论 -
TypeScript系列教程十二《编译配置》
TypeScript 系列教程编译配置原创 2022-04-25 07:00:00 · 514 阅读 · 0 评论 -
TypeScript系列教程十一《装饰器》 -- 参数装饰器
参数装饰器修饰函数参数,一般应用场景配合方法装饰器一起,达到检查参数的目的。参数装饰器表达式会在运行时当作函数被调用,传入下列3个参数:对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。成员的名字。-参数在函数参数列表中的索引。下面通过例子具体查看。代码示例示例目的:根绝参数器找到返回的值,然后利用方法装饰器返回处理后的结果。代码思路根据参数装饰器标识通过reflect-metadata 将数据记载到方法元数据,然后传递到方法装饰器方法装饰器调用原有方法返回值代码原创 2022-04-02 08:39:33 · 1893 阅读 · 0 评论 -
TypeScript系列教程十一《装饰器》 -- 属性装饰器
属性装饰器和其他装饰器功能类似,其设计也是为了统一的、复用度更高的去监听,改变属性。属性装饰器声明在一个属性声明之前(紧靠着属性声明)。 属性装饰器不能用在声明文件中(.d.ts),或者任何外部上下文(比如 declare的类)里。属性装饰器表达式会在运行时当作函数被调用,传入下列2个参数:对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。成员的名字。注意 属性描述符不会做为参数传入属性装饰器,这与TypeScript是如何初始化属性装饰器的有关。 因为目前没有办法在定义一个原型对原创 2022-04-01 14:36:23 · 2494 阅读 · 0 评论 -
TypeScript系列教程十一《装饰器》 -- reflect-metadata
reflect-metadata 是ES7 的提案 ,TypeScript 1.5 已经开始使用。reflect-metadata是一个单独的npm 包,具体介绍可以看看官方介绍。reflect-metadata 拆成两个单词,reflect 反射和 metadata,通俗理解 利用反射的原理修改元数据。...原创 2022-03-28 15:18:11 · 1775 阅读 · 3 评论 -
TypeScript系列教程十一《装饰器》 -- 方法装饰器
typescript 方法装饰器学习思想和实现案例原创 2022-03-19 06:30:00 · 1450 阅读 · 0 评论 -
TypeScript系列教程十一《装饰器》 -- 类装饰器
TS 类装饰器学习总结原创 2022-03-18 18:30:00 · 1905 阅读 · 0 评论 -
TypeScript系列教程十一《装饰器》 -- 装饰器与继承
装饰器 并不是 TypeScript特有的,他是一种设计模式,对于这种设计模式和之前学过的继承、适配器、组合的模式有些类似,这里再盘点一下。装饰器模式的概念原创 2022-03-18 08:45:57 · 528 阅读 · 0 评论 -
《tsconfig》之 allowSyntheticDefaultImports
allowSyntheticDefaultImports : Allow Synthetic Default Imports (允许有没有默认导出的模块导入)出现问题新建ts项目导入react 出错,发现了allowSyntheticDefaultImports属性。allowSyntheticDefaultImports 配置介绍当allowSyntheticDefaultImports 设置为true 的时候,允许下面的导入:import React from "react";用来替代.翻译 2022-02-17 09:53:24 · 4853 阅读 · 0 评论 -
TypeScript系列教程十《模块》
JavaScript 处理代码的模块化有很多种办法,类似于AMD CommonJS UMD 等等。TypeScript 从2012年开始,已经支持了大部分的格式,但随着时间的推移,社区和JavaScript规范已经融合到一种称为ES模块(或ES6模块)的格式上。你可能知道import/export语法。...原创 2021-09-27 14:56:13 · 411 阅读 · 1 评论 -
TypeScript系列教程九《类型转换》-- 模板文本类型
模板文本类型建立在字符串文本类型的基础上,并且能够通过联合扩展为许多字符串。它们的语法与JavaScript中的模板文本字符串相同,但用于类型位置。当与具体的文本类型一起使用时,模板文本通过连接内容生成新的字符串文本类型。type World = "world"; type Greeting = `hello ${World}`; //type Greeting = "hello world" 联合类型插值type EmailLocaleIDs = "welcom翻译 2021-09-16 14:44:46 · 398 阅读 · 1 评论 -
TypeScript系列教程九《类型转换》-- 映射类型
类型转换是TS最好玩也是语言的灵魂,想玩好需要熟练各种手段和工具,下面一一介绍类型转换的一些常用手段。Mapped Types有时候对象属性类型重复或者一个类型基于另一个了类型的时候映射类型基于索引签名的语法构建,用于声明尚未提前声明的属性类型:type OnlyBoolsAndHorses = { [key: string]: boolean | Horse;};const conforms: OnlyBoolsAndHorses = { del: true, rodney.原创 2021-08-17 09:32:32 · 475 阅读 · 0 评论 -
TypeScript系列教程九《类型转换》-- 条件类型
类型转换是TS最好玩也是语言的灵魂,想玩好需要熟练各种手段和工具,下面一一介绍类型转换的一些常用手段。条件类型根据输入来决定输出是大多数有用程序的核心,js也不例外。条件判断类型可以根据输入关系决定输出类型。interface Animal { live(): void; } interface Dog extends Animal { woof(): void; } type Example1 = Dog extends Animal ? number :.原创 2021-08-03 16:09:17 · 576 阅读 · 0 评论 -
TypeScript系列教程九《类型转换》-- 索引访问类型
类型转换是TS最好玩也是语言的灵魂,想玩好需要熟练各种手段和工具,下面一一介绍类型转换的一些常用手段。索引访问类型我们可以使用索引访问类型查找其他类型的特定属性:type Person = { age: number; name: string; alive: boolean };type Age = Person["age"];//type Age = number 类型的索引访问类型,我们可以使用联合类型,keyof 或者 其他type:type I1 = Perso.原创 2021-08-03 10:43:18 · 560 阅读 · 0 评论 -
TypeScript系列教程九《类型转换》-- keyof和typeof 操作
类型转换是TS最好玩也是语言的灵魂,想玩好需要熟练各种手段和工具,下面一一介绍类型转换的一些常用手段。keyof 操作keyof 见名知其意,就是获取对象所有的key,然后返回一个新的联合类型。例如:type Point = { x: number; y: number };type P = keyof Point;扩展用途,将属性类型由number 修改成string:type SPoint = {[K in P]:string} 如果一个类型由string、numb.原创 2021-08-03 10:23:17 · 1278 阅读 · 0 评论 -
TypeScript系列教程九《高级类型》
TS 原文是叫做 Utility Types,可以翻译成实用类型,玩转技巧的类型,暂定高级类型吧,感觉这些是玩转类型的灵魂方法。TypeScript 提供一些全局通用方法,可以让你玩转类型转换,下面一起看看。 Partial<Type>作用:将类型属性都设置为可选interface Todo { title: string; description: string;}function updateTodo(todo: Todo, fieldsToUpdate.原创 2021-07-27 17:19:33 · 457 阅读 · 1 评论 -
TypeScript系列教程八《类》
TypeScript完全支持ES2015中引入的class关键字。与其他JavaScript语言特性一样,TypeScript添加了类型注释和其他语法,允许您表达类和其他类型之间的关系。类的成员下面是一个空的类:class Point {}这个类现在毫无用处,现在往这个类里面加点成员字段在类上声明字段,编程了可读写的public 属性class Point { x: number; y: number;}const pt = new Point();pt.x = 0;p原创 2021-07-20 17:37:34 · 540 阅读 · 0 评论 -
TypeScript系列教程七《接口》
TS 接口类型java接口类似,但是还是有一些差别的。 接口是什么在生活里,我想买个水龙头,但是我不知道家里的管子多粗,我只需要给老板说买个普通的,回家去安装,发现正好。这里面就定义的接口的标准,通常水龙头接口和高压水管的接口都是固定的,这样外界才能更好的去配合标准工作。还比如最近的5G标准,全世界协商。还有w3c 的JavaScript标准。想想一下浏览器如果没有标准多么可怕。这些标准都需要文件,协议去约束他们。在编程世界里,我们用来约束和规定标准的结构定义叫做接口。接口是最外面.原创 2021-07-20 14:43:37 · 390 阅读 · 0 评论 -
TypeScript系列教程六《泛型》
软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。 初识泛型1、我现在有一个盒子函数,想往里面装数字,我们可以这么写。function box(...addPrams:number[]) { let box:A.翻译 2021-07-15 16:09:43 · 366 阅读 · 0 评论 -
TypeScript系列教程五《对象类型》
typescript对象类型翻译 2021-07-15 14:52:01 · 414 阅读 · 0 评论 -
TypeScript系列教程四《扩展类型》
在JS基础上,TS又扩展了一些类型的概念,为了和基础类型区分,暂定扩展类型概念。TypeScript 最好玩的应该就是类型系统,随意组合创造,提供基础联合类型、交叉类型,还有一系列的高级函数可以玩转类型。 联合类型联合类型是玩转类型的基础,用 | 表示,即是又是的意思。有时候我们希望一个变量既可以是字符串又可以是number,除了泛型之外,联合类型是很好的处理方式。经常使用场景,属性初始值允许是null类型和自有类型。 定义联合类型如下面例子,age可以是numb.原创 2021-07-15 14:50:35 · 1390 阅读 · 4 评论 -
TypeScript系列教程三《基础类型》
本篇主要介绍TypeScript 常见类型,在日常工作中常见Javascript 原始类型Javascript 常用的String,Number,Boolean, TypeScript有与之相对应的类型string,number,boolean 。注意TypeScript 推荐使用后者,虽然在TS中使用String等也是可以的,但是最后Typeof也是string测试小例:let str1:string = '3'console.log(typeof str1);let str2:Stri.原创 2021-07-15 10:35:25 · 357 阅读 · 0 评论 -
TypeScript系列教程二《安装起步》
安装TypeScriptnpm用户:> npm install -g typescriptyarn:用户yarn global add typescript然后终端运行tsc -v查看是否已经安装成功 编译ts文件tsc 的作用是将ts文件按照编译配置编译成目标js运行到浏览器。tsc 命令直接编译1、新建index.ts文件2、直接输入tsc命令编译在当前目录位置,输入tsc 文件名.ts命令ts文件会编译生成一个js文件,观察一下会转成es5模式ts原创 2021-07-13 15:55:54 · 953 阅读 · 0 评论 -
TypeScript系列教程一《开篇》
TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准(ES6 教程)。TypeScript 由微软开发的自由和开源的编程语言。TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上学前知识点强类型和弱类型1. 先定义一些基础概念Program Errors– trapped errors导致程序终止执行,如除0,Java中数组越界访问– untrapped.原创 2021-07-13 14:07:44 · 452 阅读 · 0 评论