TypeScript - 基本类型

谁说我不能喝 提交于 2020-02-27 01:32:14

基本类型

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!