TypeScript类型声明书写详解


Posted in Javascript onAugust 28, 2019

本文总结一下TypeScript类型声明的书写,很多时候写TypeScript不是问题,写类型就特别纠结,我总结下,我在使用TypeScript中遇到的问题。如果你遇到类型声明不会写的时候,多看看lodash的声明,因为lodash对数据进行各种变形操作,所以你能遇到的,都有参考示例。

基本类型

// 变量
 const num: number = 1;
 const str: string = 'str';
 const bool: boolean = true;

 const nulls: null = null;
 const undefine: undefined = undefined;
 const symbols: symbol = Symbol('symbal');

 const any: any = 'any types'; // typescript的any类型,相当于什么类型约束都没有

数组

// 数组: 推荐使用T[]这种写法
 const nums: number[] = [1, 2, 3, 4];

 // 不推荐:Array<T>泛型写法,因为在JSX中不兼容,所以为了统一都使用T[]这种类型
 const strs: Array<string> = ['s', 't', 'r'];

 const dates: Date[] = [new Date(), new Date()];

数组的concat方法,返回类型为never[]问题

// 数组concat方法的never问题
 // 提示: Type 'string' is not assignable to type 'never'.
 const arrNever: string[] = [].concat(['s']);

 // 主要问题是:[]数组,ts无法根据上下文判断数组内部元素的类型
 // @see https://github.com/Microsoft/TypeScript/issues/10479
 const fixArrNever: string[] = ([] as string[]).concat(['s']);

接口

接口是 TypeScript 的一个核心知识,它能合并众多类型声明至一个类型声明:

而且接口可以用来声明:函数,类,对象等数据类型

interface Name {
 first: string;
 second: string;
}

let username: Name = {
 first: 'John',
 second: 'Doe'
};

any、null、undefined、void类型

// 特殊类型
const any: any = 'any types'; // typescript的any类型,相当于什么类型都没写
let nobody: any = 'nobody, but you';
nobody = 123;

let nulls: number = null;
let bool: boolean = undefined;

// void
function printUsername (name: string): void {
  console.log(name);
}

联合类型

联合类型在option bags模式场景非常实用,使用 **| **来做标记

function options(opts: {
  types?: string;
  tag: string | number;
}): void {
  
}

交叉类型

最典型的使用场景就是继承和mixin,或者copy等操作

// 交叉类型:如果以后遇到此种类型声明不会写,直接看Object.assign声明写法
function $extend<T, U>(first: T, second: U): T & U {
 return Object.assign(first, second); // 示意而已
}

元组 tuple

元组很少使用

let nameNumber: [string, number];

// Ok
nameNumber = ['Jenny', 221345];

// Error
// nameNumber = ['Jenny', '221345'];

let tuple: [string, number];
nameNumber = ['Jenny', 322134];

const [usernameStr, uselessNum] = nameNumber;

type的作用

ype用来创建新的类型,也可以重命名(别名)已有的类型,建议使用type创建简单类型,无嵌套的或者一层嵌套的类型,其它复杂的类型都应该使用interface, 结合implements ,extends实现。

type StrOrNum = string | number;

// 使用
let sample: StrOrNum;
sample = 123;
sample = '123';

// 会检查类型
sample = true; // Error

实践中遇到的问题

第三方库没有提供声明d.ts文件

如果第三方库没有提供声明文件,第一时间去微软官方的仓库https://github.com/borisyankov/DefinitelyTyped 查找,或者在npmjs.com上搜索@types/依赖的模块名大部分情况都可以找到。

手动添加声明文件

声明文件一般都是统一放置在types文件夹下

// 例子: types/axios.d.ts
declare module 'axios'; // 这里的axios声明为any类型

全局变量

例如一些库直接把在window上添加的全局变量

// globals.d.ts
// 例子:jQuery,现实中jQuery是有.d.ts
declare const jQuery: any;
declare const $: typeof jQuery;

非JavaScript资源

在前端工程中,import很多非js资源,例如:css, html, 图片,vue, 这种ts无法识别的资源时,就需要告诉ts,怎么识别这些导入的资源的类型。

// 看看vue怎么处理的:shims-vue.d.ts
declare module '*.vue' {
 import Vue from 'vue';
 export default Vue;
}

// html
declare module '*.html';
// css
declare module '*.css';

强制类型转换

有时候遇到需要强制类型转换,尤其是对联合类型或者可选属性时。

// 第一种:使用<>括号
const convertArrType: string[] = <Array<string>>[].concat(['s']);

// 第二种:使用as关键字
const fixArrNever: string[] = ([] as string[]).concat(['s']);

建议使用第二种,因为兼容JSX,第一种官方也不推荐了,虽然它是合法的。

可选属性和默认属性

