这是我参与「第五届青训营 」伴学笔记创作活动的第5天
今天跟着字节的课程学习了TypeScript的基础内容
一、本堂课重点内容：
提示:有Java基础或后端基础的同学使用TS能更快上手
1.TS的发展史
- 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 版本，官方支持 TypeScript2021-11: v4.5版本发布
- 2021-11: v4.5版本发布
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”
不能将类型“stringDate”分配给类型“string”。
不能将类型“Date”分配给类型“string”。ts(2322) */
const getDate2: IGetDate = (type,timestamp) => {
const date = new Date(timestamp);
return type === 'string' ? date.toLocaleString() : date;
}
4.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>;
5.泛型
6.类型别名&类型断言
/* 通过type关键字定义了IObjArr的别名类型 */
type IObjArr = Array<{
key: string;
[objKey: string]: any;
}>
function keyBy<T extends IObjArr>(objArr: Array<T>) {
/* 未指定类型时，result类型为 {} */
const result = objArr.reduce((res, val, key) => {
res[key] = val;
return res;
},{});
/* 通过as关键字，断言result类型为正确类型 */
return result as Record<string，T>;
}
7.高级类型
1.联合类型/交叉类型
二、课后个人总结：
TypeScript，简称 ts，是微软开发的一种静态的编程语言，它是 JavaScript 的超集。 对TS的个人理解：
- js 有的 ts 都有，所有js 代码都可以在 ts 里面运行。
- ts 支持类型支持，ts = type +JavaScript。
三、首次使用TS
1.下载一个全局的包
npm i -g typescript
或者
yarn global add typescript
2.打开 vscode， 新建一个 .ts文件。如 hello.ts
接下来书写 ts 的代码
新建文件，如 hello.ts。（ts文件的后缀名都是 .ts）书写代码
编译代码：在终端输入 tsc ./hello.ts, 会自动生成一个js 文件，接下来就可以用 node 命名来运行js 的文件
