TypeScript基础知识

TypeScript基础知识 一、什么是TypeScript？有哪些特点？怎么下载TypeScript?二、语法三、类型推断&类型注解&类型断言 as3-1类型推断3-2类型注解3-3. 类型断言 as 四、TypeScript基本数据类型有哪些？4-1 基础数据类型任意类型:any;空值或者undefined:void(通常函数没有返回值使用);4-2 数组&元祖&&枚举&&联合数据类型 五、TypeScript高级数据类型有哪些？5-1 函数 function1.直接在参数上定义函数类型；2.使用interface去定义函数类型3.使用type定义函数类型 5-2 接口 interface：都是抽象的结构 用implement实现5-3 泛型：5-4 类

一、什么是TypeScript？有哪些特点？怎么下载TypeScript?

TypeScript 是 JavaScript 的类型的超集，支持ES6语法，支持面向对象编程的概念，如类、接口、继承、泛型等。

安全兼容JavaScript，是JavaScript的超集；引入类型系统，可以尽早定位错误位置，帮助提升开发效率；先进的JavaScript，支持JavaScript的最新特性；TypeScript在社区的流行度越来越高，他非常适用于一些大型项目，也非常适用于一些基础库，极大地帮助我们提升了开发效率和体验。 npm i -g typescript tsc -v 二、语法

TypeScript 的语言由语法、关键字、类型注释组成。 语法：

let 变量：类型； let 变量：类型 = 值； function fn(参数：类型，参数：类型)：类型 { }

变量命名规则 ★变量名称必须是字母或数字。 ★不能以数字开头名称。 除下划线（_）和美元（$）符号外，它不能包含空格和特殊字符。

三、类型推断&类型注解&类型断言 as 3-1类型推断 let str ="abc"; str=10;// ts报错，原因ts推断str的变量为string类型，不能赋值为number 3-2类型注解 let str:string ="abc"; 3-3. 类型断言 as let arr1:number[]=[1,2,3]; const result = arr1.find(item=>item>2) as number; console.log(result*5); 四、TypeScript基本数据类型有哪些？ 4-1 基础数据类型 let v1:boolean=true; let v2:number=10; let v3:string='abc'; let nu:null=null; let un:undefined=undefined; 任意类型:any; 空值或者undefined:void(通常函数没有返回值使用); 4-2 数组&元祖&&枚举&&联合数据类型 // 数组 let numArr:number[]=[1,2,3]; let numArr2:Array<number>=[1,2,3]; // 元祖:就是指定个数和类型的数组 let person:[string,number,number?]=['Tom',12,9000]; let person2:[string,number,number?]=['Tom',12]; // 枚举 enum Color { Red, Green, Blue, } let c: Color = Color.Green; // 联合数据类型 let v4:string|null=null; let v5:1|2|3=3; 五、TypeScript高级数据类型有哪些？ 5-1 函数 function 如果函数的没有写 return 的话，它的返回值类型就是 void;函数的约束有参数约束和函数返回值约束;参数可以设置默认值，可选，可变参，可选的放在右边，可变剩余参放在最后; 1.直接在参数上定义函数类型； function demo(b:number,a=10,c?:number,...rest:number[]):number{ return b*a; } demo(2) 2.使用interface去定义函数类型 interface AddFn{ (a:number,b:number):number } let fn1:AddFn=(a,b){ return a+b; } fn1(2,1) 3.使用type定义函数类型 type AddFn = (a:number,b:number)=>number; let fn2:AddFn=(a,b)=>a+b; fn2(1,2) 5-2 接口 interface：都是抽象的结构 用implement实现

更加详细的TS接口知识点击这里

用于定义对象类型

key后面加？表示可选属性；key前面加readonly,表示只读。 interface Course{ readonly name:string, price:number, isOnLine:boolean, students:string[], } let obj1:Course={ name:"Vue3", price:100, isOnLine:true, students:['John','Mary'] } 5-3 泛型：

泛型也是一种类型，不同于string，number等具体的类型，它是一种抽象的类型，我们不能直接定义一个变量类型为泛型。 使用场景：我们在定义的时候不具体指定类型，而是泛泛地说一种类型，并在函数调用的时候再指定具体的参数类型。 约定俗称，泛型用T,K字母表示。

定义一个函数，他的作用就是返回传入对象中的某个值。 参数1：传入的对象；参数2：传入的key 问题：此时，函数的类型是取决于对象的属性值的类型，不是唯一固定的。所以使用泛型。

function myFn<T>(a:T,b:T):T[]{ return [a,b] } myFn<number>(1,2); myFn('a','b');//这里ts类型推断T表示string类型

关于泛型的详细信息，点击这里进行了解

5-4 类

先来简单了解一下ES6中的类 类可以理解为对象的类型，不同的类可以用来创建不同的对象。 TS中的类