浅谈Vue3.0之前你必须知道的TypeScript实战技巧

很多人对TypeScript的使用还停留在基本操作上,其实TypeScript的特性非常强大,我们利用好这些特性可以有效地提高代码质量、加速开发效率,今天就介绍9个非常实用的TypeScript技巧或者特性.

注释的妙用

我们可以通过 /** */ 来注释TypeScript的类型,当我们在使用相关类型的时候就会有注释的提示,这个技巧在多人协作开发的时候十分有用,我们绝大部分情况下不用去花时间翻文档或者跳页去看注释。

浅谈Vue3.0之前你必须知道的TypeScript实战技巧

巧用类型推导

TypeScript 能根据一些简单的规则推断(检查)变量的类型。

比如一个简单的add函数

function add(a: number, b: number) {
 return a + b
}

TypeScript就可以通过参数与return的运算符推导出函数的返回值

浅谈Vue3.0之前你必须知道的TypeScript实战技巧

如果想获取函数整体的类型那么可以借助 typeof

注意与JavaScript中的typeof区分开

type AddFn = typeof add

当然上述情况算是比较简单的情况,有时候我们的返回值类型其实比较复杂,这个时候借助类型推导和 ReturnType 就可以很轻松地获取返回值类型。

type returnType = ReturnType<typeof add> // number

上述技巧在对redux进行编码的时候非常适用,这样可以省略我们大量的重复代码,毕竟redux的编码工作是非常繁琐的。

巧用元组

有时候我们可能需要批量的来获取参数,并且每一个参数的类型还不一样,我们可以声明一个元组如:

function query(...args:[string, number, boolean]){
 const d: string = args[0];
 const n: number = args[1];
 const b: boolean = args[2];
}

巧用Omit

有时候我们需要复用一个类型,但是又不需要此类型内的全部属性,因此需要剔除某些属性,这个时候 Omit 就派上用场了。

interface User {
 username: string
 id: number
 token: string
 avatar: string
 role: string
}
type UserWithoutToken = Omit<User, 'token'>

这个方法在React中经常用到,当父组件通过props向下传递数据的时候,通常需要复用父组件的props类型,但是又需要剔除一些无用的类型。

浅谈Vue3.0之前你必须知道的TypeScript实战技巧

运用Record

Record 是TypeScript的一个高级类型,但是相关的文档并不多,所以经常被人忽略,但是是一个非常强大的高级类型。

Record允许从Union类型中创建新类型,Union类型中的值用作新类型的属性。

举个简单的例子,比如我们要实现一个简单的汽车品牌年龄表,一下写法貌似没有问题。

type Car = 'Audi' | 'BMW' | 'MercedesBenz'

const cars = {
 Audi: { age: 119 },
 BMW: { age: 113 },
 MercedesBenz: { age: 133 },
}

虽然这个写法没问题,但是有没有考虑过类型安全的问题?

比如:

  • 我们忘记写了一个汽车品牌,他会报错吗?
  • 我们拼写属性名错误了,它会报错吗?
  • 我们添加了一个非上述三个品牌的品牌进去,他会报错吗?
  • 我们更改了其中一个品牌的名字,他会有报错提醒吗?

上述这种写法统统不会,这就需要Record的帮助。

type Car = 'Audi' | 'BMW' | 'MercedesBenz'
type CarList = Record<Car, {age: number}>

const cars: CarList = {
 Audi: { age: 119 },
 BMW: { age: 113 },
 MercedesBenz: { age: 133 },
}

当我们拼写错误:

浅谈Vue3.0之前你必须知道的TypeScript实战技巧

当我们少些一个品牌:

浅谈Vue3.0之前你必须知道的TypeScript实战技巧

当我们添加了一个非约定好的品牌进去:

浅谈Vue3.0之前你必须知道的TypeScript实战技巧

在实战项目中尽量多用Record,它会帮助你规避很多错误,在vue或者react中有很多场景选择Record是更优解。

巧用类型约束

在 .jsx 文件里,泛型可能会被当做 jsx 标签

const toArray = <T>(element: T) => [element]; // Error in .jsx file.