API中提供的参数很多都有默认值,或者属性可选,怎么书写呢?

class Socket {}
// 联合类型
export type SocketType = 'WebSocket' | 'SockJs';

export interface SocketOptions {
 type: SocketType;
 protocols?: string | string[]; // 可选
 pingMessage: string | (() => string); // 联合类型,可以为string或者函数
 pongMessage: string | (() => string);
}

// 默认值
export function eventHandler = (
 evt: CloseEvent | MessageEvent | Event,
 socket: Socket,
 type = 'WebSocket' // 默认值
) => any;

独立函数怎么声明类型

刚开始我也很纠结这个问题,我就是一个独立的函数,怎么声明类型呢?尤其是写事件处理函数的API时。

class Socket {}
// 函数的声明方式
export type SocketEventHandler = (
 evt: CloseEvent | MessageEvent | Event,
 socket: Socket
) => any;

const eventHandler: SocketEventHandler = (evt, socket) => {
}

// 可选参数和rest参数
let baz = (x = 1) => {};
let foo = (x: number, y: number) => {};
let bar = (x?: number, y?: number) => {};
let bas = (...args: number[]) => {};

索引属性类型声明

JavaScript中的对象都可以使用字符串索引直接取属性或者调用方法,TypeScript中也有相应的类型声明方法。

type Hello = {
  hello: 'world';
  // key只是一个形式属性名(类似形参一样)
  [key: string]: string;
};

const greeting: Hello = {
  hi: 'morning'
}

console.log(greeting['hi'])

动态添加的属性声明

有的时候我们只声明了一个基本的类型结构,然后后续有扩展的情况 ,尤其时二次封装时的options。

interface AxiosOptions {}

type AjaxOptions = {
  axiosOptions: AxiosOptions;
  // 额外扩展的放入到单独的属性节点下 
  extraOptions: {
    [prop: string]: any
  }; 
};

type AjaxOptions1 = {
 axiosOptions?: AxiosOptions;
 // 不要这样写,因为axiosOptions拼写错误时,ts不会提示
 // 尽量把后续扩展的属性,移动到独立的属性节点下
 [prop: string]: any
};

const ajaxOptions: AjaxOptions1 = {
 axiosOptions1: {}; // 本意是axiosOptions,但是ts不会提示
}

!的使用

! 标识符告诉ts编译器,声明的变量没有问题,再运行期不会报错。

class BaseSelect extends Vue {
  options: string[]; // 这里会提示没有在constructor中初始化
  
  created() {
    this.options = ['inited']
  }
}


class BaseSelect extends Vue {
  options!: string[]; // 使用 ! 告诉编译器,我知道自己在做什么
  
  created() {
    this.options = ['inited']
  }
}

this的使用

对于独立使用的函数,可以声明指定的调用上下文

class Handler {
  info: string;
  // 声明指定的this上下文
  onClickBad(this: Handler, e: Event) {
    // oops, used this here. using this callback would crash at runtime
    this.info = e.message;
  }
}
let h = new Handler();
uiElement.addClickListener(h.onClickBad); // error!

声明合并(扩展Vue声明)

来看看使用场景,扩展vue,在vue上添加全局的属性。

// vue的声明在 vue/types/vue.d.ts

declare module 'vue/types/vue' {
 // 相当于Vue.$eventBus
 interface Vue { 
  $eventBus: Vue;
 }
  
 // 相当于在Vue.prototype.$eventBus
 interface VueConstructor {
  $eventBus: Vue;
 }
}

总结

TypeScript声明还有很多高级的用法,目前我也没有用到那么多,在我纠结不会写声明的时候,我就会看看别人的声明文件时怎么写的。

注意:尽量不要把解构和声明写在一起,可读性极差。

class Node {
 onNodeCheck(checkedKeys: any, { // 解构
   checked, checkedNodes, node, event,
  } : { // 声明
   node: any;
   [key: string]: any;
  }
 ) { 
 }
}

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

Javascript 相关文章推荐
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
jQuery 创建Dom元素
May 07 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
vue-cli如何添加less 以及sass
Jul 06 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
VSCode搭建React Native环境
May 07 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 #Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 #Javascript
Vue的编码技巧与规范使用详解
Aug 28 #Javascript
JS开发自己的类库实例分析
Aug 28 #Javascript
详解Vue 换肤方案验证
Aug 28 #Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 #Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 #Javascript
You might like
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
【python】matplotlib动态显示详解
2019/04/11 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
医学专业个人求职自荐信格式
2013/09/23 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
应聘教师自荐信
2015/03/26 职场文书
同学聚会通知短信
2015/04/20 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
党性修养心得体会2016
2016/01/21 职场文书
创业计划书之寿司
2019/07/19 职场文书