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]

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

typeScript学习轨迹（一）