携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情

一、前言

常用的前端编辑器有Vscode, idea, WebStorm等

本文采用的相关代码采用vscode进行编写

二、TypeScript基本类型

数字类型(number)
字符串类型(string)
布尔类型(boolean)
数组类型(Array)
Object(和any的作用基本相似)
Symbol
没有值(undefined或unknown)
空值(void)
任意类型(any)
没有值(never)
枚举(enum)
元祖(tuple)

类型	描述	例子
number	任意数字	1,2,3
string	任意字符串	'a','asad'
boolean	布尔类型 true或false	true或false
array	任意js数组	[1,2,3]
object	任意js对象	{age:18}
sysmbol	属性唯一,数字或者字符串	Symbol('key')
unknown	类型安全的any	*
void	空值	undefined
any	任意类型	*
never	没有值	不能是任何值
enum	枚举	enum{A,B}
tuple	元祖, 固定长度数组	['a', 1]

三、为变量指定类型

// 在js中, 是没有类型的, 使用 let声明一个变量之后可以为这个变量赋值为数字后继续赋值为字符串
let a;

a = 666;
a = 'hello';

// 但是在ts中, 是存在数据类型的, 如下面的变量B的数据类型就设置为 number(数字)时, 将字符串 ningxuan赋值给b时就会报错
let b: number ;

b = 888;
b = 'ningxuan';// 报错

// 同理, 当给变量 c设置类型为字符串(string)时, 不能为他赋值字符串之外的类型的值
let c:string;

c = 'ningxuan';
c = 124;// 报错

// 我们还可以指定类型的时候给其赋值
let d: boolean = true;

// 如果我们的变量的赋值和声明是同时进行的, TypeScript可以自动对变量进行类型检测
// 当我们创建变量 e的时候, 将其赋值为true, 那么默认他的类型为boolean, 为其赋值 123的时候会报错
let e = true

e = 123;//报错

四、函数

在js中是不考虑参数的类型和个数的, 但是在ts中, 我们可以为参数指定类型, 也可以为函数指定返回值类型

// js函数
// 当执行以下函数的时候, 若传入的两个参数都是数字则相加, 若传入的参数有一个为字符串则是字符串拼接
function sum(f , g){
    f + g;
}
// 执行
sum(1, 2)   // 3
sum(1, '2') // '12'
sum(1,2,3)  // 3, 多出的第三个参数省略

// ts函数
// 当执行以下函数时, 若传入的两个参数都是数字则相加, 若传入的参数中有一个为字符串则报错
function sum2(h: number, i: number ){
    h + i;
}
sum2(1,2)   // 3
sum2(1 , '2')   // 类型错误 报错
sum(1,2,3)  // 参数个数错误, 报错

// 函数返回值指定
function sum3(j:number, k:number): number{
    return j+k
}

五、ts中类型的使用

字面量

// 创建变量的时候就为变量设置好变量值, 这个变量值是不可更改的, 类似于java中的常量
let a: 10;
a = 10;
a = 11;

联合类型

联合类型: 允许一个变量设置为多种类型的值

let b : string | number ;
b = 'hello';
b = 666;

联合类型中字面量的常见使用

let c: 'boy' | 'girt';
c = 'boy';
c = 'girt';

任意类型(any)

一个变量设置为any之后, 相当于对这个变量关闭了TypeScript的类型检测,不建议随便使用, 可用unknown

d = 'hello';
d = 666;
d = true;
d = [1,2,3];

隐式any

声明变量的时候如果不指定类型, 编译器会自动判断这个变量为隐式any

let e;

any的隐患

// 设置e为布尔值的true
e = true;
// 变量b为联合类型, string或者number, 按理来讲是不可以将 true复制给b的, 但是因为e是 any类型, 所以未报错
b = e

未知类型(unknown)

unknown类似于安全的any

虽然unknown也是表示的任意值, 但是不允许直接赋给别的变量

let f: unknown;
f = '111';
b = f;

unknown复制给其他类型的两种方法

类型检查: 可以判断类型的实际类型

if(typeof f === 'string'){
    b = f;
}

类型断言: 可以告诉解析器类型的实际类型

b = f as string

void

void用来表示空

// 某些情况下函数没有返回值
function fn(): void{

}
// 如果有返回值就会报错
function fn1(): void{
    return 123
}
// 返回值为 '空' 的情况下
function fn2(): void{
    return 
}
// never: 任何情况下都没有返回值
function fn3(): never{
    return
}
// 常用情况
function fn4(): never{
    throw new Error('服务内部错误')
}

Object

Object: js对象

万物皆可对象, 和any一样, 所以我们不建议直接使用

js生成对象方式

let g: Object ;
g = {};
g = function(){};

设置动态对象

// propName 为任意名称, string为可选, 范围(number, string, symbol)
let j: {age: number, [propName: string]: any};  // 该变量必须有age属性, 其他属性可选
j = {age: 18}
j = {age: 18, name: 'ningxuan'}
j = {age: 18, name: 'ningxuan', project: 'blog'}
// 但是如果没有age属性的话会报错
j = {name: 'ningxuan'};

函数结构的类型声明

// 传入两个指定类型参数, 同时指定返回值类型
//  语法: (形参: 类型...) => 返回值类型
let k: (a: number, b: number)=>number
// 定义函数结构
k = function(a, b){
    return a + b
}

数组(array)

// 语法 类型[] 或 Array<number>
let l: number[];
l = [1,1,2,3]
let m: Array<number>;
m = [2,3,4]

元祖

元祖(tuple): 固定长度类型的数组

// 元祖(tuple): 固定长度类型的数组
// 相比于数组效率会高一点
// 语法 [类型, 类型...]
let n: [string, string]
n = ['ningxuan','ningxuan']
// 元祖的元素多了少了, 类型错误都不行
n = ['ningxuan']
n = ['ningxaun','hello','world']
n = ['ningxuan',123]

枚举

enum o {
    boy='男孩',
    girl='女孩'
}
// 使用
let p : {name:string, genderName: o};
p = {
    name: 'ningxuan',
    genderName: o.boy
}

六、总结

至此, TypeScript的基本数据类型介绍和简单使用就到这里结束了, 如果文中有不对的地方欢迎评论区指教, 毕竟我也是初学者

文中出现的所有代码, 可在下方码上掘金的Script界面查看

TypeScript基本类型详解