typescript 知识架构图 typescript入门

转载

风之谷启航 2023-09-16 00:01:09

文章标签 typescript 知识架构图 typescript javascript 前端编译器 文章分类 TypeScript 前端开发

Typescript简介

TypeScript 是 JavaScript 的一个超集,对js进行了扩展，也新增了许多新的属性
TS代码需要通过编译器编译为JS，然后再交由JS解析器执行
相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能
TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题
同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS。

1、TypeScript 开发环境搭建

node环境是必须的，这个安装就不多说了

使用npm全局安装typescript

npm i -g typescript

创建ts文件，进入目录，使用tsc对其文件进行编译：tsc weige.ts

2、基本类型

（1）类型声明 --重要特点

通过类型声明可以指定TS中变量（参数、形参）的类型
指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错
简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值
语法：

let 变量: 类型;
	
	let 变量: 类型 = 值;
	
	function fn(参数: 类型, 参数: 类型): 类型{
	    ...
	}

(2) 自动类型判断

TS拥有自动的类型判断机制
当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明

(3) 类型：

类型	例子	描述
number	1, -33, 2.5	任意数字
string	‘hi’, “hi”, `hi`	任意字符串
boolean	true、false	布尔值true或false
字面量	其本身	限制变量的值就是该字面量的值
any	*	任意类型
unknown	*	类型安全的any
void	空值（undefined）	没有值（或undefined）
never	没有值	不能是任何值
object	{name:‘伟哥’}	任意的JS对象
array	[1,2,3]	任意JS数组
tuple	[4,5]	元素，TS新增类型，固定长度数组
enum	enum{A, B}	枚举，TS中新增类型

number

let a:number = 123;

boolean

let weiIsMengnan:boolean = true;

string

let b:string = "weige";

字面量

let c:"weige" | "mengnan" | "weiyeye";
let d:1 | 2 | 3

any

let d: any = 4;
d = 'hello';
d = true;

unknown

let a: unknown = 4;
a= 'hello';

void

//一般用于方法当中
let fun: void = undefined;

never

//一般用于调式报错
function error(message: string): never {
  throw new Error(message);
}

object

let obj: object = {};

array

let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];

tuple

//组合类型
let x: [string, number];
x = ["hello", 10];

enum

//枚举类型，可以理解为字面量的升级类型
enum Color {
  Red,
  Green,
  Blue,
}
let c: Color = Color.Green;

enum Color {
  Red = 1,
  Green,
  Blue,
}
let c: Color = Color.Green;

enum Color {
  Red = 1,
  Green = 2,
  Blue = 4,
}
let c: Color = Color.Green;

(4) 类型断言

有些情况下，变量的类型对于我们来说是很明确，但是TS编译器却并不清楚，此时，可以通过类型断言来告诉编译器变量的类型，断言有两种形式：

第一种

let getValue: unknown = "this is a string";
 let strLength: number = (getValuea string).length;

第二种

let getValue: unknown = "this is a string";
 let strLength: number = (<string>getValue).length;

3、编译

（1）自动编译(监听单个文件)

tsc weige.ts -w

（2）自动编译整个项目ts文件

创建tsconfig.json文件

{
/*
  tsconfig.json是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译
    "include" 用来指定哪些ts文件需要被编译
      路径：** 表示任意目录
            * 表示任意文件
    "exclude" 不需要被编译的文件目录
        默认值：["node_modules", "bower_components", "jspm_packages"]

*/
  "include": [
    "./src/**/*"
  ],
 "exclude": [
   "./src/hello/**/*"
 ],
  //编译指定文件，文件少的时候才需要用到，用的比较少
  "files": [
    "a.ts",
    "b.ts",
  ],

  /*
    compilerOptions 编译器的选项
  */
  "compilerOptions": {

    // target 用来指定ts被编译为的ES的版本
    // 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext'
    "target": "es2015",
    // module 指定要使用的模块化的规范
    // 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext'
    "module": "es2015",
    // lib用来指定项目中要使用的库
    "lib": ["es6", "dom"],


    // outDir 用来指定编译后文件所在的目录
    "outDir": "./dist",

    // 将代码合并为一个文件
    // 设置outFile后，所有的全局作用域中的代码会合并到同一个文件中
    "outFile": "./dist/app.js",

    // 是否对js文件进行编译，默认是false
    "allowJs": true,
    // 是否检查js代码是否符合语法规范，默认是false
   "checkJs": true,
    // 是否移除注释
    "removeComments": true,
    // 不生成编译后的文件
    "noEmit": false,


    // 当有错误时不生成编译后的文件
    "noEmitOnError": true,

    // 所有严格检查的总开关
    "strict": true,

    // 用来设置编译后的文件是否使用严格模式，默认false
    "alwaysStrict": true,

    // 不允许隐式的any类型
    "noImplicitAny": true,

    // 不允许不明确类型的this
    "noImplicitThis": true,

    // 严格的检查空值
    "strictNullChecks": true
  }
}

