TypeScript

一、TypeScript 概述（JavaScript的超集、扩展集）

image.png

• 任何一种JavaScript运行环境都支持
• 功能更为强大，生态更为健全，更完善
• Angular 、Vue3.0 使用TypeScript取代flow
• 前端领域中的第二语言
• 缺点：本身多了很多概念，项目初期，TypeScript会增加一些成本
• 好处：属于【渐进式】

二、TypeScript 快速上手

• 安装yarn

npm install -g yarn

• 查看yarn版本

yarn -v

• 初始化package.json文件，用来管理依赖项

npm init -y

• 安装 typescript

yarn add typescript --dev

• 运行会生成对应的js
  会自动去除：number类型限制和编译成对应的js

yarn tsc .\01-getting-started.ts

三、TypeScript 配置文件

• 使用命令yarn tsc --init自动生成tsconfig.json的配置文件文件

yarn tsc --init

配置部分tsconfig.json文件

image.png

• 终端运行 tsc,会将src下的文件编译输出到dist目录下

四、TypeScript 原始类型

/**
 * 在非严格模式（strictNullChecks）下
 * string,number,boolean都可以为空
 * const d:string =null
 * const d:number = null
 * const d:boolean = null
 *  */ 
const d: null = null;
const e: void = undefined;
const f: undefined = undefined;

/**
 * Symbol是ES2015标准中定义的成员
 * 使用它的前提必须确保有对应的ES2015库的引用
 * 也就是 tsconfig.json中的lib选项必须包含ES2015
 */
const h: symbol = Symbol();

五、TypeScript 标准库声明

• 标准库就是内置对象所对应的声明
  当tsconfig.json中target为“es5”时，const h: symbol = Symbol();会报错，因为es5标准中没有Symbol，解决方法，在tsconfig.json中的lib添加["ES2015"],同理console.log在浏览器当中是BOM所提供的，而在TypeScript中把BOM 和DOM都归结到DOM一个标准库中，所以lib中需要追加["DOM"]

image.png

六、TypeScript 中文错误消息

• 可以使用中文的错误消息

yarn tsc --locale zh-CN

七、TypeScript 作用域问题

//不同文件定义相同类型的对象 会报错

// 作用域问题
(function () {
  const a = 123;
});

//或者
const a = 123;
export {};//作为模块导出，确保跟其他示例没有冲突

八、TypeScript Object类型

TypeScript中的Object类型并不单指普通的对象类型，而是泛指非原始类型，也就是对象，数组和函数

export {}; //作为模块导出，确保跟其他示例没有冲突

const foo: object = function () {}; //  []   {}

const obj: { foo: number; bar?: string } = { foo: 1 };

九、TypeScript 数组类型

const arr1: Array<number> = [1, 2, 3];

const arr2: number[] = [1, 2, 3];

function sum(...args: number[]) {
  return args.reduce((prev, current) => prev + current, 0);
}

十、TypeScript 元组类型

export {};
const tuple: [number, string] = [12, "张三"];

const [age, name] = tuple;

Object.entries({
  foo: 123,
  bar: 22,
});

十一、TypeScript 枚举类型

// 枚举类型
export {};
// 旧
const postStatus = {
  draft: 0,
  unPublished: 1,
  pbulished: 2,
};

// 常量枚举
const enum PostStatus2 {
  draft = 0,
  unPublished = 1,
  pbulished = 2,
}

const enum PostStatus3 {
  draft = 4, //默认从0开始，给了默认数值之后从当前数值开始增加
  unPublished,
  pbulished,
}

enum PostStatus4 {
  draft = 'fds',//可以是字符串  每个都需要填写
  unPublished = 1,
  pbulished = 2,
}

const post = {
  title: "hello TypeScript",
  content: "Typescript is a typed superset of JavaScript",
  status: postStatus.draft,
};

编译过后js文件中的枚举不会移除掉，使用常量枚举则可以移除

image.png

十二、TypeScript 函数类型

// 函数类型

export {}; //确保和其他示例成员没有冲突

// 不确定参数放在最后  使用? 表示
function fun1(a: number, b: number, c?: number) {
  return "func1";
}
fun1(1, 2);

// 可以传递更多不确定参数请在最后使用...reset
function fun2(a: number, b: number, ...rest: number[]) {
  return "func1";
}
fun2(1, 2, 3, 4, 5, 6, 7);

// 函数表达式对应的限制
// 参数和返回值的限制
const fun3: (a: number, b: number) => string = function (
  a: number,
  b: number
): string {
  return "fun3";
}; 

十三、TypeScript 任意类型

export {}; //确保和其他示例成员没有冲突

function stringify(value: any) {
  return JSON.stringify(value);
}

stringify(1);
stringify("fdsf");
stringify(true);

// any是不安全的

十四、TypeScript 隐式类型推断

export {}; //确保和其他示例没有成员冲突

let age = 18; //相当于添加了number的类型注解

// age = 'jk';//不能再将string类型赋值给number类型对象

let foo;//相当于添加了类型为any的类型注解

foo = 100;//可以重新赋值任意类型
foo = "string";

建议为每个变量添加明确的类型注解

十五、TypeScript 类型断言

export {}; //确保跟其他示例没有成员冲突

const nums = [110, 120, 130, 140];

const res = nums.find((i) => i > 0);
console.log(res); //typescript推断类型为number或undefined

