typeScript学习轨迹（一）

看到之前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 对象 引用类型

类型断言

<string> || 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]