这是我参与[第四届青训营]笔记创作活动的第九天。

01、什么是TypeScript

发展历史：

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:

静态类型(提前进行类型的检验/匹配)
弱类型语言

Javascript：

动态类型(在执行时进行类型的检验/匹配)
弱类型语言

静态类型：

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

JS的超集

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

02、基本语法

基础数据类型：

/字符串/

const q = 'string' ;

/数字/

const w = 1;

/布尔值/

const e = true;

/null/

const r = null;

/undefined/

const t = undefined;

对比：

/字符串/

const q: string = 'string ';

/数字/

const w: number = 1;

/布尔值/

const e: boolean = true; 0237

/null/

const r: null = null;

/undefined/

const t: undefined = undefined;

对象类型

函数类型

函数重载

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 arr3: IArr3 = [1，2,3'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>;

CC~@@HJ2(M$TGULMCAOVD7W.png

Typescript泛型

function getRepeatArr(target){
return new Array (100).fill(target);
type IGetRepeatArr = (target: any) >any[l;
/1*不预先指定具体的类型，而在使用的时候再指定类型的一种特性*/
type IGetRepeatArrR<T>(target: T)  T[];

/*泛型约束:限制泛型必须符合字符串*/
type IGetRepeatStringArr = <T extends string>(target: T) →> T[];
const getStrArr: IGetRepeatStringArr = target => new Array(100).fill(target);
/*报错:类型""number"的参数不能赋给类型"string"的参数*/
getStrArr(123);

/*泛型参数默认类型*/
type IGetRepeatArr<T = number> = (target: T)> T0];
const getRepeatArr: IGetRepeatArr = target => new Array(100).fill(target);
/*报错:类型"string"的参数不能赋给类型"number"的参数*/
getRepeatArr( '123');

类型别名&类型断言

/*通过type关键字定义了I0bjArr的别名类型*/
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>;
}

字符串/数字字面量

/*允许指定字符串/数字必须是固定值*/
/*IDomTag必须为html、body、div,span中的其一*/
type IDomTag = 'html' *body''div' 'span';
/* IOddNumber必须为1、3、5、7、9中的其一*/
type IOddNumber = 1 |3 |5 |7 | 9;

03、高级类型

联合/交叉类型

联合类型: IA【IB;联合类型表示一个值可以是几种类型之一
交叉类型: IA&B;多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性

类型保护与类型守卫

interface IA i a: 1,a1: 2 }
interface IB { b: 1，b1:2}

function log(arg: IA |IB){
/*报错:类型“IA| IB"上不存在属性"a”。类型“IB”上不存在属性"a”。*/
/*结论:访问联合类型时，处于程序安全，仅能访问联合类型中的交集部分*/
if (arg.a) {
console.log(arg.a1)else很

console.log(arg.b1);
}

interface IA i a: 1,a1: 2 }
interface IB { b: 1,b1:2}

/类型守卫:定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域*/
function getIsIA(arg: IA |IB): arg is IA{
return !!(arg as IA).a;
}
function lo02(ara: TA I T. rC0237

if (getIsIA(arg)) {
console.log(arg.a1)
}else {
console.log(arg.b1);
}

函数返回值类型

//实现函数delayCall的类型声明
//delayCall接受一个函数作为入参;其实现延迟1s运行函数
//其返回promise，结果为入参函数的返回结果

function delayCall(func) {
return new Promise( resolve > i
setTimeout(()→>{
constresult = func();resolve( result);
, 1000);
});
}

04、工程应用

Typescripe工程应用-web

1.配置webapack loader相关配置

2．配置tsconfig.Js文件

3.运行webpack启动/打包

loader处理ts文件时，会进行编译与类型检查

相关loader

1.awesome-typescript-loader

2.babel-loader

Typescripe工程应用-Node

01、使用TSC编译

1.安装Node与npm

2、配置tsconfig.js文件

3.使用npm安装tsc

4．使用tsc运行编译得到js文件

Typescript入门|青训营笔记