TypeScript
文章平均质量分 72
TypeScript
高先生的猫
求知若渴,虚心若愚。
展开
-
Omit 应用 减少 TS 重复代码
你用过 TypeScript 内置的 Omit工具类型么?你想知道 Omit 的应用场景和内部是如何实现的么?如果想的话,阅读完本文之后,也许你就懂了。这是一个使用 type 类型别名定义的 User 类型,用于描述用户对象。type User = { id: string; // 用户id name: string; // 用户名 password: string; // 密码 createdAt: Date; // 创建时间 updatedAt: Date; // 更新时间.原创 2022-05-24 11:51:05 · 2440 阅读 · 0 评论 -
6个在Vue.js编写更好v-for循环的技巧
在vuejs中,v-for循环是每个项目都会使用的东西,它允许您在模板代码中编写for循环。在最基本的用法中,它们的用法如下。<ul> <li v-for='product in products'> {{ product.name }} </li></ul>但是,在本文中,我将介绍六种方法来使你的 v-for代码更加精确,可预测和强大。让我们开始吧。1、始终在v-for循环中使用key首先,我们将讨论大多数vue.原创 2021-08-31 10:01:27 · 489 阅读 · 2 评论 -
Typescript 类型断言
TypeScript 允许你覆盖它的推断,并且能以你任何你想要的方式分析它,这种机制被称为「类型断言」。TypeScript 类型断言用来告诉编译器你比它更了解这个类型,并且它不应该再发出错误。类型断言的一个常见用例是当你从 JavaScript 迁移到 TypeScript 时:const foo = {};foo.bar = 123; // Error: 'bar' 属性不存在于 ‘{}’foo.bas = 'hello'; // Error: 'bas' 属性不存在于 '{}'这里原创 2021-08-31 09:58:49 · 4675 阅读 · 0 评论 -
Typescript 字符串字面量
字面量是 JavaScript 本身提供的一个准确变量。#字符串字面量你可以使用一个字符串字面量作为一个类型:let foo: 'Hello';在这里,我们创建了一个被称为foo变量,它仅接收一个字面量值为Hello的变量:let foo: 'Hello';foo = 'Bar'; // Error: 'bar' 不能赋值给类型 'Hello'它们本身并不是很实用,但是可以在一个联合类型中组合创建一个强大的(实用的)抽象:type CardinalDirect...原创 2021-08-31 09:55:59 · 349 阅读 · 0 评论 -
Typescript 枚举介绍
枚举是组织收集有关联变量的一种方式,许多程序语言(如:c/c#/Java)都有枚举数据类型。下面是定义一个 TypeScript 枚举类型的方式:enum CardSuit { Clubs, Diamonds, Hearts, Spades}// 简单的使用枚举类型let Card = CardSuit.Clubs;// 类型安全Card = 'not a member of card suit'; // Error: string 不能赋值给 `CardSuit` 类型原创 2021-08-31 09:27:45 · 871 阅读 · 0 评论 -
TypeScript函数类型声明
定义即声明当我们通过TypeScript定义函数时,实际上已经声明了函数签名和定义了函数体。function foo(message: string, count?: number, displayLog = true): never { console[displayByLog ? 'log' : 'warn'](`message: ${message}; count: ${count}`) throw new Error('Just a error.')}上述函数定义附带原创 2020-12-03 15:20:03 · 2043 阅读 · 0 评论 -
高阶ts内置泛型帮助类型
extends可以用来继承一个class,interface,还可以用来判断有条件类型(很多时候在ts看到extends,并不是继承的意识)示例:T extends U ? X : Y;上面的类型意思是,若 T 能够赋值给 U,那么类型是 X,否则为 Y。原理是令 T' 和 U' 分别为 T 和 U 的实例,并将所有类型参数替换为 any,如果 T' 能赋值给 U',则将有条件的类型解析成 X,否则为Y。 上面的官方解释有点绕,下面举个栗子:type Words = 'a'|'原创 2020-11-19 15:37:03 · 1752 阅读 · 0 评论 -
TypeScript 中的类型保护
在 TypeScript 中使用联合类型时,往往会碰到这种尴尬的情况:interface Bird { // 独有方法 fly(); // 共有方法 layEggs();}interface Fish { // 独有方法 swim(); // 共有方法 layEggs();}function getSmallPet(): Fish | Bird { // ...}let pet = getSmallPet();pet.原创 2020-09-07 16:10:03 · 322 阅读 · 0 评论 -
TypeScript 中的顶级类型:any 和 unknown
TypeScript 的两种顶级类型any和unknown在 TypeScript 中是所谓的“顶部类型”。以下文字引用自Wikipedia:top type[...]是通用(universal)类型,有时也称为通用超类型,因为在任何给定类型系统中,所有其他类型都是子类型[...]。通常,类型是包含了其相关类型系统中所有可能的[值]的类型。也就是说,当把类型看作是值的集合时,any和unknown是包含所有值的集合。顺便说一句,TypeScript 还有bottom ty...原创 2020-07-06 10:13:29 · 5298 阅读 · 0 评论 -
typescript三种作用域
typescript三种作用域全局作用域 − 全局变量定义在程序结构的外部,它可以在你代码的任何位置使用。类作用域 − 这个变量也可以称为 字段。类变量声明在一个类里头,但在类的方法外面。 该变量可以通过类的对象来访问。类变量也可以是静态的,静态的变量可以通过类名直接访问。局部作用域 − 局部变量,局部变量只能在声明它的一个代码块(如:方法)中使用代码var global_num = 12 // 全局变量class Numbers { nu...原创 2020-07-06 10:14:36 · 1367 阅读 · 0 评论 -
10个帮助你捕获更多Bug的TypeScript建议
1. 对TypeScript提供运行时检查的思考有一个对TypeScript常见的误解是:一个变量只要标注了类型,那么它总是会检查自己的数据类型是否与我们的预期一致。与该误解相呼应的想法会认为:对一个从后端返回的对象进行类型标注可以在代码运行时执行检查来确保对象类型的正确性。然而这个想法是错误的!因为TypeScript最终是被编译成JavaScript代码,并且浏览器中运行的也是JavaScript。此时(译者注:运行时)所有的类型信息都丢失了,所以TypeScript无法自动验证类型。理原创 2020-06-17 10:56:19 · 971 阅读 · 0 评论 -
js获取浏览器默认语言设置
项目用到多语言,之前也接触过,不过没有自测过,通过自测,写出通用比较简化的方法 !function () { var lang = navigator.language||navigator.userLanguage;//常规浏览器语言和IE浏览器 lang = lang.substr(0, 2);//截取lang前2位字符 if(lang == 'zh'){ window.location.replace('./cn/home/index.h...原创 2020-06-02 10:27:14 · 1658 阅读 · 0 评论 -
typeScript数据类型
基本数据类型不能存储非原有的类型的值//ts 原型let num : number = 25;//等同于 let num = 25;//不能直接修改类型,比如下面的写法,会报错num = '25' //报错//同样boolean也是只能是true或falselet a : boolean = falselet str : string = 'is string'基本数据类型:number 、string、boolean如果不知道自己的一个变量要是存储什么类型的,可以定义为an原创 2020-06-01 10:47:13 · 315 阅读 · 0 评论 -
Vue+Ts搭建项目(一): 前置知识
Vue组件的几种形式在vue+typescript中我们可以使用三种形式定义组件 类组件 扩展组件 函数组件 类组件是我们在ts项目中使用频率最高的组件,它可以使用我们的装饰器,使组件完美的使用typescript.<script lang="ts">import { Component, Vue } from 'vue-property-decorator'@Component({ name: 'Demo'})export default原创 2020-05-28 10:29:03 · 1618 阅读 · 0 评论 -
TypeScript项目中的tsconfig.json配置指南
在TS的项目中,TS最终都会被编译JS文件执行,TS编译器在编译TS文件的时候都会先在项目根目录的tsconfig.json文件,根据该文件的配置进行编译,默认情况下,如果该文件没有任何配置,TS编译器会默认编译项目目录下所有的.ts、.tsx、.d.ts文件。实际项目中,会根据自己的需求进行自定义的配置,下面就来详细了解下tsconfig.json的文件配置。文件选项配置 files ...原创 2020-04-23 10:01:08 · 7621 阅读 · 0 评论 -
iView的Upload组件实现将文件上传至OSS文件服务器
一、情景摘要在项目开发中,我们经常会遇到需要上传附件的需求,如果实际业务场景下只需要上传少量附件的,上传到代码部署的同一台服务器是没问题的,但是如果上传附件的场景非常多,那么同一台服务器可能就承受不住了,这时就需要一台专门的文件服务器。我们常用的是阿里云的对象存储OSS。根据阿里云的OSS官方文档介绍(参见:https://help.aliyun.com/document_detail/319...原创 2020-04-24 10:04:51 · 2703 阅读 · 1 评论 -
TypeScript+Vue项目开发指南
TypeScript是国内外前端技术圈被评为2020年最受欢迎的技术之一,如果你还没开始学,是不是就out了呢?今天我们就开始TypeScript+Vue项目开发的探索,带你体验完全不一样的Vue开发方式。话不多说,让我们开始吧......1、初始化项目及环境搭建1.1、全局安装vue脚手架npm install -g @vue/cli目前默认安装的是vue/cli的最新4.0...原创 2020-04-27 10:20:36 · 2224 阅读 · 0 评论 -
使用TypeScript的10个理由
TypeScript 降低代码出错的风险开发人员写 BUG 是很自然的事情。几乎有一半的时间,我们都是在查找程序出错的原因。在 JavaScript 中,原因可能只是简单如类型错误。例如,将数值赋值给字符串变量,这个操作在 JavaScript 中没问题,但在 TypeScript 中会编译失败。JavaScript 开发人员已经被这种问题困扰很久了,甚至引入严格模式(Strict mode)...原创 2020-03-05 10:57:14 · 1144 阅读 · 0 评论