这是我参与 ⌈ 第五届青训营 ⌋ 伴学笔记创作活动的第三天

TypeScript发展历史

• 2012-10:微软发布了TypeScript第一个版本（0.8）
• 2014-10：Angular发布了基于TypeScript的2.0版本
• 2015-04：微软发布了Visual Studio Code
• 2016-05：@types/react发布，TypeScript可开发React
• 2020-09：Vue发布了3.0版本，官方支持TypeScript
• 2021-11:V4-5版本发布

为什么是TypeScript

JS：

是动态类型、弱类型语言

TS：

是静态类型、弱类型语言

静态类型

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

JS的超集

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

基本语法

基础数据类型

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

=

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

对象类型

const bytedancer: IBtedancer = {
jobId: 9303245,
name:'Lin',
sex:'man',
age:28,
hobby:'swimming',
}

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

/*报错： 无法分配到"jobId"，因为它只读属性*/
bytedancer。jobId = 12345；
/*成功： 任意属性标注下可以添加任意属性*/
bytedancer.plateform = 'data';
/*报错： 缺少属性"name"，hobby可缺省*/
const bytedancer2: IBytedancer = {
jibId: 89757,
sex: 'woman',
age: 18,
}

函数类型

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

总结

TypeScript与js相比的优势

• TypeScript工具使重构更变的容易、快捷
• TypeScript引入了JavaScript中没有的“类”概念
• TypeScript中引入了模块的概念，可以把声明、数据、函数和类封装在模块中
• 类型安全功能功能在编码期间检测错误，这为开发人员创建了一个更高的编码和调试过程。

接口： 子啊面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用

使用interface关键字定义接口一般首字母大写，有的编程语言中会建议接口的名称加上I前缀

可选属性：可选属性的含义是该属性可以不存在，有时候不要完全匹配一个接口，那么可以用可选属性。