AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

TypeScript基本类型详解

2022-12-20 259
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： TypeScript基本类型详解

一、前言

常用的前端编辑器有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(){};
复制代码

推荐生成Object对象方式

// 生成对象建议以以下方式来生成
// 语法: {属性名: 属性值, 属性名: 属性值}
let h : {age: number};
h = {age:1};
// 设置对象属性可填可不填
let i : {age: number, name?: string}
i = {age:18}
i = {age: 18, name: 'ningxuan'}
复制代码

设置动态对象

// 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界面查看

网络异常，图片无法展示
| 


// 1.字面量
// 创建变量的时候就为变量设置好变量值, 这个变量值是不可更改的, 类似于java中的常量
let a: 10;
a = 10;
a = 11;
// 2.联合类型: 允许一个变量设置为多种类型的值
let b : string | number ;
b = 'hello';
b = 666;
// 在联合类型中字面量的常见使用
let c: 'boy' | 'girt';
c = 'boy';
c = 'girt';
// 任意类型(any): 不建议随便使用
// 一个变量设置为any之后, 相当于对这个变量关闭了TypeScript的类型检测
let d: any;
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): 类型安全的any
// 虽然unknown也是表示的任意值, 但是不允许直接赋给别的变量
let f: unknown;
f = '111';
b = f;
// unknown赋值给其他类型变量
// 类型检查: 可以判断类型的实际类型
if(typeof f === 'string'){
    b = f;
}
// 类型断言: 可以告诉解析器类型的实际类型
b = f as string
// 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: 一个js对象
// 万物皆可对象, 和any一样, 我们不建议使用
let g: Object ;
g = {};
g = function(){};
// 生成对象建议以以下方式来生成
// 语法: {属性名: 属性值, 属性名: 属性值}
let h : {age: number};
h = {age:1};
// 设置对象属性可填可不填
let i : {age: number, name?: string}
i = {age:18}
i = {age: 18, name: 'ningxuan'}
// 设置动态对象
// 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): 固定长度类型的数组
// 相比于数组效率会高一点
// 语法 [类型, 类型...]
let n: [string, string]
n = ['ningxuan','ningxuan']
// 元祖的元素多了少了, 类型错误都不行
n = ['ningxuan']
n = ['ningxaun','hello','world']
n = ['ningxuan',123]
// 枚举(enum)
enum o {
    boy='男孩',
    girl='女孩'
}
// 使用
let p : {name:string, genderName: o};
p = {
    name: 'ningxuan',
    genderName: o.boy
}

image.png

文章标签：
JavaScript
前端开发
安全
编译器
关键词：
TypeScript基本类型
宁轩
目录
相关文章
明弟有理想
|
2月前
|
JavaScript 前端开发 开发者
TypeScript :基本配置&数据的基本类型
本文介绍了TypeScript的安装、常见问题及解决方案、配置与使用方法。包括通过npm全局安装TypeScript、设置PowerShell执行策略、初始化项目、配置模块声明、处理数据类型等。详细步骤和代码示例帮助开发者快速上手。
明弟有理想
39 1
DieHunter1024
|
5月前
|
JavaScript 前端开发
TypeScript（二）基本类型和特殊类型
TypeScript（二）基本类型和特殊类型
DieHunter1024
68 0
王同学睡醒了
|
7月前
|
JavaScript
【TypeScript学习】—基本类型（二）
【TypeScript学习】—基本类型（二）
王同学睡醒了
44 0
【TypeScript学习】—基本类型（二）
陈俊刚
|
7月前
|
JavaScript 前端开发 开发者
TypeScript基础（一）基本类型与类型运算
TypeScript是一种开源的编程语言，它是JavaScript的超集，意味着所有的JavaScript代码都可以在TypeScript中运行。TypeScript添加了静态类型检查和其他一些新特性，以提高代码的可读性、可维护性和可扩展性。
陈俊刚
65 0
秋叶原的琴音
|
JavaScript
TypeScript基本类型和引用类型实例
TypeScript基本类型和引用类型实例
秋叶原的琴音
92 0
十八岁讨厌编程
|
存储 JavaScript 前端开发
[TypeScript]简介、开发环境搭建、基本类型
说到TypeScript我们不得不提到JavaScript，JS是由网景公司发明的一款弱类型动态脚本语言。说到弱类型，我们也就知道它非常的灵活，但是这个灵活是一把双刃剑。这就导致有些错误可能在编译时发现不了，直到运行的时候才会报错。这非常不利于我们后期的维护，而现在很多企业的大型项目转而去使用TypeScript来解决这个问题。产生背景TypeScript起源于使用JavaScript开发的大型项目。由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。。...
十八岁讨厌编程
197 1
[TypeScript]简介、开发环境搭建、基本类型
前端小白在前进
|
自然语言处理 JavaScript
Typescript基本类型---下篇
Typescript基本类型---下篇
前端小白在前进
89 0
Typescript基本类型---下篇
前端小白在前进
|
存储 JavaScript 安全
Typescript基本类型---上篇
Typescript基本类型---上篇
前端小白在前进
125 0
Typescript基本类型---上篇
嗯哼9925
|
JavaScript 前端开发 C#
TypeScript:基本类型和接口
嗯哼9925
1129 0
zting科技
|
JavaScript 前端开发 C#
TypeScript - 基本类型系统
zting科技
847 0