typescript前端_typescript有必要学吗

一、ts的基本了解

1、ts（Typescript简称）是js的发展方向，对变量的类型进行严格限制，使前端变成了强语言类型。React、Vue也会加入TS的阵营。

2、ts的使用需要安装：npm/cnpm install -g typescript

3、ts的运行：

（1）、新建ts文件index.ts

  (2)、ts语法在浏览器上无法运行，所以需要使用如下命令 : tsc index.ts (缺点：每次更新，都需要重新编译） 编译成js

  (3)、初始化文件夹和自动监测,执行如下命令： tsc –init（生成对应得 tsconfig.json文件）

（4）、自动监测同步 JS 文件,执行如下命令： tsc -w（监测将ts文件编译成js文件）

二、ts的数据类型（let 变量名称：ts数据类型=对应的ts数据类型）

1、boolean类型

前面是变量名称，后面是变量类型。布尔型是最简单的数据类型，它的值就是 true / false 值。

 let a:boolean= false;

2、number类型

支持二进制、八进制和十进制及十六进制

3、string类型

let str:string = “过年好”;

4、undefined/null

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

5、void类型

表示没有任何类型，常用于函数没有返回值

function say(): void {

    console.log(“Girl you’re perfect!”);
}

6、any类型

表示任意类型,后面赋值任意类型都可以

let a: any = {}

7、unknown类型

是 any 类型对应的安全类型，定义时比 any 类型更加严格，执行操作之前，必须进行某种形式的检查

let u1: unknown = 100
u1 = ‘圣诞节快乐’
u1 = true

8、never类型

是其它类型的子类型，代表从不会出现的值，never 变量只能被 never 类型所赋值，函数中它表现为抛出异常或无法执行到终止点

情形1
function loop(): never {

    while (true) { }
}
 情形2
function error(m: string): never {

    throw new Error(m)
}

9、数组类型

第一种申明数组的方式

let h: number[] = [100, 0]    ==>表示数组里面只能存放数值类型

let i: any[] = [100, true, {}, []]    ==>表示数组里面能存放任何类型的数据

第二种申明数组的方式

let j: Array<any> = [100, true, {}, []]    ==>表示数组里面能存放任何类型的数据

10、元数组类型(特殊的数组类型)

let k: [number, boolean, string] = [100, false, ”]

11、object 对象数据类型

let obj: object = {

    film: “恋恋笔记本”

}

12、枚举类型  ==>列出一个可选的范围，取值只能从这个类型中取一个

enum Sex {

    male = ‘男’,

    female = ‘女’,

}

let boy: Sex = Sex.male

let girl:Sex=Sex.female

【注1：

1.数字型枚举：当该枚举类型是数字型枚举时，那么存在反向映射 及 key和value 反过来了

enum direction {

    up = 10,

    dowm = 11

}

console.log(‘数字型枚举’,direction);

2.字符型枚举

enum dir {

    up = ‘向上’,

    down = ‘向下’

}

3.异构型枚举：枚举的成员的类型不是同一种类型 不常见

enum status1 {

    success = “ok”,

    code = 500

}

4.常量型枚举：其成员值只能是常量 不能使用变量

let type4 = 2

const enum herotype {

    type1 = 0,

    type2 = 1,

    // type3 = type4,  报错,不能使用变量

    type3 = 2

}

】

【注2：

枚举的合并：同名枚举会自动合并

enum typeHero {

    type1 = ‘刺客’,

    type2 = ‘法师’,

}

enum typeHero {

    type3 = ‘战士’,

    type4 = ‘辅助’,

}

】

13、多个类型

let m: string | number = ”

今天的文章typescript前端_typescript有必要学吗分享到此就结束了，感谢您的阅读。