前言

之前对TypeScript一直处于观望的角度,总是觉得自己工作的时候要用到再学吧,但是这几天经历确实给我上了一课,都0202年了,前端还不会TypeScript?受伤的是自己,于是,开干吧!

什么是TypeScript

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，TypeScript 在 JavaScript 的基础上添加了可选的静态类型和基于类的面向对象编程。其实TypeScript就是相当于JavaScript的增强版，但是最后运行时还要编译成JavaScript。TypeScript最大的目的是让程序员更具创造性，提高生产力，它将极大增强JavaScript编写应用的开发和调试环节，让JavaScript能够方便用于编写大型应用和进行多人协作。

变量类型

为了让程序有价值，我们需要能够处理最简单的数据单元：数字，字符串，结构体，布尔值等。 TypeScript支持与JavaScript几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。

TypeScript中的数据类型

Boolean:布尔值
Number:数值类型;
string : 字符串类型;
enum：枚举类型
any : 任意类型
void：空类型
Null ：空类型
undefined
Never 永不存在的值的类型
object 对象
Array : 数组类型
Tuple : 元祖类型

1. Boolean

作任何业务逻辑判断都要有布尔类型的参与，通过对与错的判断是最直观的逻辑处理,boolean类型只有两种值，true和false。

let  isOk:boolean = false
console.log(isOk)//false

2. Number

和JavaScript一样，TypeScript里的所有数字都是浮点数。这些浮点数的类型是 number。除了支持十进制和十六进制字面量，TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。

let num1:number = 123
let num2:number = 0xf00d
let num3:number = 0b1111
let num4:number = 0o744

console.log(num1,num2,num3,num4)//123 61453 15 484

3 .string

跟javascript一样可以使用双引号:""和单引号:'',同样是可以使用模板字符串(``)

let pz:string = "pzeng"
let age: number = 37;
let question: string = `Hello, my name is ${
      
       pz },i love ${
      
      age}`
console.log(question) //Hello, my name is pzeng,i love 37

4. enum

这个世界有很多值是多个并且是固定的，比如：一年的季节：春、夏、秋、冬，有四个结果。这种变量的结果是固定的几个数据时，就是我们使用枚举类型的最好时机：

//默认情况下，从0开始为元素编号
enum Color {
    
    yello,pink,red} 
let c:Color = Color.pink
console.log(c)//1
//自定义编号
enum Color {
    
    yello=1,pink,red} 
let c:Color = Color.pink
console.log(c)//2
//枚举类型提供的一个便利是你可以由枚举的值得到它的名字
enum Color {
    
    yello=1,pink,red} 
let colorName:string = Color[2]
console.log(colorName)//pink

5.any

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。那么我们可以使用 any类型来标记这些变量.其实前端写多了有时候不自觉的就分不清类型了。这是个不好的习惯，也是前端的痛，就因为这个原因，JavaScript也多次被人诟病说大型项目不适合用JavaScript.

var t:any =10
t='你好'
t= false
console.log(t)

6.Void

某种意义上来讲,viod跟any相反,他表示没有任何类型,当一个函数没有返回值的时候,通常会见到其返回值的类型为void


function warnUser(): void {
    
    
  console.log("This is my warning message");
}
let unusable: void = undefined;

7.Null 和 Undefined

默认情况下null和undefined是所有类型的子类型。就是说你可以把 null和undefined赋值给number类型的变量。

let u: undefined = undefined;
let n: null = null;

8.never

never类型表示的是那些永不存在的值的类型。例如， never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型；变量也可能是 never类型，当它们被永不为真的类型保护所约束时。

never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了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) {
    
    
    }
}

9.Object

object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。

使用object类型，就可以更好的表示像Object.create这样的API

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

10 数组类型

//可以在元素类型后面接上 []，表示由此类型元素组成的一个数组
let list1: number[] = [1, 2, 3]
//使用数组泛型，Array<元素类型>
let list2: Array<number> = [1, 2, 3]

11 元组 Tuple

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。比如，你可以定义一对值分别为 string和number类型的元组。

let x: [string, number];
x = ['hello', 10]; // OK
x = [10, 'hello']; // Error
console.log(x[0].substr(1)); // ello
console.log(x[1].substr(1)); // Error, 'number' does not have 'substr'

TypeScript常用数据类型

前言