[1] 基础类型

63 阅读2分钟

举个例子

JS let name = 'lichuyan';
TS let name: string = 'lichuyan' ;
// 在变量名字后面  :类型
  • boolean(布尔类型)
  • number(数字类型)
  • string(字符串类型)
  • array(数组类型)
  • tuple(元组类型)
  • enum(枚举类型)
  • any(任意类型)
  • null 和 undefined 类型
  • void 类型
    用于标识方法返回值的类型,表示该方法没有返回值。
  • never 类型
    never是其他类型 (包括null和 undefined)的子类型,可以赋值给任何类型,代表从不会出现的值
  • object 对象类型

联合类型 |

举例:let name: string | nunber;
含义:联合类型表示一个值可以是几种类型之一。我们用竖线|分隔每个类型,所以 number | string 表示一个值可以是 number 或 string。

可选属性 ?

举例:

interface SquareConfig {
  color?: string
  width?: number
}

含义:可有key,可无key。

数组类型

举例:

let a : string[] = ['a','b'];
let a: Array<string> = ['a','b'] // 数组泛形

枚举 enum

举例:

 enum Color {
     Red = 'red',
     Green = 'green',
     Blue = 'blue'
 }
   let status: Color = Color.Red;
   console.log('status', status); // red

含义:联合类型表示一个值可以是几种类型之一。我们用竖线|分隔每个类型,所以 number | string 表示一个值可以是 number 或 string。

接口 interface

举例:

interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom'
};

含义:定义对象的类型。

断言

(1) 类型断言 - 尖括号语法 或者 as 语法
举例:

let someValue: any = 'this is a string';
// 尖括号 语法:
let strLength: number = (<string>someValue).length;
// as 语法
let strLength: number = (someValue as string).length;

含义:你比TS更知道变量的类型,通过类型断言告诉编辑器我知道我在做什么。类型断言好比其它语言里的类型转换.
(2)非空断言
在上下文中当类型检查器无法断定类型时,一个新的后缀表达式操作符 ! 可以用于断言操作对象是非 null 和非 undefined 类型。
非空断言用!表示,x! 将从 x 值域中排除 null 和 undefined,也就是说它断定某变量一定不是 nullundefined

let flag: null | undefined | string;
flag!.toString(); // ok
flag.toString(); // error

(3)确定赋值断言
允许在实例属性和变量声明后面放置一个 ! 号,从而告诉 TypeScript 该属性会被明确地赋值。为了更好地理解它的作用,我们来看个具体的例子:

let x: number;
initialize();

// Variable 'x' is used before being assigned.(2454)
console.log(2 * x); // Error

function initialize() {
  x = 10;
}

很明显该异常信息是说变量 x 在赋值前被使用了,要解决该问题,我们可以使用确定赋值断言:

let x!: number;
initialize();
console.log(2 * x); // Ok

function initialize() {
  x = 10;
}

通过 let x!: number; 确定赋值断言,TypeScript 编译器就会知道该属性会被明确地赋值。

函数类型

举例:

const goToProgressPage = (orderDetailId: number | string, claimApplyUuid: string): void => {
    // 逻辑处理
};

含义:函数类型包含两部分:参数类型返回值类型