ts的基础类型

自己根据官网整理，方便记忆

数字 - number

let a: number = 0;
a = 5;

布尔值 - boolean

let result: boolean = true;

字符串 - string

let name: string = "";
name = "小明"

数组 - number[] / string[]

4.1 定义由number元素组成的数组，各元素的类型必须是number

let list: number[] = []; //数组中只能包含数字
list = [1,2,3] //Ok
list = ['a', 'b', 1] //Error: Type 'string' is not assignable to type 'number'

4.2 定义由string元素组成的数组，各元素的类型必须是string

 let data: string[] = []; //数组中只能是字符串
 data = ['a','b','c'] //Ok
 data = [1,2,3] //Error: Type 'number' is not assignable to type 'string'

4.3 定义由any元素组成的数组，各元素的类型不必相同，并且可以为任何类型

let arr: any[] = [];
arr = ['a',1,'c'] //Ok

元组
表示一个已知元素数量和类型的数组，各元素的类型不必相同

  let result: [number, string]; //数组中的第一项只能是数字，第二项只能是字符串
  result =  [1, 'red'] //Ok
  result = [1,2] //Error: Type 'number' is not assignable to type 'string'

枚举 - enum

enum Color {red, green}
let color: Color = Color[0];// red
let colorIndex = Color[red];//0

应用实例参考吃瓜群众欢乐多
的博客
原来的写法

//0:未提交,1待复核,2:已通过,3:已驳回
import { Tag } from "antd";
import React from "react";

//0:未提交,1待复核,2:已通过,3:已驳回
export default ({status}) => {
 switch ( status ) {
   case 0:
     return <Tag color="#108ee9">未提交</Tag>;
   case 1:
     return <Tag color="#2db7f5">待复核</Tag>;
   case 2:
     return <Tag color="#87d068">已通过</Tag>;
   case 3:
   default:
     return <Tag color="#f50">已驳回</Tag>;
 }
}

用枚举之后的：

//0:未提交,1待复核,2:已通过,3:已驳回
import { Tag } from "antd";
import React from "react";

enum Status {total = -1, unSubmit = 0, waitCheck = 1, passed = 2, rejected = 3}

//0:未提交,1待复核,2:已通过,3:已驳回
export default ({status}) => {
 switch ( status ) {
   case Status.unSubmit:
     return <Tag color="#108ee9">未提交</Tag>;
   case Status.waitCheck:
     return <Tag color="#2db7f5">待复核</Tag>;
   case Status.passed:
     return <Tag color="#87d068">已通过</Tag>;
   case Status.rejected:
   default:
     return <Tag color="#f50">已驳回</Tag>;
 }
}

any 表示任何类型

let list: any = []

在一个变量上调用方法时要用any类型，Object类型只允许赋值，如下：
报错Error: Property 'toFixed' doesn't exist on type 'Object'或者Don't use `Object` as a type. The `Object` type actually means,就是错误的使用了Object类型，如果要调用方法，就要用any类型，将Object改为any即可。

let notSure: any = 4;
notSure.toFixed(); // okay, toFixed exists (but the compiler doesn't check)

let prettySure: Object = 4;
prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.

void 表示没有任何类型，当一个函数没有返回值时，你会看到其返回类型是void

function test(name: string){
  console.log('-----')
}

上边的代码没有声明函数的类型是void，在vs代码检查时，会有警告提示：Missing return type on function，修改为以下即可

 function test(name: string): void{
  console.log('-----')
}

null 和undefined

let value: null = null

然而，当你指定了–strictNullChecks标记，null和undefined只能赋值给void和它们各自。这能避免很多常见的问题。也许在某处你想传入一个 string或null或undefined，你可以使用联合类型string | null | undefined。再次说明，稍后我们会介绍联合类型。

never 表示的是那些永不存在的值的类型
官网解释： never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型；变量也可能是 never类型，当它们被永不为真的类型保护所约束时。
简单来说就是抛出异常、没有返回值的函数会定义为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，symbol，null或undefined之外的类型
注意：Object类型的变量只是允许你给它赋任意值，却不能够在它上面调用任意的方法，即便它真的有这些方法，不然会报错
类型断言 - [as语法 | <>语法]

12.1 “尖括号”语法：

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

12.2 as语法：

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

在vue中使用ts 的类型断言，只支持 as 语法。

猜你喜欢