TS入门——01.数据类型

TS入门学习——01.数据类型

---

TS数据类型介绍

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型（如下）

var luckyboy;
console.log(luckyboy)  // luckyboy声明来未赋值 为undefined
var luckyboy = 250;
console.log(luckyboy)  // 现在 luckyboy赋值为数字类型
var luckyboy = "lucky";
console.log(luckyboy)   // 现在 luckyboy从数字类型转换为字符串类型

TypeScript 类型是静态的，相关类型的变量定义好后只能赋予该类型的值，如果赋以其它类型的值则会报错，如下

// var flag: boolean = 123 // 报错 123是数字类型，而不是布尔类型
var flag: boolean = true
console.log(flag) // true
// flag = 123 // 报错 不能改变类型
flag = false // 只能改成同种类型的值
console.log(flag) // false

ts变量声明必须加上一个类型注解，指定这个变量的类型

语法：var | let | const  变量名 ：类型  =  值

 

数字类型 number

ts数字类型可以用来表示双精度 64 位浮点值，它可以用来表示整数和分数，同时支持二进制、八进制、十进制、十六进制

let binaryLiteral: number = 0b11; // ob开头代表二进制
let octalLiteral: number = 0o57;    // 0o开头代表八进制
let decLiteral: number = 250;    // 十进制
let hexLiteral: number = 0xf00f;    // 0x开头代表十六进制
let dotNum: number = 3.14159;    // 0x开头代表十六进制
console.log(binaryLiteral); // 3
console.log(octalLiteral); // 47
console.log(decLiteral); // 250
console.log(hexLiteral); // 61455
console.log(dotNum); // 3.14159

字符串类型 string

ts和js一样使用单引号（'）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式

var str1: string = 'luckyboy';
var str2: string = "luckygirl";
var str3: string = `${str1}----${str2}`;
console.log(str1); // luckyboy
console.log(str2); // luckygirl
console.log(str3); // luckyboy----luckygirl

布尔类型 boolean

ts布尔类型的值有两种：true 和 false ，代表正确和错误

var flag1: boolean = false;
flag1 = true;
console.log(flag1); // true
var str4: string = '我不帅吗？';
flag1 ? str4 = '帅' : str4 = '不帅';
console.log(str4); // 帅

数组类型

代表规定类型数据组成的集合，定义方法如下

1. 在元素类型后面加上 [] 定义数组

var arr1: number[] = [1, 2, 3, 4]
var arr2: string[] = ['a', 'b', 'c']
console.log(arr1, arr2) // [ 1, 2, 3, 4 ] [ 'a', 'b', 'c' ]

2. 使用数组泛型定义数组

var arr3: Array<number> = [ 13, 14, 520 ]
var arr4: Array<string> = ['wo', 'di', 'tian']
console.log(arr3, arr4) // [ 13, 14, 520 ] [ 'wo', 'di', 'tian' ]

元组类型

表示已知元素数量和类型的数组, 各元素的类型不必相同，但对应位置的类型需要相同的数据集合

var yuanArr: [number, string, number] = [110, 'help me!!', 120];
console.log(yuanArr); // [ 110, 'help me!!', 120 ]
// yuanArr = [ 'hello', 119, 250 ] // 报错 对应位置的类型错误
yuanArr = [80, 'lucky', 443];
console.log(yuanArr); // [ 80, 'lucky', 443 ]

枚举类型 enum

枚举类型用于定义数值集合，通过给变量设置该枚举对象中的键名获取值，默认是该键名在集合中的索引值，也可以自定义设置键的数值

enum Animal1 { ant, bear, cat, dog };
var animal1: Animal1 = Animal1.cat;
console.log(animal1); // 2
enum Animal2 { ant, bear, cat = 100, dog };
var animal2: Animal2 = Animal2.cat;
console.log(animal2); // 100

任意类型 any

声明为 any 的变量可以赋予任意类型的值，同时any类型的数组里面可以储存各种类型数据的数据，类似于原生js的动态类型（尽量不要使用any类型，不安全）

