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

一、本堂课的重点内容

二、知识点介绍

1、什么是TypeScript?

我在百度上找了这么一段话： TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。

2、JS是动态类型，弱类型语言，TS是静态类型，弱类型语言

动态类型在运行时，解释器基于变量值的类型决定变量的类型
静态类型在编译时，编译器基于所声明的数据类型确定变量的类型
本质区别在于变量的数据类型确定的时机不同

引用Dynamic programming language（动态编程语言） - 术语表 | MDN (mozilla.org)

动态编程语言是指可在运行阶段时执行那些在编译阶段执行的操作的编程语言。比如，在 JavaScript 中， 我们可以在程序运行时改变变量的类型，或者为一个对象增加一个新属性或者方法。

这正好与静态编程语言相反，在静态编程语言的运行阶段，一般是无法执行这些改变的。

静态类型：可读性增强，可维护性增强，多人合作的大型项目中，获得更好的稳定性和开发效率。

2、基本语法

2.1 基础数据类型

const q=string;
const w=1;
const e=true;
const r=null;
const t=undefined

改写成TypeScript

const q: string='string';
const w: number=1;
const e: boolean=true;
const r: null=null;
const t: undefined=undefined;

const bytedancer: IBytedancer = { 
jobId:9303245，
name: 'Lin', 
sex:'man', 
age:28,
hobby: 'swimming', 
}
interface IBytedancer { 
/* 只读属性:约束属性不可在对象初始化外赋值 */ 
readonly jobid: number;
name:string; 
sex:'man'| 'woman’l 'other'; 
age: number; 
/* 可选属性:定义该属性可以不存在 */
hobby?: string; 
/* 任意属性:约束所有对象属性都必须是该属性的子类型*/
[key: string]:any;
}
/* 报错:无法分配到"jobId"，因为它是只读属性 */
bytedancer.jobId =12345; 
/* 成功:任意属性标注下可以添加任意属性 */
bytedancer.plateform='data'; 
/* 报错:缺少属性"name"，hobby可缺省 */
const bytedancer2: IBytedancer = { 
jobId:89757，
sex:'woman',
age:18,
}

2.2 函数类型

interface IMult{
    (x:number,y:number):number;
    }
    
const mult:IMult=(x,y)=>x*y;

2.3 函数重载

/*对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”。ts(2322)*/ 
const getDate2: IGetDate =(type, timestamp)=> {
const date=new Date(timestamp);
return type === 'string’? date.toLocaleString(): date;

2.4 数组类型

/*「类型+方括号」表示 */
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, {}，[]];

2.5 字符串/数字 字面量

/* 允许指定字符串/数字必须的固定值 */

/*IDomTag必须为html、body、div、span中的其一 */
type IDomTag = 'html' | 'body' | 'div’! 'span';
/*I0ddNumber必须为1、3、5、7、9中的其一 */
type IOddNumber = 1 | 3 | 5 | 7 | 9;