TypeScript基础类型与联合类型

2019-07-13 admin

TypeScript对它的学习其实是在前年就开始了,后面一直没有机会在项目中使用,直到最近我司开发小程序,使用京东的taro才 算真正了。使用的过程中,发现对其基本知识点并没有通透,所以才想到要记录学习的过程。

在使用的过程中,它最大的特点其实就是数据类型的定义

基础类型的定义

let name: string = 'Mondo'
let isDone: boolean = true
let dec: number = 1
let list: number[] = [1, 2]
or
let list: Array<number> = [1, 2]

定义一个已知元素数量和类型的数组,各元素的类型不必相同

let list: [string, number]
list = ['1', 2]
enum Animal { dog = 'hei', cat, pig }
let dor: Animal = Animal.dog

定义一个未知数据类型的变量

let nothing: any = 2

表示没有类型,通常用于一个函数没有任何返回值

function warnUser(): void {
    console.log("This is void");
}

默认情况下null和undefined是所有类型的子类型,你可以把他们赋值给任何类型的变量

let u: undefined = undefined
let n: null = null
let dec: string = null

类型断言好比语言里的类型转换,但是不进行特殊的数据检查和解构

let dec: string = 'Mondo'
let len: number = (<string>dec).length
or 
let len: number = (dec as string).length

以上是我们在实际运用中常见的几种基本类型,当然还有其他类型,比如NeverObject

联合类型定义

实际项目中,数据类型肯定是各种各样的,TypeScript为我们提供了各种组合类型的定义。

let list = [
{
    name: 'Mondo',
    age: 29
]

以上是我们常见的数据格式,上面说了定义数组let list: number[],可是在这条数据中数组里面元素是Object,这里要使用TypeScript接口来定义

关键词interface来定义一个接口

interface IPerson {
    label: string
}
function getPerson(person:IPerson): void {
    console.log(person.label);
}
let obj = { size: 10, label: 'mondo' };
getPerson(obj); // mondo
interface Iperson {
    name: string;
    cap?: string;
}
function getPerson(person:IPerson): void {
    console.log(person.name);
}
let obj = { name: 'mondo' };
getPerson(obj); // mondo

拥有只读属性不可改变它的值

interface Iperson {
    readonly name: string;
    age: number;
}
let obj: Iperson = { name: 'mondo', age: 29 };
obj.name = 'Imondo' // error
interface Person {
    (name: string, age: number): boolean;
}
let getPerson:Person = (name, age) => {
    return age > 20;
}
getPerson('Mondo', 29)

上接口的方法是在项目中常用的Object定义。

回到最初的定义数组,我们可以这么定义

interface Iperson {
    name: string;
    age?: number|string;
}
let list: Iperson[] = [
 {
    name: 'Mondo' 
 },
 {
    name: 'Imondo',
    age: 29
 },
 {
    name: 'IMondo',
    age: '29'
 }
]

总结

TypeScript只是粗浅的了解它的一些用法,还有很多高级的用法暂时还没有接触到,这篇文章也是本人结合项目中用到的一些常规用法而写的总结文章而已,感谢各位指正。

[转载]原文链接:https://segmentfault.com/a/1190000019750871

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69642.html

文章标题:TypeScript基础类型与联合类型

相关文章
Bootstrap显示与隐藏简单实现代码
本文实例为大家分享了bootstrap显示隐藏的具体代码,供大家参考,具体内容如下 &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;meta http...
2017-03-14
性能与生态双突破 HTML5重现爆发曙光
走过早熟的WebAPP,也经历过概念性的“轻应用”,HTML5这个被视作移动互联网未来的技术标准,终于在2015年看到了爆发的曙光。1月 15日,搜狐发布基于HTML5的“手机搜狐网3.0,加上微信几天前开放HTML5接口,HTML5很可能...
2015-11-12
JS教程之基础
javascript教程之什么是 JavaScript? JavaScript 被设计用来向 HTML 页面添加交互行为。JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。JavaScript 由数行可执行计算机代码组...
2015-11-12
2015年预测:Web体验与以往的五大不同
在过去的一年,我们见证了Uber的崛起、Apple加入了可穿戴设备的竞赛中、以及诸如Facebook收购Whatapp这类大的并购事件。那么在2015年我们将看到哪些巨大的改变?这里列出了五个对未来的预测 更清洁、简单的内容 2013年...
2015-11-11
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
本文实例讲述了JS常见创建类的方法。分享给大家供大家参考,具体如下: Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有Class。(不过,ES6引...
2017-04-05
JavaScript深入之类数组对象与
类数组对象 所谓的类数组对象: 拥有一个 length 属性和若干索引属性的对象 举个例子: var array = [&#x27;name&#x27;, &#x27;age&#x27;, &#x27;sex&#x27;]; var ...
2017-05-27
Web缓存基础:术语、HTTP报头和缓存策略
简介 对于您的站点的访问者来说,智能化的内容缓存是提高用户体验最有效的方式之一。缓存,或者对之前的请求的临时存储,是HTTP协议实现中最核心的内容分发策略之一。分发路径中的组件均可以缓存内容来加速后续的请求,这受控于对该内容所声明的缓存策略...
2016-01-13
javascript数据结构与算法之检索算法
查找数据有2种方式,顺序查找和二分查找。顺序查找适用于元素随机排列的列表。二分查找适用于元素已排序的列表。二分查找效率更高,但是必须是已经排好序的列表元素集合。 一:顺序查找 顺序查找是从列表的第一个元素开始对列表元素逐个进行判断,直到找到...
2017-03-22
javascript实现的字符串与十六进制表示字符串相互转换方法
本文实例讲述了javascript实现的字符串与十六进制表示字符串相互转换方法。分享给大家供大家参考。具体如下: 之所以写这个,是因为发现SQL注入和XSS中经常利用十六进制表示的字符串,比如 SELECT CONCAT(0x68656c6...
2017-03-27
回到顶部