TypeScript基础类型与联合类型

Awbeci 发布于2019-08-23 18:39 / 3166人阅读

摘要：在使用的过程中，它最大的特点其实就是数据类型的定义。联合类型定义实际项目中，数据类型肯定是各种各样的，为我们提供了各种组合类型的定义。

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

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

基础类型的定义

字符串类型

let name: string = "Mondo"

布尔类型

let isDone: boolean = true

数字类型

let dec: number = 1

数组

let list: number[] = [1, 2]
or
let list: Array = [1, 2]

元组Tuple

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

let list: [string, number]
list = ["1", 2]

枚举

enum Animal { dog = "hei", cat, pig }
let dor: Animal = Animal.dog

Any

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

let nothing: any = 2

Void

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

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

Null 和 Undefined

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

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

类型断言

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

let dec: string = "Mondo"
let len: number = (dec).length
or 
let len: number = (dec as string).length

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

联合类型定义

实际项目中，数据类型肯定是各种各样的，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只是粗浅的了解它的一些用法，还有很多高级的用法暂时还没有接触到，这篇文章也是本人结合项目中用到的一些常规用法而写的总结文章而已，感谢各位指正。

GPU云服务器云服务器基础数据类型 JAVA 基础类型 python基础数据类型 js基础数据类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105603.html

Typescript 基础（一）之类型

摘要：基本数据类型包括数值字符串布尔值以及新增的。数值类型中的二进制表示法或者开头中的八进制表示法或者开头字符串类型普通字符串模板字符串模板字符串布尔值和类型在中使用和来定义这两个数据类型。一、基本数据类型 Javascript 的类型分为两种：原始数据类型和对象类型，TypeScript 支持与JavaScript几乎相同的数据类型，此外还提供了枚举、元组等实用的类型。基本数据类型包括：...

GitCafe 2019-08-26 12:08 评论0 收藏0
为vue3学点typescript, 基础类型和入门高级类型

摘要：导航第一课体验第二课基础类型和入门高级类型第三课泛型第四课解读高级类型很重要这一节很重要可以说是的最核心部分这一节学完其实就可以开始用写代码了想想中的再看看标题中的类型字所以请大家务必认真什么是入门高级类型因为高级类型的内容比较多但是有些基导航第一课, 体验typescript 第二课, 基础类型和入门高级类型第三课, 泛型第四课, 解读高级类型很重要这一节很重要, 可以说...

Songlcy 2019-08-23 18:27 评论0 收藏0
Typescript 基础（二）之函数

摘要：调用者容易迷惑，当传入函数的参数类型为时返回值的类型究竟是还是。前面两个是函数声明，最后一个是函数实现，有参数类型和返回值类型随意搭配的意思。 Typescript 中的函数 Javascrip 中函数是一等公民一、Javascript 中的两种常见的定义函数的方式1、函数声明 function myFunc(x,y){ return x+y } 2、函数表达式 let add...

yeyan1996 2019-08-23 10:22 评论0 收藏0
TypeScript入门教程

摘要：现在，出现了更多本身支持或者通过插件支持语法智能提示纠错甚至是内置编译器的文本编辑器和。 TypeScript是什么 TypeScript是JavaScript的一个超集 TypeScript需要编译为JavaScript才能运行（语法糖） TypeScript提供了类型系统，规范类似Java TypeScript提供了ES6的支持，也可以支持部分ES7草案的特性，不用担心TypeS...

Dr_Noooo 2019-08-26 11:52 评论0 收藏0