浙江省住房建设厅网站首页优化网络培训

一、什么是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中的类