这是我参与「第五届青训营」伴学笔记创作活动的第 5 天

TypeScript

本篇主要介绍TypeScript的优势，语法，包括基础数据类型和高级数据类型。

基本介绍

TypeScript 是 JavaScript 的语法超集，它添加了静态类型。TypeScript和JavaScript对比，TypeScript是静态类型的弱类型语言，JS是动态类型的弱类型语言。弱类型语言的特征是类型转换，例如字符串和数字可以相加。静态类型是指变量的变量类型在编译的时候确定，动态类型是指变量的变量类型在运行的时候确定，例如：JS，Python。

TypeScript的优势

静态类型

可读性增强:基于语法解析TSDoc，ide增强
可维护性增强:在编译阶段暴露大部分错误(包括语法错误，类型的匹配错误)=>多人合作的大型项目中，获得更好的稳定性和开发效率

是JS的超集

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

TypeScript的常用编译器可以选择：Visual Studio Code或者是TypeScript的官网的在线编译器

基本语法

基础数据类型
在变量后使用冒号再加类型

/*字符串*/
const q:string='string'
/*数字*/
const w:number=1;
/*布尔值*/
const e:boolean=true;
/*null*/
const r:null=null;
/* undefined*/
const t:undefined=undefined;

对象数据类型
默认用大写I开头

interface IBytedancer{
/* 只读属性：约束属性不可在对象初始化外赋值 */
readonly jobId:number;
name: string;
sex: 'man'|'woman'|'other';
age:number;
/*可选属性：定义该属性可以不存在 */
hobby?:string;
/* 任意属性：约束所有的对象属性都必须是该属性的子类型 */
[key:string]:any;
}

函数类型
用interface接口类型，赋值给变量

interface IMult{
（x:number,y:number):number:
}
const mult:IMult(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;

数组类型

/* 类型+方括号 表示*/
type IArr1=number[];
/* 泛型表示 */
type IArr2= Array<string |number |Record<string,number>>;
/* 元组表示,直接表示数组中的每一项是什么 */
type IArr3=[number,number,string,string];
/* 接口表示 any可以是任意的类型*/
interface IArr4{
[key:number]:any;
}

const arr1:IArr1=[1,2,3,4,5,6];
const arr2:IArr2=[1,2,'3','4',{a:1}];
const arr3:IArr3=[1,2,'3','4'];
const arr4:IArr4=['string',()=>null,{},[]];

TypeScript泛型
泛型可以理解成一种变量指代

/* 不预先制定具体的类型，而在使用的时候再指定类型的一种特性 */
type IGetRepeatArrR=<T>(target:T)=>T[];

/* 泛型约束：限制泛型必须符合字符串 */
type IGetRepeatStringArr=<T extends string>(target:T)=>T[];
const getStrArr:IGetRepeatStringArr=target=>new Arrat(100).fill(target);

/* 泛型参数默认类型 */
type IGetRepeatArr=<T = number>(target:T)=>T[];  //如果指定的的话，默认类型是number
const getRepeatArr:IGetRepeatArr=target => new Array(100).fill(target);

字符串/数字字面量

/*允许指定字符串/数字必须为固定值 */

/* IDomTag 必须为html,body,div,span中的其中一个 */
type IDomTag='html'|'body'|'div'|'span';
/* IOddNumber必须为1，3，5，7，9中的一个 */
type IOddNumber=1|3|5|7|9;

高级数据类型

联合/交叉类型

联合类型:IA|IB;联合类型表示一个值可以是几种类型之一
交叉类型：IA&IB；多种类型叠加到一起称为一种类型，它包含了所需的所有类型的特性

可以把公共的属性定义为公共的对象。
当访问联合类型的时候，处于程序安全，仅能访问联合类型中的交集部分。可以通过类型守卫，定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域。当两个类型完全没有任何重合点的时候可以写一个类型守卫。

个人总结

这节课讲了很多关于TypeScript的基本语法中的数据类型，包括基础的数据类型和高级数据类型，让我了解了基本的定义和使用

TypeScript|青训营笔记

TypeScript

基本介绍

基本语法

高级数据类型

个人总结