这是我参与「第四届青训营 」笔记创作活动的第4天,以下是我对这堂课的一些记录。
什么是TypeScript?
TypeScript 是由微软开发的一款开源的编程语言,TypeScript 是 Javascript 的超集,遵循最新的 ES6、ES5 规范,TypeScript 扩展了 JavaScript 的语法。TypeScript 更像后端 Java、C#这样的面向对象语言,可以让 JavaScript 开发大型企业项目。谷歌也在大力支持 Typescript 的推广,谷歌的 angular2.x+ 就是基于 Typescript 语法,最新的 Vue 、React 也可以集成 TypeScript。Nodejs 框架中的 Nestjs、midway 中用的就是 TypeScript 语法,它支持与JS共存,它是静态类型的,它的可读性更强,可维护性更强,在多人合作的大型项目中,它有更好的稳定性和更能提高开发效率。
基本语法
基础数据类型
字符串:
const q: string = 'String';
数字:
const w:number = 1
布尔值:
const e:boolean = true;
null:
const r:null = null;
undefined:
const t:undefined = undefined;
对象类型
const bytedancer: IBytedancer = {
jobId: 12345,
name: 'liming',
sex: '男',
age: 45,
hobby: 'swimming',
}
interface IBytedancer {
readonly jobId :number; //只读属性:约束属性不可在对象初始化外赋值
name: string;
sex: '男' | '女';
age: number;
hobby?: string; //可选属性:定义该属性可以不存在
[key: string]: any; //任意属性:约束所有对象属性都必须是该属性的子属性
}
bytedancer.jobId = 123321; //报错:无法分配到“jobId”, 因为它是只读属性
bytedancer.plateform = 'data'; //成功:任意属性标注下可以添加任意属性
const bytedancer2: IBytedancer = {
jobId: 12345,
name: 'liming',
sex: '男',
} //报错:缺少属性"name",hobby可缺省
函数类型
const mult: (x: number, y: number) => number = (x, y) => x*y;
函数重载
function getDate(type: 'string', timestamp?: string): string;
interface IGetDate {
(type: 'string', timestamp?: string): string;
(type: 'date', timestamp?: string): Date;
(type: 'string'|'date', timestamp?: string): Date|string;
}
数组类型
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];
const arr1: IArr2 = [1,2,'3','4', {a:1}];
const arr1: IArr1 = [1,2,'3','4'];
const arr1: IArr1 = ['string', () => null, {}, []];
Typescript补充类型
type IEmptyFunction = () => void; //空类型,表示无赋值
type IAnyType = any; //任意类型,是所有类型的子类型
enum EnumExample {
add = '+',
numt = '*',
} //枚举类型:支持枚举值到枚举名的正、反映射
type INumArr = Array<number>; //泛型
字符串/数字 字面量
type IDomTag = 'html' | 'body' | 'div' | 'span'; //IDomTag必须为html, body, div, span中的其一
type IOddNumber = 1 | 2 |3 | 4; //IOddNumber必须为1,2,3,4中的其一
通过这节课,只是掌握了typescript的基础内容,剩下还有很多知识等待我去学习和挖掘,共勉!