头图

TypeScript-基础类型

一、原始数据类型
TypeScript支持与js几乎相同的数据类型,此外还提供了实用的枚举类型方便我们使用。
1、布尔值-Boolean

let isDone:boolean = false;
isDone = true;
//如果给isDone赋值为非布尔的值,会提示错误

2、数字-Number
和js一样,除了支持十进制和十六进制字面量,还支持二进制和八进制字面量。

let n10 : number = 10 //十进制
let n2 : number = 0b1010 //二进制
let n8 : number = 0o12 //八进制
let n16 : number = 0xa //十六进制

3、字符串-String
与js一样,可使用""胡或者''表示字符串。

let name : string = 'Liane'

4、undefined和null
与js一样,并且可以将null和undefined赋值给其他类型的变量。

let u : undefined = undefined;
let n : null = null;
// u = 12  //error
let num : number = 0;
let str : string = 'Liane';
str = null; //不会提示错误
num = undefined //不会提示错误

二、数组Array和元组Tuple
有两种定义方法:
第一种:

let list1: number[] = [1,2,3]

第二种:

let list2: Array<number> = [1,2,3]

两种定义方法都规定数组内的元素必须与定义时规定的数据类型保持一致,若需要保存不同数据类型的数组,则可使用元组-Tuple。
注意:元组类型在定义数组的时候,元素的类型和数组长度都会被限定。

let arr3: [string,number,boolean] = ['Liane', 18, true]
let arr4: [number,number,number,string] = [1,2,3,'']

三、枚举
枚举是对js标准类型的补充,在生产开发当中,如果有些数据常用,并且格式范围是固定的,可以使用枚举类型将取值限定在一定范围内。例如一周只能有七天,颜色限定为红绿蓝等。
语法--枚举使用enum关键字来定义:

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat}

console.log(Days['Sun'])  //0
console.log(Days[0])   //'Sun'

枚举成员会被赋值为从0开始递增的数字,同时也会对枚举值到枚举名进行反向映射。

enum Color {red, green, blue}

console.log(Color[0]) //'red'
console.log(Color['red']) //0
console.log(Color[0] === 'red') //true
console.log(Color) //{0: "red", 1: "green", 2: "blue", red: 0, green: 1, blue: 2}

let color1 : Color = Color.red;
//let color2 : Color = Color[0] //error,因Color[0]的值为'red'是string,因此会提示错误
console.log(color1) //0

若不希望枚举内的成员从0开始递增,可自定义成员的值,随后的值都会依次累加1。

enum Days {Sun = 1, Mon, Tue, Wed, Thu = 100, Fri, Sat}

console.log(Days.Mon) //2
console.log(Days.Tue) //3
console.log(Days.Fri) //101
console.log(Days)//{1: "Sun", 2: "Mon", 3: "Tue", 4: "Wed", 100: "Thu", 101: "Fri", 102: "Sat", Sun: 1, Mon: 2, Tue: 3, Wed: 4, Thu: 100, …}

四、any
当我们希望一个数据类型可以存储任何类型的数据时,或者说当我们不确定一个变量的类似时,可以使用any类型。例如该值可能来自用户输入,或第三方库等。

let arr: any[] = [100, '归去,也无风雨也无晴', true]
console.log(arr[1].slice(3)) //也无风云也无晴
console.log(arr[0].slice(3))  //无错误提示,编译可通过,但编译成js,在浏览器运行时报错了

优点:解决了不确定数据类型时,变量的声明定义。
缺点:使用any类型,在很多时候TypeScript静态检查的优点就体现不出来了

五、void
某种程度上来说,void类型像时与any类型相反,它表示没有任何类型。因此一个没有任何返回值的函数,可以定义它的类型是void。

//一般用来说明函数的返回值不能是undefined和null之外的值

function fun():void {
    cosnole.log('我是一个没有返回值的fun')
}

fun()

六、Object
与js一致,表示一个Object类型的变量或者返回一个Object类型的返回值的函数

function fun(obj:object):object {
    console.log(obj);
    return {}
}

console.log(fun(1)) //error
consoel.log(fun({name: 'Liane'}))

七、联合类型-Union Type
若一个变量的值可以为多种类型中的一种,可以使用联合类型。

function fun(a:number|string):string{
    return a.toString()
}

console.log(fun(123)) //'123'

八、类型断言
可以用来手动指定一个值为某种数据类型。
语法:

1、<数据类型> 变量
2、变量 as 数据类型

例如:我们需要一个得到数字或字符串长度的方法

function getLength(a:number|string):number{
    if((<string>a).length){//第一种方式
        return (a as string).length//第二种方式
    }else {
        return a.toString().length
    }
}

console.log(getLength(12345))//5
console.log(getLength('01234')) //5

九、类型推断
TS会在没有明确指定类型的时候推测出一个类型。
1、定义变量时赋值,则会推断变量为值对应的类型。
2、定义变量时未赋值,则推断该变量为any类型。

let a = 1;  //a为number类型
//a = 'abc'; //error
//a = false; //error

let x;  //x为any类型
x = 1;
x = 'abc';
x = true;
16 声望
2 粉丝
0 条评论
推荐阅读
webpack解决跨域及其原理
跨域问题的产生:浏览器用于隔绝潜在恶意文件的安全机制-同源策略限制非同源之间的资源进行交互。webpack使用proxy解决跨域问题。基于webpack-dev-server,只适合开发阶段。配置如下:

Liane阅读 6k

封面图
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木140阅读 11.8k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 5.9k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.1k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan41阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图
16 声望
2 粉丝
宣传栏