加 extends 可破

const toArray = <T extends {}>(element: T) => [element]; // No errors.

交叉类型

交叉类型是将多个类型合并为一个类型。 这让我们可以把现有的多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性。

在 JavaScript 中,混入是一种非常常见的模式,在这种模式中,你可以从两个对象中创建一个新对象,新对象会拥有着两个对象所有的功能。交叉类型可以让你安全的使用此种模式:

浅谈Vue3.0之前你必须知道的TypeScript实战技巧

联合类型

在 JavaScript 中,你希望属性为多种类型之一,如字符串或者数组。这就是联合类型所能派上用场的地方(它使用 | 作为标记,如 string | number)。

function formatCommandline(command: string[] | string) {
 let line = '';
 if (typeof command === 'string') {
 line = command.trim();
 } else {
 line = command.join(' ').trim();
 }
}

类型别名

类型别名会给一个类型起个新名字,类型别名有时和接口很像,但是可以作用于原始值,联合类型,元组以及其它任何你需要手写的类型。

类型别名可以是泛型

type Container<T> = { value: T };

也可以使用类型别名来在属性里引用自己:

type Tree<T> = {
 value: T;
 left: Tree<T>;
 right: Tree<T>;
}

类型别名看起来跟interface非常像,那么应该如何区分两者?

interface只能用于定义对象类型,而type的声明方式除了对象之外还可以定义交叉、联合、原始类型等,类型声明的方式适用范围显然更加广泛。

但是interface也有其特定的用处:

  • interface 方式可以实现接口的 extends 和 implemenjs
  • interface 可以实现接口合并声明
type Alias = { num: number }
interface Interface {
 num: number;
}
declare function aliased(arg: Alias): Alias;
declare function interfaced(arg: Interface): Interface;

此外,接口创建了一个新的名字,可以在其它任何地方使用。 类型别名并不创建新名字—比如,错误信息就不会使用别名。 在下面的示例代码里,在编译器中将鼠标悬停在interfaced上,显示它返回的是Interface,但悬停在aliased上时,显示的却是对象字面量类型。

浅谈Vue3.0之前你必须知道的TypeScript实战技巧

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2019-09-10

js捆绑TypeScript声明文件的方法教程

前话 TypeScript是JavaScript类型的超集,这是TypeScript的文档介绍的一句话,那么他们存在联系呢? 我的理解是,TypeScript在JavaScript基础上引入强类型语言的特性.开发者使用TypeScript语法进行编程开发,最终通过转换工具将TypeScript转换成JavaScript. 使用TypeScript能够避免在原生JavaScript上开发所带来的弱类型语言的坑.(我该输入啥?调用后返回啥?哎还是看看源码吧...) 嗯!很好,强类型的JavaScri

TypeScript 中接口详解

在 TypeScript 中,接口是用作约束作用的,在编译成 JavaScript 的时候,所有的接口都会被擦除掉,因为 JavaScript 中并没有接口这一概念. 先看看一个简单的例子: function printLabel(labelledObj: { label: string }) { console.log(labelledObj.label); } var myObj = { size: 10, label: "Size 10 Object" }; printLabel

TypeScript学习之强制类型的转换

前言 使用强类型变量常常需要从一种类型向另一种类型转换,通常使用ToString或ParseInt可以来实现一些简单的转换,但是有时候需要像.NET语言中那样将一种类型显示的转换为另一种类型,在TypeScript规范中,被称为"类型断言",它仍然是类型转换,只是语法是有些不同.下面来详细看看TypeScript的强制类型转换. TypeScript强制类型转换 在 TypeScript 中将一个 number 转换成 string ,这样做会报错: var a:number = 12

在Vue组件中使用 TypeScript的方法

注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? TypeScript的设计目的应该是解决JavaScript的"痛点":弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. typescript不仅可以约束我们的编码习惯,还能起到注释的作用,当我们看到一函数后我们立马

详解使用Typescript开发node.js项目(简单的环境配置)

