TypeScript数据类型及其相关介绍--简洁快速过

一、数据类型

1、typeScript语法使用 冒号表示类型,例如布尔类型: let isDone: boolean = false;
2、数据类型都是小写的,一共有11种类型

  • 普通的雷同js的3种类型是:boolean、number、string、
  • 其他的有:数组、object、元组 Tuple、枚举、Any、Void、Null 和 Undefined、Never、

基本类型简介

  1. 布尔值类型同js一样,true/false值

  2. 数字类型除了js一样之外,还可是es6语法的二进制和八进制字面量写法,编译成js是十进制

  3. 字符串类型,除了js的普通用法,也支持es6的模版字符串的用法,例如let name: string = yan;let sentence: string = `Hello, my name is ${ name }

  4. 对象类型object,在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型

  • 简单接口必须一一对应就像严格的数组的解构赋值,不可多不可少
  • 接口一般首字母大写。有的编程语言中会建议接口的名称加上 I 前缀
interface Person {
readonly id: number;//只读属性,除了初始化赋值外,之后都不可赋值
name: string;
age?: number;//可选属性,初始化可有可无
[propName: string]: any;//任意属性的赋值,[propName: string]表示键名是字符串类型
}
let tom: Person = {
id:1997,//初始化赋值
name: 'Yan',
age:23,
gender: 1212
};
  1. 数组类型,有两种表示方法
  • 「类型 + 方括号」表示法:let list: number[] = [1, 2, 3];
  • 使用数组泛型,Array<元素类型>:let list: Array = [1, 2, 3];
  • 也可用 接口方式表示数组(毕竟数组也是特殊的队形)
interface NumberArray {
[index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];
  • 数组定义了类型,那么数组参数就必须是该类型的否则会报错,若是一个数组中想要定义多种类型,则可以使用any[]
  • 类数组,必须用接口方式定义的,常用的类数组都有自己的接口定义,具体可常看官方文档
  1. 元祖Tuple类型,可以定义不同类型值的数组,但是值的类型和数量必须一一对应否则会报错,类似严格的数组解构赋值例如:
let x: [string, number];
x = ['hello', 10]; // OK;
x = [10, 'hello']; // Error;
x = ['yan', 10,true,0]; // 多值少值都会报错
  1. 枚举类型:使用枚举类型可以为一组数值赋予友好的名字,像是赋予类型一般例如:
enum Color {Red, Green, Blue} 
let c: Color = Color.Green;
  • 默认从0开始赋值,可指定赋值例如
enum Color1 {Red = 1, Green, Blue};
let b: Color1 = Color1.Green;//也可全部指定赋值
  1. any类型,表示任何类型,可以用于暂且不知道是什么类型的值,或者动态的值指定类型,因为any可以是任何类型,而且可以通过编译,例如:
    let notSure: any = 4; notSure = “maybe a string instead”; notSure = false; // okay, definitely a boolean
    当你只知道一部分数据的类型时,any类型也是有用的,比如有个数组包含了不同数据,let list: any[] = [1, true, “free”]; list[1] = 100;
    变量如果在声明的时候未指定其类型且未赋值,那么它会被识别为任意值类型

  2. void类型,表示没有类型,当函数没有返回值的时候就可能见到void类型
    -void类型只有两个值undefined和null,所以申明也只能是这两个值

  3. Null 和 Undefined类型,默认情况下null和undefined是所有类型的子类型。

  • 可以把 null和undefined赋值给其他类型的变量例如
    当你指定了–strictNullChecks标记,null和undefined只能赋值给void和它们各自。 这能避免 很多常见的问题。
  • 也许在某处你想传入一个 string或null或undefined,你可以使用联合类型string | null | undefined
  1. Never类型,表示的是永不存在的值的类型
    例如, never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型;
  • 变量也可能是 never类型,当它们被永不为真的类型保护所约束时。
  • never类型是任何类型的子类型,也可以赋值给任何类型;
    然而,没有类型是never的子类型或可以赋值给never类型(除了never本身之外)。 即使 any也不可以赋值给never
    下面是一些nerver的函数// 返回never的函数必须存在无法达到的终点
function error(message: string): never { 
throw new Error(message);
 } // 推断的返回值类型为
 neverfunction fail() { 
 return error("Something failed");
  } // 返回never的函数必须存在无法达到的终点function infiniteLoop(): never { while (true) { 
  } 
} 

二、几类相关类型内容介绍

  • 类型推断、联合类型、类型断言、

1、类型推论:

定义:变量申明没有指定类型赋值,那么ts会依照类型推论给变量指定一个类型
例如:let noType = 100;//类型推论则给变量默认为数值型,若是再次赋值为string类型则会报错

2、联合类型:

定义:表示取值可以为多种类型中的一种(类似取或值)

  • 例如表示变量可取string或者number类型,但是不能取其他值例如布尔值不然会报错
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
  • 当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法例如
function getString(something: string | number): string {
return something.toString();
}
  • 当联合类型被赋值之后,会根据类型推论的规则判断出一个类型,这时候操作必须是复合推论类型的操作例如
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
console.log(myFavoriteNumber.length); // 5
myFavoriteNumber = 7;
console.log(myFavoriteNumber.length); // 编译时报错

3、类型断言:

定义:类型断言(Type Assertion)可以用来手动指定一个值的类型。
简单来讲就是可以通过类型断言不对某段代码做编译,但是无法避免运行时的错误反而滥用类型断言可能会导致运行时错误

两种形式
1、尖括号法:let someValue: any = “this is a string”; let strLength: number = (someValue).length;
2、as语法:let someValue: any = “this is a string”; let strLength: number = (someValue as string).length;

两种形式都可以看个人喜好,但是当你在TypeScript里使用JSX时,只有 as语法断言是被允许的

类型断言应用

  • 将一个联合类型断言为其中一个类型
interface Cat {
name: string;
run(): void;
}
interface Fish {
name: string;
swim(): void;
}
function swim(animal: Cat | Fish) {
(animal as Fish).swim();
}
const tom: Cat = {
name: 'Tom',
run() { console.log('run') }
};
swim(tom);
// Uncaught TypeError: animal.swim is not a function`
  • 将一个父类断言为更加具体的子类(值是具体值的时候可以instanceof,但若只有类型,则无法使用故用断言是更好的选择)
class ApiError extends Error {
code: number = 0;//值是具体值
}
class HttpError extends Error {
statusCode: number = 200;
}
function isApiError(error: Error) {
if (typeof (error as ApiError).code === 'number') {
return true;
}
return false;
}
  • 将任何一个类型断言为 any(不可滥用否则怕会有隐藏问题,)
  • 将 any 断言为一个具体的类型

类型断言和类型转化
类型断言只会影响编译,不会影响真正的变量的类型

类型断言和类型申明
类型申明较为严格
要A断言为B,则满足A兼容B或者B兼容A就可通过断言去获取AB的值,
要A赋值给B,则必须满足A兼容B

类型断言和范型

总结

typeScript的数据类型较多,真正的吸收还得是项目实战。

你可能感兴趣的:(知识储备,typescript,前端)