TypeScript（一）

概念

ts在js能执行的地方都能执行，但不能被js解析器直接执行，必须要编译转换后才能执行

ts需要通过编译转换成js再交给浏览器执行

创建ts文件

数据类型

基础数据类型： number 、 string 、 boolean 、 null 、 undefined 、 symbol
对象类型：对象、数组、类、函数

变量

变量设置了类型 就不能赋值其他类型的值，否则报错

声明一个变量a，并指定其类型为number

注：
给指定类型的变量赋值其他类型的值后，编译会报错
编译ts也会报错
编译tsc
但也能编译通过，因为不违反js语法
以后可以通过编译工具的配置，来配置成有错误就编译不通过

注：
上方编译有地方写错，tsc编译的应该是.ts文件
上面写的是.js文件
需要改为02_basic.ts
ts可以编译成任意版本的js，对兼容好，默认编译成es3
要编译成es6可以通过配置修改

ts变量默认第一次赋值的类型为固定类型
所以let 变量名：类型=值 这种写法不常用

js不同类型相加


ts方法的参数声明类型

这样再声明一个变量 接收这个函数 类型就会默认成为number

注：
冒号后声明的类型一定是小写，大写的话意思就变了

ts类型 及 示例：

或符号

｜或符号，只能或的值中选择赋值，其他的值就会报错

｜或符号 也可以 声明多个类型，以｜号隔开

类型

都是类型的，叫联合类型
都是值的 也叫做字面量
都是值的，限量在某几个值之间

any

类型any可以任意赋值
相当于关闭了ts的类型检测

使用ts时不建议使用any，因为和js没区别

隐式any

直接 声明变量 ，但不赋值，默认类型为any，这种叫 隐式 的any

unknown

unknown 表示未知类型
也都可以给 unkown类型的变量 赋值任意类型

与any的区别：
给any类型的变量赋值其他类型的值都不会报错
可以给any类型的变量赋值任意类型的值
就算赋值其他类型的变量也不会报错

unknown的类型变量不能赋值给其他类型的变量，因为类型不同
赋值看的不是值，是类型




注：
unknown实际上是一个类型安全的any
unknown类型的变量无法复制给其他类型的变量
如果一定要赋值给unknown类型的变量
就一定要写一个类型的判断

类型断言（as）

告诉解析器变量的实际类型

另一种写法：
变量=尖括号 类型 尖括号 变量名
变量= <类型 > 变量名

ts会自动识别类型

void

方法返回一个空 void
设置为void，那除了返回null，返回其他任意值都会报错
设置成viod，其实就是没有返回值

never

设置成never，表示永远都没有返回值，连空，null，undefibd都没有

永远都不会返回一个结果，所以一般用来做报错

设置对象的属性和值的类型

设置一个变量b，b必须是一个对象，对象中还必须有一个string类型的name属性

属性的值也是string类型：

object

：object一般不用
因为万物皆对象，范围太宽泛，限制太小，一般都用上图的写法

？类型

属性名 前 加 问号 表示 该属性是可选的，可设可不设

注：
声明对象内只写了一个属性，那实际上被赋值的对象就只能有一个属性，多设会报错

设置对象中可添加任意个数，任意类型的属性

使用[ propName:string]:any

设置变量为 箭头函数 的写法

设置 d为函数，有两个参数a和b，类型均为number，函数返回值为number

数组

数字类型的数组，另一种写法：

数组的两种声明方式：
类型[]
Array<类型>
所有类型的数组Array

元组：

固定长度的数组

优点：
和数组相比，存储效率更好一点，因为长度是固定的

枚举（enum）

使用枚举我们可以定义一些带名字的常量。 使用枚举可以清晰地表达意图或创建一组有区别的用例。 TypeScript支持数字的和基于字符串的枚举。枚举使用 enum 关键字来定义。

JavaScript中是没有枚举类型的，除了JavaScript以外的语言都有enum这个关键词


打印结果为true

枚举中的值，例如上方male的值0，都是枚举自动分配的，也可手动设置

数字枚举自增例子：
例1

enum Direction {
    Up, // 0
    Down,// 1
    Left,// 2
    Right// 3
}

例2

enum Direction {
    Up = 1,// 1
    Down,// 2
    Left,// 3
    Right// 4
}

例3

//从设置值的数字开始自增
enum Direction {
    Up,// 0
    Down=3,// 3
    Left,// 4
    Right// 5
}

例4

enum Days {Sun = 3, Mon = 1, Tue, Wed, Thu, Fri, Sat};
 
console.log(Days["Sun"] === 3); // true
console.log(Days["Wed"] === 3); // true
console.log(Days[3] === "Sun"); // false
console.log(Days[3] === "Wed"); // true

以上四个例子我们可以看出
数字枚举如果没有初始化，默认初始化值为0，每项+1
如果有初始化，则在初始化值的基础上，每项+1
如果某项被赋值（可以是负数或负数），那么之后的项在此基础上+1
如果未手动赋值的枚举项与手动赋值的重复了，如例4，TypeScript 是不会察觉到这一点的，但建议尽量避免

注：
枚举中的成员只能访问，不能赋值
枚举成员为数字类型的，称为数字枚举，成员是有值的，默认从0开始自增
枚举成员为字符串的称为字符串枚举，字符串枚举没有自增长的值，所以必须有初始值

反向映射
除了创建一个以属性名做为对象成员的对象之外，数字枚举成员（字符串枚举成员没有反向映射）还具有了 反向映射，从枚举值到枚举名字

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
 
console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true
 
console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true

&

&表示同时

错误写法

正确写法：
必须在**{}中**写属性：类型

表示对象中必须同时有strring类型的name和number类型的age

类型的别名

给string起别名

给多个选项值起别名