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

引言

这是我第一次在掘金做笔记，也是第一次使用 Markdown 语法来写，有很多挑战，在进阶班的压力也很大，不过提升也是，跟着训练营的节奏，我能学到很多东西，接下来在这一节课，我将讲述自己的学习过程，把TypeScriptd的入门知识记录一遍。

TypeScriptd的发展历史

·2012-10:微软发布了TypeScript第一个版本(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版本发布

什么是TypeScript

静态类型

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

JS的超集

• 包含于兼容所有JS特性，支持共存
• 支持渐进式引入与升级

基本语法

基础数据类型

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

对象类型

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:IBytedancer =
jobId:89757,
sex:'woman'
age:18,

函数类型

function add(x,y)
return x +y;
}
const mult (x,y)=>x y;

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

function add(x:number,y:number):number
return x y;
const mult:(x:number,y:number)=>number (x,y)=>x y;

函数重载

1206
/*对getDatel函数进行重载，timestamp为可缺省参数*/
function getDate(type:'string',timestamp?:string):string;
function getDate(type:'date',timestamp?:string):Date;
function getDate(type:'string''date',timestamp?:string):Date string
const date new Date(timestamp);
type ==='string'?date.toLocalestring():
}

const x getDate('date');/x:Date
const y getDate('string','2018-01-10');/y: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;

数组类型

/*「类型+方括号」表示*/
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 arr:3:IArr3=[1,2,'3','4'];
const arr4:IArr4 ['string',()=null,{}[]]

TypeScript补充类型

/*空类型，表示无赋值*/
type IEmptyFunction =()=void;
/*任意类型，是所有类型的子类型*/
type IAnyType any;
/*枚举类型：支持枚举值到枚举名的正、反向映射*/
enum EnumExample
add='+',
mult ='*'
EnumExample['add']==='+'
EnumExample['+'==='add';
enum ECorlor Mon,Tue,Wed,Thu,Fri,Sat,Sun }
ECorlor['Mon'==0;
ECorlor[0]=='Mon';
/*泛型*/
type INumArr Array<number>;

工程应用

webpack

1. 配置webapack loader相关配置
2. 配置tsconfig,js文件
3. 运行webpack启动/打包
4. loader处理ts文件时，会进行编译与类型检查

node

1. 安装Node与npm
2. 使用npm安装tsc
3. 配置tsconfig.js文件
4. 使用tsc运行编译得到js文件

结束语

学习一门新技术，需要了解其历史，将所学的知识进行实践，否则只能停留在认知阶段，却不能很好的应用，接下来得好好准备项目了。