欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

TypeScript - 基本类型

程序员文章站 2022-07-12 15:58:57
...

基本类型

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

相关标签: TypeScript