TypeScript学习笔记

TypeScript笔记

why TypeScript?

TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准

TypeScript 由微软开发的自由和开源的编程语言。

TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

JavaScript 与 TypeScript 的区别

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

语言特性

• 类型批注和编译时类型检查
• 类型推断
• 类型擦除
• 接口
• 枚举
• Mixin
• 泛型编程
• 名字空间
• 元组
• Await

ts使用

ts最基础的使用

• 安装

npm install typescript -g

• 配置文件（安装之后会获得tsc脚本）

tsc --init

配置文件的有两项是比较重要的 分别是

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nEQ1SnUm-1608793874349)(C:\Users\Ronin\AppData\Roaming\Typora\typora-user-images\image-20201224144538108.png)]

target是js代码的版本，需要告诉typescript他需要的编译成什么版本的js代码，moudel也是同理 记录何种方式的模块标准

编辑完成之后就可以书写ts代码了，但是需要注意的是 书写完成之后需要进行编译命令，因为ts不具备直接在浏览器环境中运行的能力

• 编译

tsc ./src/index.ts

编译会在同级目录生成一个同名的js文件，之后使用必须使用js文件

那么这种方式肯定不适用于团队协作开发项目，所以我们需要配置一些自动化的东西

使用webpack+typescript

• 安装工具

npm install webpakc webpack-cli webpack-dev-server ts-loader typescript html-webpack-plugin

其中的typescript也是需要重新安装的 因为之前在全局安装之后 可以方便我们使用tsc这个命令但是在实际使用中 ts-loader等这些包还是需要本地的typescript支持的

html-webpack-plugin是因为需要在html文件中测试、

• 配置webpack

根目录下创建webpack.config.js

const htmlWebPackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: "./src/index.ts",
  output:{
    filename: 'app.js'
  },
  resolve: {
    extensions: ['.js',',.ts', '.tsx']
  },
  // devtool: 'cheap-module-eval-source-map',
  module: {
    rules: [{
      test: /\.tsx?$/i,
      use: [{
        loader: 'ts-loader'
      }],
      exclude: /node_modules/
    }]
  },
  plugins: [
    new htmlWebPackPlugin({
      template: './public/index.html'
    })
  ]
}

• 编写虚拟环境脚本

// package.json
{
  ...
  "scripts": {
    "dev": "webpack serve --config ./build/webpack.config.js --open chrome.exe"
  },
}

npm run dev

启动之后就算是可以直接的运行tpescript代码了

ts接口 类型

接口就是为了更加方便的定义类型

export interface Feature{
  id: number;
  name?: string;
  desc: string;
}

泛型中的字段如果不指定为可选那么就都是必选参数

之后所有用到这种类型的地方必须要遵循他定义的规范来操作

接口在ts中能够实现一些后端语言的类的作用，并且相对来说是比较简洁更加容易维护的

interface or type？

export interface Feature{
  id: number;
  name?: string;
  desc: string;
}
export type Feature = {
  id: number;
  name?: string;
  desc: string;
}

上述代码中的两者功能一样，从基础应用上来看两者甚至没有不同，但是两者的不同点还是有不少的，因情况太多具体情况参考文档

参考官方文档中的说明两者是可以相互引用的 interface可以使用extends关键字，来继承/扩展type，type也可以在声明中包括interface

// 使用type扩展 上述interface
type Product = {
    price: number;
    Feature: Feature;
}
// 使用
const b: Product = {
  price: 1,
  Feature: {
    id : 1,
    name: "智能",
    desc: "用的都知道"
  }
}

interface扩展type同理不再赘述

ts函数重载

java中方法的重载：重载指的是两个或者两个以上同名函数，但它们的参数不一样，这时会出现函数重载的情况。

typescript中的重载：通过为同一个函数提供多个函数类型定义来试下多种功能的目的。

注意：必须要把精确的定义放在前面，最后函数实现时，需要使用 |操作符或者?操作符，把所有可能的输入类型全部包含进去，以具体实现。 即最下面的方法需要兼容上面的方法

function run(num:number):void;
function run(str:string,flag:boolean):void;
function run(str:string,flag?:boolean):void;
function run(str:number|string,flag?:boolean):void{
    if(typeof str === 'string'){
        console.log("fur")
    }else{
        console.log(1)
    }
}
run(1)
run("fur")
run("fur",true);

ts泛型

泛型在ts中最常用的场景就是调用restful api接口获取返回值

假如现在我们的api返回的数据不止是一种时五花八门的那么 每一种返回值都必须要对应一个interface或者type

但是如果使用泛型那么我们及规定了他的格式也增加了扩展性

interface Result<T> {
  code: number;
  data: T;
}
// 泛型方法
function getResult<T>(data: T): Result<T>{
  return {code: 0,data}
}
// 调用时
getResult<string>("helloWord")