这是我参与「第五届青训营」伴学笔记创作活动的第4天,在学习完了前端三件套以后，又开始学习了一门新的语言，即TypeScript。TypeScript 是 JavaScript 的语法超集，它添加了静态类型，近几年的发展中，也受到诸多开发者的喜爱。下面是对老师上课内容的记录和自己搜集资料的补充。

TypeScript和JavaScript的区别

TypeScript是静态类型，同时增加了类型注解，JavaScript是动态类型。静态类型是在编译的时候进行类型检查，动态类型是在运行时进行类型判断。根据使用者的反馈，相对于JavaScript，Typescript遇到的bug显著减少，应用更可控查文档也更加方便。而如果会JavaScript，那么上手TypeScript也会更加方便，只需要增加声明。

const hello: string = "Hello World!";
console.log(hello);

写的时候需要加上类型批注，比如说这里就指明了hello是String类型。

常用类型

基础数据类型

let str: string = 'hello typescript';
let num: number = 100;
let bool: boolean = true;
let r:null=null;
let t:undefined = undefined

2.对象类型对于参数类型注释是对象类型的, 对象中属性的分割可以用 分号; 或者 逗号,

function printCoord(pt: {x: number; y: number}) {
	console.log("x值是: " + pt.x)
    console.log("y值是: " + pt.y)
}
 
printCoord({x: 3, y: 7})

function printCoord(pt: {x: number, y: number}) {
	console.log("x值是: " + pt.x)
    console.log("y值是: " + pt.y)
}
 
printCoord({x: 3, y: 7})

3.函数类型

function add(x:number,y:number):number{
return x+y;
}
const mult:(x:number,y:number)=>number=(x,y)=>x*y;

4.函数重载

这一部分不是很了解，搜索学习得知TypeScript 重载的过程是，拿传入的参数和重载的方法签名列表中由上往下逐个匹配，直到找到一个完全匹配的函数签名，否则报错。所以推荐的做法是将签名更加具体的重载放上面，不那么具体的放后面。

5.数组类型

type arr1=number[];[类型＋方括号]表示

type arr2=Array<string|number|Record<string,number>>;泛型表示

type arr3=[number,number,string,string];元组表示

学习TypeScript | 青训营笔记

TypeScript和JavaScript的区别

常用类型