看到之前vue3源码更新 90%以上使用typescript ，所以学习刻不容缓啦
typescript是javascript的超集，可以看下面这张图 解释了es5 es6 es7 ts的关系
image.png
typescript支持javascript的语法，同时还提供类型检查和更丰富的语法供开发者使用
一.类型
TS基础类型 vs JS基础类型
JS基础类型：6种
number string boolean symbol null undefined
JS引用数据类型
array, object function
TS基础类型：12种
boolean 最基本的数据类型就是简单的true/false值
let isDone: boolean = false;
number 和js一样所有的数字都是浮点数
除了支持十进制和十六进制字面量，TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。
let decLiteral: number = 6;
string字符串
let name: string = "bob"; // 默认值
name = "smith";
undefined 空值 某个变量值为空
let u: undefined = undefined;
null 空值 某个变量内存地址为空
let u: null= null;
void与any相反 代表一个值没有任何类型
any(不清楚变量的类型但又想为其指定类型)
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean
tuple元祖
元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同
// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error
never 表示的是那些永不存在的值的类型
never可以是任何类型的子类型 可以赋值给其他类型 ，但是其他类型不能赋值给never类型
enum 枚举
enum Color {Red,Blue,Green}; //默认从0开始
enum Color {Red=1,Blue,Green}; //指定开始位置
enum Color {Red=1,Blue=3,Green=5}; //都指定位置
let c:Color = Color.Blue; //返回对应的index
let colorName：string = Color[1] //返回对应的枚举项
array数组 引用类型
Object 对象 引用类型
类型断言
|| xxx as string
一个变量如果声明时使用了any类型 使用时需要像以上两种方式进行断言声明
变量预定义
color?: string;
width?: number;
enum枚举
二. 接口 interface
TypeScript的核心原则之一是对值所具有的结构进行类型检查 接口的作用类似于一个契约
readonly vs const
区别在于前者用于属性 后者用于变量
接口类型一 预定义类型
interface SquareConfig {
color?: string;
width?: number;
}
接口类型二 函数类型
定义一个这样类型的函数 形参是括号内的类型 返回的结果是布尔类型
interface SearchFunc {
(source: string, subString: string): boolean;
}
可索引类型
interface StringArray {
[index: number]: string;
}
let xxx:StringArray
xxx = ['222','2222222']
let a:string = xxx[0]