注意：声明变量如果不指定类型，那么默认就为any类型

// any类型
var aini: any = 123; // 数值类型
console.log(aini); // 123
aini = 'luckyboy'; // 字符串类型
console.log(aini); // luckyboy
aini = false; // 布尔类型
console.log(aini); // false

// any类型的数组可以储存各种不同类型的数据
var ainiArr: any[] = [123, 'lucky', true, 666];
console.log(ainiArr); // [ 123, 'lucky', true, 666 ]

未知类型unknown

unknown实际上是一个类型安全的any，也时表示未知类型，但它不像any类型一样可以直接赋值给其它变量，也不能直接调用该类型值的属性和方法

var boy1: any;
boy1 = 250;
boy1 = 'lucky';
boy1 = false
console.log(boy1.length) // 不会报错，但是这样写是错误的,false 没有 length 属性
var boy2: string
boy2 = boy1 // 不会报错，但是这样写也是错误的,不能把boolean类型赋给string类型

使用unknown就不会出现这种问题，语法会提示报错

var boy3: unknown;
boy3 = 250;
boy3 = 'lucky';
boy3 = false
// console.log(boy3.length) // 语法报错，但是这样写是错误的,false 没有 length 属性
var boy4: string
// boy4 = boy3 // 语法报错，但是这样写也是错误的,不能把boolean类型赋给string类型

但是遇到非要用的情况该怎么办呢？这时候就要使用文章底部讲到的类型断言了，这里就不介绍了

void 类型

用于标识方法返回值的类型，表示该方法没有返回值

function fn(): void {
  console.log('luckyboy') // 没有返回值
}
function fn2(): number {
  return 11 // 返回数字类型
}
// 声明一个void类型的变量只能为它赋予undefined和null
var voyide: void = undefined;

null 类型

null类型指空值，空对象引用，表示对象值缺失

var null1: null = null
console.log(null1) // null

undefined 类型

表示变量声明了但未赋值

var udf1: undefined = undefined
var udf2: any
console.log(udf1, udf2) // undefined, undefined

never 类型

never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。这意味着声明为 never 类型的变量只能被 never 类型所赋值，在函数中它通常表现为抛出异常或无法执行到终止点的代码段

// 定义两个变量
let lucky: never;
let lucy: number;
// lucky = 123; // 报错，number 类型不能给 never 类型赋值
lucky = (()=>{ throw new Error('我错了')})(); // never 类型可以赋值给 never 类型
lucy = (()=>{ throw new Error('我真的错了')})(); // never 类型可以赋值给 number 类型
// 返回值为 never 的函数可以是抛出异常的情况
function err(): never {
    throw new Error('我错了');
}
// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {
  while (true) {}
}

拓展

‘|’ 实现多种类型

使用 | 符号可以实现给变量指定支持多种类型

var person1: number | string | boolean
person1 = 100
person1 = 'lucky'
person1 = true

类型断言

类型断言（Type Assertion）可以用来手动指定一个值的类型

有时候，我们确实需要在还不确定类型的时候就访问其中一个类型的属性或方法，就会报错，这时候我们需要使用类型断言来告诉解析器变量的实际类型，使其编译通过

类型断言有两种方法

方法一：变量 as 类型

方法二：<类型>变量

var person1: unknown
person1 = 100
person1 = true
person1 = 'lucky'

var person2: string
// person2 = person1 // 报错, unknown类型不允许直接赋值，不安全
// 通过普通判断实现赋值
if (typeof person1 === 'string') {
  person2 = person1
}
// 使用类型断言
// 方法1
person2 = person1 as string
// 方法2
person2 = <string>person1
console.log(person2)

var perLen: number
// perLen = person1.length // 报错， unknown类型不允许直接使用值的方法
// 通过普通判断解决问题
if (typeof person1 === 'string') {
  perLen = person1.length
}
// 使用类型断言
// 方法1
perLen = (person1 as string).length
// 方法2
perLen = (<string>person1).length
console.log(perLen)

以上便是ts的基本类型介绍了