最近在学习typescript的过程中,想到也许可以使用ts来开发node.js项目.在网上搜了一下,其实已经有很多开发者实践了这方面的内容.这里,我记录一下自己搭建开发环境的简单过程. 使用Typescript开发的好处: 较严格的类型检查和语法检查. 对ES6/ES2015/ES7(部分)支持比较好. 编译后的js文件很干净,也支持多种代码规范. 其他,请参见文档. 准备 node.js v6.9.1 或者任意的新版本,老版本暂时没有试验. tsc typescript编译器,使用npm安装

使用TypeScript开发微信小程序的方法

TypeScript简介: TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构师,已工作于TypeScript的开发. TypeScript扩展了JavaScript的语法,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作.TypeScript是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性.

详解Vue3.0 前的 TypeScript 最佳入门实践

前言 我个人对更严格类型限制没有积极的看法,毕竟各类转类型的骚写法写习惯了. 然鹅最近的一个项目中,是 TypeScript + Vue ,毛计喇,学之...-真香! 注意此篇标题的"前",本文旨在讲Ts混入框架的使用,不讲Class API 1. 使用官方脚手架构建 npm install -g @vue/cli # OR yarn global add @vue/cli 新的 Vue CLI 工具允许开发者 使用 TypeScript 集成环境 创建新项目. 只需运行 vue cr

详解在Vue中使用TypeScript的一些思考(实践)

Vue.extend or vue-class-component 使用 TypeScript 写 Vue 组件时,有两种推荐形式: Vue.extend():使用基础 Vue 构造器,创建一个"子类".此种写法与 Vue 单文件组件标准形式最为接近,唯一不同仅是组件选项需要被包裹在 Vue.extend() 中. vue-class-component:通常与 vue-property-decorator 一起使用,提供一系列装饰器,能让我们书写类风格的 Vue 组件. 两种形式输出

c#程序员对TypeScript的认识过程

简介 TypeScript一直发展不错,我们公司在开发新功能时,考虑到程序的可维护性,使用了TypeScript编写浏览器上的程序,我们是从零开始使用TypeScript,甚至我连javascript也是半罐子,本文描述了一个c#程序员认识TypeScript的过程. 注:本文编写是基于Typescript0.8版本,而且初用,可能过时,具体规范可以参考http://www.typescriptlang.org 命名空间和类 作为面向对象的开发人员思维,第一个想到的是TypeScript如何定义

程序员必备,程序员四大忌

一忌:轻易言败,没有自信 没有永不放弃精神的程序员,只是一个有程序员名号的假程序员.一个真正的程序员,知道在程序设计的过程中,可能会遇到不计其数的困难和问题,可能有极多的挫折和失败,而成功只有一次. 就为解决一个问题,我们可能连续十几甚至几十小时的坐在计算机前不停的工作.一个问题解决了,可能又有其它的问题出现.而你要是不能坚持下来,可能从前的一切努力都流失了.轻易言败的人请不要做程序员,你不可能成功.执着是最可贵的. 执着的程序员都是相信自己的人,每时每刻都会鼓励自己,你做的出来,你能解决,你会

99%的程序员都会收藏的书单 你读过几本?

人丑就要多读书,颜值不够知识来凑,至少你可以用书籍来武装你的大脑,拯救你的人生.  01 顶级程序员必备书籍,雷军都点赞的书单! (点击这里,查看原文) 拿到了一份雷军点赞的程序员必读书单, 让我们看看, 想成为程序员大神,需要哪些书籍! 软件工程本身就是一个需要实践的行业, 在实践的同时,针对读书, 我的看法是:不能不读! 读了之后在实际开发的过程中, 能够避免一些坑! 好的书籍每年都会有新的产出, 雷军推荐的顶级程序员书单都有哪些书呢? 02 Python书单,不将就(部分pdf电子书下载)

程序员 代码是从头编还是使用框架好呢?

在编码的世界里,程序员永远不要期待东西保持静止太久.技术已经决定了我们如何互动.创造.学习.生活等,并且不断发展.对于程序员来说,只有靠近和依赖最新技术才能完成任务.而且最深刻的改变之一就是框架.编程语言以及两者之间的范式转变. 编程语言本质上是与计算机通信的方式,并通过使用语法和语义告诉计算机要做什么.框架是汇集了一起完成任务的程序的集合,使编码更有效率,并且通常使程序员的生活更容易. 当然,二者绝不是对立的关系,只是编程社区中仍然存在一些争议:到底是应该自己从头开始编写代码还是使用各种框架简

