这是我参与「第四届青训营 」笔记创作活动的第10天
1.为什么是TypeScript
-
JS与TS
- JS：动态类型、弱类型语言
- TS：静态类型、弱类型语言
-
静态类型：
- 可读性增强：基于语法解析TSDoc，ide增强
- 可维护性增强：在编译阶段暴露大部分错误 => 多人合作的大型项目中，获得更好的稳定性和开发效率
-
JS的超集：
- 包含于兼容所有JS特性，支持共存
- 支持渐进式引入与升级
2.基本语法
2.1.基础数据类型
/*字符串*/
const q: string = 'string';
/*数字*/
const w: number = 1;
/*布尔值*/
const e: boolean = true;
/*null*/
const r: null = null;
/*undefined*/
const t: undefined = undefined;
- js包含的数据类型：Boolean、Number、String、Array、Function、Object、Symbol、undefined、null
- ts新增的数据类型：void、any、never、元组、枚举
2.2.对象类型
const dancer: dancer = {
id: 123445,
name: 'name',
sex: 'man',
age: 20,
hobby: 'swimming',
}
interface dancer {
/*只读属性：约束属性不可在对象初始化外复制*/
readonly id: number;
name: string;
sex: 'man' | 'woman' | 'other';
age: number;
/*可选属性，定义该属性可以不存在*/
hobby?: string;
/*任意属性：约束所有对象属性都必须是该属性的子类型*/
[key: string]: any;
}
/*报错，无法分配到id，因为它是只读属性*/
dancer.id = 12421
/*成功：任意属性标注下可以添加任意属性*/
dancer.plateform = 'data';
/*报错，缺少属性name，hobby可缺省*/
const dancer2: dancer = {
id: 243,
sex: 'woman',
age: 23,
}
2.3.函数类型
function add(x: number, y: number): number {
return x + y;
}
const mult: (x:number, y: number) => number = (x, y) => x*y;
2.4.函数重载
2.5.数组类型
/*类型+方括号 表示*/
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, {}, []];
