了解TypeScript ｜ 青训营笔记

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

TypeScript的特点

和JavaScript相比，TypeScript 同为弱类型语言，但是JavaScript为动态类型语言，TypeScript为静态类型语言。那么TypeScript的语言特点有：

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

TypeScript基本数据类型

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

string 和JavaScript相比,TypeScript在对象名后添加了：数据类型。如上方代码块所示，string(字符串)，number(数字)，boolean(布尔值)……

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

在上述接口中可以看出，在对象名前加上readonly，则该对象无法在初始化以外被赋值；在对象名后加上?，则该对象可在初始化是缺省或者初始化；在对象名两侧用[ ]框柱后，则该对象后可以添加任意属性。

const bytedancer: IBytedancer = {
jobId: 123456,
age: 18
}

初始化bytedancer，定义jobId具有只读属性，让hobby缺省，age为任意属性。 此时再进行如下赋值：

bytedancer.jobId = 7890;

会报错，因为只读属性。

bytedancer.hobby = “sing”;

可以定义可选属性。

TypeScript函数重载

/*对getDate函数进行重载，timestamp为可缺省参数*/
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: any,timestamp: any) => string | Date"分配给类型"IGetDate"。
不能将类型"string | Date"分配给类型“string”。不
能将类型"“Date”分配给类型“string"。
下方报错*/
const getDate2: IGetDate = (type, .timestamp)=> {const date = new Date(timestamp);
return type = = 'string' ? date.toLocaleString( ) : date;
}