// 方式一
const num1 = res as number; //断言为number类型
// 方式二
const num2 = <number>res; //断言为number，JSX下不能使用

十六、TypeScript 接口

export {}; //确保和其他示例中没有成员冲突

// 定义接口
interface Post {
  title: string;
  content: string;
}

function printPost(data: Post) {
  console.log(data.title);
  console.log(data.content);
}

printPost({
  title: "hello",
  content: "Typescript",
});

接口就是用来约束对象的结构，一个对象去实现一个接口，必须要拥有这个接口中所有的成员

十七、TypeScript 接口补充

// 定义接口
interface Post {
  title: string;
  content: string;
  subtitle?: string; //可选成员   添加  ?
  readonly summary: string; //只读 不可更改
}

const hello: Post = {
  title: "hello",
  content: "fds",
  summary: "只读，不能修改",
};

// hello.summary = 'other';//不能修改

interface cache {
  [key: string]: string;
}

const cache1: cache = {};

// cache1.1 ='value';//只能为string
cache1.foo ='value'
cache1.boo ='valued'

十八、TypeScript 类的基本使用

/**
 * 类：描述一类具体事务的抽象特征
 * ES6以前，函数 + 原型 模拟实现类
 * ES6开始，JavaScript中有了专门的class
 * TypeScript 增强了class 的相关语法
 */

export {};

class Person {
  name: string; //  = '初始值'
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  sayHi(msg: string): string {
    console.log(`I am ${this.name}`);
    return "返回类型为string";
  }
}

十九、TypeScript 类的访问修饰符

• public 公有
• private 私有
• protected 只能在子类成员中访问

class Person {
  public name: string; //  = '初始值' public 公有属性
  private age: number; //私有属性
  protected gender: boolean; //只能在子类成员中访问
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
    this.gender = true;
  }
  sayHi(msg: string): string {
    console.log(`I am ${this.name}`);
    return "返回类型为string";
  }
}

const tom = new Person("tom", 19);
console.log(tom.name);
// console.log(tom.age);//age已经设置为私有成员，不能访问
// console.log(tom.gender); //也不能访问

// 创建子类继承Person
class Student extends Person {
  // 构造器添加private 外部不能访问，可以在内部添加静态方法创建实例
  private constructor(name: string, age: number) {
    super(name, age);
    console.log(this.gender); //可以访问
  }
  //   创建静态类外部可访问并且使用其中返回的创建实例方法
  static created(name: string, age: number) {
    return new Student(name, age);
  }
}

const jack = Student.created("jack", 20); //可以使用静态方法
console.log(jack.name);

二十、TypeScript 类的只读属性

• readonly
  当readonly 和访问修饰符同时存在，readonly 写在访问修饰符的后面

protected readonly  gender: boolean; //只能在子类成员中访问 并且只读不能修改

二十一、TypeScript 类与接口

• 使用 implements 关键字

// 类与接口

interface eat {
  eat(food: string): void;
}
interface run {
  run(distance: number): void;
}

class Person implements eat, run {
  eat(food: string): void {
    console.log(`优雅的进餐:${food}`);
  }
  run(distance: number): void {
    console.log(`直立行走：${distance}`);
  }
}
class Animal implements eat, run {
  eat(food: string): void {
    console.log(`大口大口:${food}`);
  }
  run(distance: number): void {
    console.log(`爬行${distance}`);
  }
}

二十二、TypeScript 抽象类

• abstract
• 在class前面添加abstract，为抽象类，当前类只能继承不能创建(new Animal)
• /当父类中有抽象方法，继承的子类要去实现

export {}; //确保跟其他示例没有成员冲突

// 在class前面添加abstract，为抽象类，当前类只能继承不能创建(new Animal)
abstract class Animal {
  eat(food: string): void {
    console.log(`大口大口:${food}`);
  }
  //抽象方法不需要方法体  也就是{ }
  //当父类中有抽象方法，继承的子类要去实现
  abstract run(distance: number): void;
}

class Dog extends Animal {
  //当父类中有抽象方法，继承的子类要去实现
  run(distance: number): void {
    console.log(`奔跑速度为：${distance}`);
  }
}

const d = new Dog();
d.eat("小白");
d.run(100);

二十三、TypeScript 泛型

• < T >

export {}; //确保和其他示例没有成员冲突


// 不适用泛型
function createNumbnerArray(length: number, value: number): number[] {
  const arr = Array<number>(length).fill(value);
  return arr;
}

function createStringArray(length: number, value: string): string[] {
  const arr = Array<string>(length).fill(value);
  return arr;
}

const res1 = createNumbnerArray(3, 100);
const res2 = createStringArray(3, "100");


// ·--------------------------------------------------------

// 使用泛型
function createArray<T>(length: number, value: T): T[] {
  const arr = Array<T>(length).fill(value);
  return arr;
}

const res3 = createArray<string>(3, "foo");

console.log(res1);
console.log(res2);
console.log(res3);

二十四、TypeScript 类型声明

// 类型声明

import { camelCase } from "lodash";
import qs from "query-string";


// declare function camelCase(input: string): string;
const res = camelCase("hello typed");


qs.parse('?key=fdfds&key2=fdfdfnmgf')

// yarn add @types/lodash --dev   类型声明模块
// yarn add query-string  //用来解析URL中的queryString字符串