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

Day9 TypeScript

What
Why
How

What

发展历史

推荐使用：VS Code

TS——非常有活力的新生框架

Why

JS：动态(不提前编译），弱类型语言

TS：静态（提前编译），弱类型语言（数字和字符串可以相加）

静态TS：可以增强语法的可读性，可维护性。在编译阶段可以找出大部分的错误，具有更好的稳定性和开发效率（多人合作）。TS兼容所有JS的特性，支持渐进式引入和升级。

How

基本语法

基础数据类型

对象数据类型

函数类型

方法1

function add(x:number,y:number):number{ // 规定函数的参数类型和返回值类型
  return x+y;
}

方法2


// 规定函数的参数类型和返回值类型
const mult:(x:number,y:number)=>number = (x,y) => x*y;

接口定义


interface IMult{  // TS同样支持接口定义函数
  (x:number,y:number):number;
}
const mult : IMult = (x,y) => x*y;

函数重载

interface IGetData{
  (type:'string',timestamp?:string):string;
  (type:'date',timestamp?:string):Date;
  (type:'string' | 'date',timestamp?:string):Date | string;    
}

const IGetData2:IGetData = (type,timestamp) =>{
  const date = new Date(timestamp);
  return type === 'string' ? data.toLocaleString(): date;
}

数组类型

TypeScript泛型

type IGetRepeatStringArr = <T extends string>(target:T) => T[];
const getStrArr : IGetRepeatStringArr = target => new Array(100).fill(target);
getStrArr(123); // 错误，类型number的参数不能给string类型

...
...
getRepaetArr('123') // 错误，类型string的参数不能给number类型

高级类型

联合/交叉类型

书本有：分类，时间，作者。

如果用传统接口写，要写两个接口（历史书/故事书），每个接口有三个属性，很麻烦

解决方法：联合交叉类型

type IBookList = Array<{ 
  author:string;  // 一个公共部分，联合
} & ({
      type:'history';
      range:string;
} | { // 两个不一样的属性，交叉
      type:'story';
      range:string;
})>

类型保护与类型守卫

两个类型完全没有任何相同点，则需要类型守卫。


// 实现函数reverse
function reverse(target:string | Array<any>){
  // typeof 保护类型
  if(typeof target === 'string'){
    return target.split('').reverse.join('');
  }
  // instanceof 保护类型
  if(target instanceof Object){
    return target.reverse();
  }
}

工程应用

浏览器Web（Webpack）
Nodejs

Web

环境配置

Nodejs

TSC工具提前编译

Day9 TypeScript入门 | 字节青训营