TypeScript - 基本类型详解

本文详细介绍了TypeScript的基本类型,包括Boolean、Number、String、Array、元组Tuple、枚举Enum、Any、Void、Null和Undefined、Never以及Object类型。还提到了类型断言的使用方法,以及学习TypeScript的原因和目的,旨在帮助不熟悉英文文档的开发者理解TypeScript。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

基本类型

Boolean布尔值

let isDone: boolean = false;

Number数字

let decimal: number= 6;  //十进制
let hex: number = 0xf00d;  //十六进制
let binary: number = 0b1010;  //二进制
let octal: number = 0o744;  //八进制

String字符串

双引号””,单引号’’, 反引号``都可以

let oldColor: string = "blue";
let newColor: string = 'red';
let sentence: string = `old color is ${ oldColor }, then new color is ${ newColor }`;

Array数组

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

元组Tuple

在已知数量和类型的情况下,定义不同类型的数组来确保赋值类型都正确

let x: [string, number]; //声明元组的类型和数量
x = ['hello', 10]; // 赋值正确
x = [10, 'hello']; // 赋值错误
x = [‘hello’]  // 赋值错误
x = [‘hello’, 10, 123] // 赋值错误
x[2] = ‘world’; //后面想添加多的数组成员也会报错

enum枚举(js本身是没有枚举的)

默认状态下,枚举数字从0开始,可以手动更改。如果不设置,那么保持原本的值。

enum Color {Red, Green, Blue}
let c: Color = Color.Green;  //c此时赋值为1

enum Color {Red = 1, Green = 4 , Blue}
let c: Color = Color.Green; // c is 4
let d: Color = Color.Blue; // d is 5

enum Color {Red = 1, Green = 4 , Blue = 7}
let c: Color = Color.Green; // c is 4
let d: Color = Color.Blue; // d is 7

顺便扩展一下,原生的Js实现枚举

let Color = {
Red: 1, 
Green:  2 ,
Blue: 3
}
let c = Color.Green;

通过枚举的值查找对应的名称

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];

console.log(colorName); // Green

Any任意类型

用于需要定义一个变量却不清楚类型的时候,多数情况下来自动态文本:例如用户输入或第三方库。定义成any意味着选择性退出类型检查,让变量顺利通过编译时的检查。

定义变量

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

定义数组

let list: any[] = [1, true, "free"];
list[1] = 100;

Void类型

通常用在function上

function warnUser(): Void {
console.log(‘This is a waring message’);
}

注意void类型变量,只能赋值null或者undefined

let unusable: void = undefined;
unusable = null; // OK if `--strictNullChecks` is not given

Null and Undefined类型

let u: undefined = undefined;
let n: null = null;

默认情况下,null和undefined是其他类型的子类型,你可以给任何类型赋值null,undefined(个人认为:谨慎赋值null或undefined,会导致很多意想不到的bug)

Never类型

使用的三种情况

  1. 总会抛出异常的函数表达式或箭头函数表达式的返回值类型
  2. 永远都不会有返回值的函数表达式或箭头函数表达式的返回值类型
  3. Never类型的变量,当被永不为真的类型保护所约束时

注:它是所有类型的子类型,可以赋值给任何类型。但是它没有子类型,不可赋值其他的类型(Any也不行),只能赋值never自己

//返回never的函数必须有无法到达的重点
function error(message: string): never {
    throw new Error(message);
}

// 推断返回值类型为never
function fail() {
    return error("Something failed");
}

//返回never的函数必须有无法到达的重点
function infiniteLoop(): never {
    while (true) {
    }
}

Object类型

用于表示非原始类型(除开number, string, boolean, bigint, symbol, null, undefined)。推荐使用Object.create

declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

Type assertions类型断点

通过类型断言这种方式告诉编译器,“相信我,我知道自己在干什么”。 类型断言像其它语言里的类型转换,但是不进行特殊的数据检查和重组。 它没有运行时的影响,只是单纯地用于编译阶段。 TypeScript会假设你,程序员,已经进行了必须的检查。

两种用法
1.尖括号包裹类型

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

2.as语句用法 (当jsx里面使用typescript, 只有这种用法是允许的)

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

后记:原本是想偷懒直接看中文手册就算了。后来学到react与webpack的时候发现好像更新速度没有跟上官方文档。所以产生了边学边翻译, 然后记录到自己博客的想法。希望能帮到一些不喜欢英语又觉得翻译器晦涩难懂的童鞋吧。欢迎大家留言沟通,相互学习。如果工作不忙的话,我尽量每天更新。

更新时间2020/02/26

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值