TypeScript入门|青训营笔记

74 阅读1分钟

这是我参与「第四届青训营 」笔记创作活动的的第4天,该篇笔记记录了关于TypeScript的相关内容

什么是TypeScript?

与js相比,js是动态类型,是脚本语言;ts是静态类型

静态类型

  • 可读性增强:基于语法解析TSDoc,ide增强
  • 可维护性增强:在编译阶段暴露出大部分错误 (稳定性,开发效率

JS的超集

  • 包含于兼容所有JS特性,支持共存
  • 支持渐进式引入与升级

基本语法

数据类型 在之后加:类型

字符串:const q:string = 'string';
数字:const w:number = 1;
布尔:const e:boolean = true;等等

对象类型

f642352439453d090b2ae7c9628e069.png

449ca42cf2372d3e2296cfa3d8682f5.png

函数类型

声明类型方式:

  • 直接在函数上进行类型补充
  • 给函数变量赋值函数类型声明

function add(x,y){ return x +y; }

const mult = (x,y) => x*y;

function add(x:number,y:number): number{ return x+y;}

const mult:(x:number,y:number)=> number = (x,y) =>x *y;

太麻烦可以:

interface IMult{

(x:number,y:number):number;

}

const mult:IMult = (x,y) => x*y;

数组类型

image.png

补充类型

空类型

type IEmptyFunction = () => void;

任意类型

type IAnyType = any;

枚举

enum EnumExample{
add = '+',
mult = '*',
}

泛型

image.png

image.png

可指定字符串/数字必须的固定值

type IDomTag = 'html'|'css';

IDomNumber必须为1,2中之一

type IDomNumber = 1 | 2 ;

高级类型

联合/交叉类型

联合类型: A|B 一个值可以是几种类型之一

交叉类型: A&B 多种类型叠加

eg.举例书籍

type IBookList = Array<{

author:string;

} & ({

type:'history';

range: string;

} | {

type: 'story';

theme: string;

})>

类型保护 类型守卫

image.png

image.png