TypeScript入门 | 青训营笔记
这是我参与【第四届青训营】笔记创作活动的第7天
一、关于TypeScript
TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准，由微软开发的自由和开源的编程语言，它的设计目标是开发大型应用，可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。
发展历史
- 2012-10
微软发布第一个版本（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版本发布
JS与TS的区别
JS：
动态类型,弱类型语言
TS：
静态类型
可读性增强：基于语法解析TSDoc，ide增强
可维护性增强：在编译阶段暴露大部分错误
大型项目中获得更好的稳定性和开发效率
JS的超集
- 包含于兼容所有JS特性，支持共存
- 支持渐进式引入与升级
弱类型语言
二、基本语法
基础数据类型
定义变量时可以选择声明或不声明数据类型
对象类型
const bytedancer: IBytedancer = {
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: TBytedancer = {
jobId: 89757,
sex: 'woman',
age: 18,
}
函数类型
function add(x,y){
return x + y;
}
const mult = (x,y) => x * y;
function add(x: number,y: number){
return x + y;
}
const mult: (x: number,y: number) => number = (x,y) => x * y;
interface IMult {
(x: number,y: number);number;
}
const mult:IMult = (x,y) => x * y;
数组类型
/* [类型 + 方括号] 表示 */
type IArr1 = number[];
/* 泛型表示 */
type IArr2 = Array<string | number | Record<string,number>>;
/* 元组表示 */
type IArr3 = [number, number, string, string];
/* 接口表示 */
interface IArr4 {
[key: number]: any;
}
const arr1: IArr1 = [1, 2, 3, 4, 5, 6];
const arr2: IArr2 = [1, 2, '3', '4', {a: 1}];
const arr3: IArr3 = [1, 2, '3', '4'];
const arr4: IArr4 = ['string',() => null, {}, []];
三、工程应用
浏览器Web
webpack
1.配置webapack loader相关配置
2.配置tsconfig.js文件
3.运行webpack启动/打包
4.loader处理ts文件时，会进行编译与类型检查
Node
使用TSC编译
1.安装Node与npm
2.配置tsconfig.js文件
3.使用npm安装tsc
4.使用tsc运行编译得到js文件
四、小结
对于熟悉Java后端开发的同学来说，TypeScript有一丝熟悉，包含了接口、类、继承、枚举、泛型等多种语法，让不懂JS的同学也能够快速上手。
