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

为什么是TyepScript

历史发展：
2016-05，TypeScript可开发React
2020-09，Vue发布了3.0版本，官方支持TypeScript

TS是静态类型语言、弱类型语言
静态类型：提前进行类型的匹配
动态类型：执行阶段确定类型的匹配，JS是动态类型
弱类型语言：隐式类型转换

静态类型的特点：

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

JS的超集

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

TypeScript入门

TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准（ES6 教程）。

TypeScript 由微软开发的自由和开源的编程语言。

TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

JS 是动态类型语言，在运行时检查报错；TS 是静态类型语言，在编译时检查报错

TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括：

类型批注和编译时类型检查
类型推断
类型擦除
接口
枚举
Mixin
泛型编程
名字空间
元组
Await

JavaScript 与 TypeScript 的区别

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

安装TypeScript

npm install typescript -g
npm install ts-node -g

安装 code runner 插件，右键运行

第一个 TS 应用

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

基础数据类型

JS 的基本数据类型

const a = 'hello'
const b = 1
const c = true
const d = null
const t = undefined

TS 的基本数据类型

const a: string = 'hello'
const b: number = 1
const c: boolean = true
const d: null = null
const t: undefined = undefined

对象类型

约束对象的属性

// 约束类型一般由 I 开头，用于和类区分
interface IObject {
  // 约束属性不可以在对象的初始化外赋值
  name: string;
  age: number;
  // 可选属性
  hobby?: string;
  // 任意类型属性
  sex: any;
}

初始化对象属性

const myObject: IObject = {
  name: 'guo',
  age: 19,
  hobby: 'code',
  sex: 'male'
}

函数

约束函数参数

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

函数重载

重载：函数名相同但参数类型不同，函数的返回值也不同

[ TypeScript 入门 | 青训营笔记 ]