4、webpack

通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS。
步骤：

初始化项目

进入项目根目录，执行命令 npm init -y

主要作用：创建package.json文件

下载构建工具

npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

共安装了7个包

webpack

构建工具webpack

webpack-cli

webpack的命令行工具

webpack-dev-server

webpack的开发服务器

typescript

ts编译器

ts-loader

ts加载器，用于在webpack中编译ts文件

html-webpack-plugin

webpack中html插件，用来自动创建html文件

clean-webpack-plugin

webpack中的清除插件，每次构建都会先清除目录

根目录下创建webpack的配置文件webpack.config.js

// 引入一个包
const path = require('path');
// 引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// webpack中的所有的配置信息都应该写在module.exports中
module.exports = {
    // 指定入口文件
    entry: "./src/index.ts",

    // 指定打包文件所在目录
    output: {
        // 指定打包文件的目录
        path: path.resolve(__dirname, 'dist'),
        // 打包后文件的文件
        filename: "bundle.js",

        // 告诉webpack不使用箭头
        environment:{
            arrowFunction: false
        }
    },

    // 指定webpack打包时要使用模块
    module: {
        // 指定要加载的规则,在后面的先执行，在前面的后执行
        rules: [
            {
                // test指定的是规则生效的文件
                test: /\.ts$/,
                // 要使用的loader
                use: [
                     // 配置babel
                     {
                         // 指定加载器
                         loader:"babel-loader",
                         // 设置babel
                         options: {
                             // 设置预定义的环境
                             presets:[
                                 [
                                     // 指定环境的插件
                                     "@babel/preset-env",
                                     // 配置信息
                                     {
                                         // 要兼容的目标浏览器
                                         targets:{
                                             "chrome":"58",
                                             "ie":"11"
                                         },
                                         // 指定corejs的版本
                                         "corejs":"3",
                                         // 使用corejs的方式 "usage" 表示按需加载
                                         "useBuiltIns":"usage"
                                     }
                                 ]
                             ]
                         }
                     },
                    'ts-loader'
                ],
                // 要排除的文件
                exclude: /node-modules/
            }
        ]
    },

    // 配置Webpack插件
    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            // title: "这是一个自定义的title"
            template: "./src/index.html"
        }),
    ],

    // 用来设置引用模块
    resolve: {
        extensions: ['.ts', '.js']
    }

};

根目录下创建tsconfig.json，配置可以根据自己需要

{
    "compilerOptions": {
        "target": "ES2015",
        "module": "ES2015",
        "strict": true
    }
}

修改package.json添加如下配置

{
  ...略...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open chrome.exe"
  },
  ...略...
}

在src下创建ts文件，并在并命令行执行npm run build对代码进行编译，或者执行npm start来启动开发服务器

5、Babel

经过一系列的配置，使得TS和webpack已经结合到了一起，除了webpack，开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将babel引入到项目中。

安装依赖包：

npm i -D @babel/core @babel/preset-env babel-loader core-js
共安装了4个包，分别是：

@babel/core

babel的核心工具

@babel/preset-env

babel的预定义环境

@babel-loader

babel在webpack中的加载器

core-js

core-js用来使老版本的浏览器支持新版ES语法

修改webpack.config.js配置文件

...略...
module: {
    rules: [
        {
            test: /\.ts$/,
            use: [
                {
                    loader: "babel-loader",
                    options:{
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    "targets":{
                                        "chrome": "58",
                                        "ie": "11"
                                    },
                                    "corejs":"3",
                                    "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },
                {
                    loader: "ts-loader",

                }
            ],
            exclude: /node_modules/
        }
    ]
}
...略...