十个Python程序员易犯的错误

常见错误1:错误地将表达式作为函数的默认参数 在Python中,我们可以为函数的某个参数设置默认值,使该参数成为可选参数.虽然这是一个很好的语言特性,但是当默认值是可变类型时,也会导致一些令人困惑的情况.我们来看看下面这个Python函数定义: >>> def foo(bar=[]): # bar是可选参数,如果没有提供bar的值,则默认为[], ... bar.append("baz") # 但是稍后我们会看到这行代码会出现问题. ... return bar Py

每个程序员都应该学习使用Python或Ruby

如果你是个学生,你应该会C,C++和Java.还会一些VB,或C#/.NET.多少你还可能开发过一些Web网页,你知道一些HTML,CSS和JavaScript知识.总体上说,我们很难发现会有学生显露出掌握超出这几种语言范围外的语言的才能.这真让人遗憾,因为还有很多种编程语言,它们能让你成为一个更好的程序员. 在这篇文章里,我将会告诉你,为什么你一定要学习Python或Ruby语言. 跟C/C++/Java相比 - Python/Ruby能让你用少的多的多的代码写出相同的程序.有人计算过,Pyt

程序员开发项目是选择效率还是质量呢?

本文作者系程序猿Daniel F Pupius,这是一篇他发表在Medium上的博文,讲述自己怎么在实际写代码的过程中,发现在效率和质量间做出抉择其实是个伪命题. 程序开发项目进行过程中,通常会冒出这样的困惑:应该选择效率,还是选择质量?很多程序猿都会有偷懒的思维,觉得把一些摸不清头绪.不知道怎么写的代码片段去掉,可以节省很多时间,更早完成项目计划. 其实过去几年中,我也是这么想的,但最近我开始意识到,这个问题的纠结之处不在于选择困难,而在于问题本身是个伪命题. 什么是"质量"呢?一般

PHP程序员玩转Linux系列 使用supervisor实现守护进程

PHP程序员玩转Linux系列文章: 1.PHP程序员玩转Linux系列-怎么安装使用CentOS 2.PHP程序员玩转Linux系列-lnmp环境的搭建 3.PHP程序员玩转Linux系列-搭建FTP代码开发环境 4.PHP程序员玩转Linux系列-备份还原MySQL 5.PHP程序员玩转Linux系列-自动备份与SVN 6.PHP程序员玩转Linux系列-Linux和Windows安装nginx 7.PHP程序员玩转Linux系列-nginx初学者引导 8.PHP程序员玩转Linux系列-N

最有价值的50道java面试题 适用于准入职Java程序员

下面的内容是对网上原有的Java面试题集及答案进行了全面修订之后给出的负责任的题目和答案,原来的题目中有很多重复题目和无价值的题目,还有不少的参考答案也是错误的,修改后的Java面试题集参照了JDK最新版本,去掉了EJB 2.x等无用内容,补充了数据结构和算法相关的题目.经典面试编程题.大型网站技术架构.操作系统.数据库.软件测试.设计模式.UML等内容,同时还对很多知识点进行了深入的剖析,例如hashCode方法的设计.垃圾收集的堆和代.Java新的并发编程.NIO.2等,相信对准备入职的Ja

写给iOS程序员的命令行使用秘籍

Mac OS是Unix系统的分支,有着强大的命令行功能.很多事情在命令行下处理会事半功倍,所以我就iOS程序员可能会用到的功能讲述一下. 终端设置 Mac的终端有一个很关键的配置,就是"使用 Option 键作为 Meta 键".勾上这个选项之后,就可以使用Emacs的编辑命令了. 我发现有些人的终端没有设置"平滑文本",导致终端上的文字很难看.赶紧把这个选项勾上吧. 常用的几个快捷键如下. control+a,跳到命令行开始位置:control+e,跳到命令行结尾