初识typescript(一)

准备开始写一些文章来记录一下自己日常的学习和工作中遇到的困难拉~也没想好写点什么，就从记录总结TS的学习成果开始吧！ TS官方文档

一、TypeScript 开发环境搭建

1. 下载并安装 Node.js
2. 使用npm安装全局 typescript: npm i -g typescript
3. 创建一个ts文件
4. 进入命令行，进入ts文件所在目录，执行命令： tsc xxx.ts

二、基本类型

类型	描述
number	任意数字
string	任意字符串
boolean	true、false
字面量	限制变量的值就是该字面量的值
any	任意类型
unkown	类型安全的any
void	没有值（或者undefined)
never	不能是任意值
object	任意的JS对象
array	任意的JS数组
tuple	TS性能增类型，固定长度的数组
enum	枚举，TS中新增的类型

• 类型 Any 和 Unkown 的不同点

let e: unknown // 声明了一个类型为unkown变量
let a: string

e = 'hello'
a = e // 此时a = e 不能将类型"unkown"分配给类型"string"`let e: unknown
let a: string

e = 'hello'
a = e // 此时对a进行赋值时候,会提示不能将类型"unknow"分配给类型"string"

当变量e 声明的类型为unkown时，就不能直接赋值给其他变量，而any 可以赋值给任意变量, 当然，我们可以通过以下两种方案解决类型为unkown变量赋值的问题。

// 方案一、对变量e进行类型检查后赋值
if(typeof e === 'string') {
    a = e
}
// 方案二、类型断言，可以告诉解析器变量的实际类型 
/* 
 * 语法：
 *   1.变量 as 类型 => a = e as string
 *   2.<类型> 变量 => a = <string>e
 * */

• Object

// 1. 将类型声明为一个对象，语法:{属性名: 属性值,属性名：属性值,...}

// 2. 属性名后面加上?，表示该属性可选
let b: {name: String, age?: number}

// 3. 当我们不确定对象里面除了name以外的其他属性时，可以使用[propName: string]: any来代替未知的数据
let b: {name: String,[propName: string]: any} 

// 4. 设置函数结构的类型声明 语法（形参：类型，形参：类型）=> 返回值
let f: (a: number, b: number) => number
f = function(a, b): number{
  return a + b
}

• 数组 Array

// string[] 表示类型字符串数组
let i: string[] // 等同于let i: Array<string>
i = ['a','b'] 

• 元组 Tuple

// 元组就是固定长度的数组
let h: [string, string]
h = ['a','b']

• 枚举 Enum

// 枚举类型, 结果是在多个值之间进行选择
enum Gender {
  'Male' = 0,
  'Female',
}
let m: {name: string, gender: Gender}
m ={ 
  name: 'jack',
  gender: Gender.Female
}

• 类型的别名

type alias = '11'|'22'
let y: alias
let q: alias 

y = '11' // 成功
q = '33' // 失败

• & 表示须同时满足

let j: {name: string} & {age: number}
j = {name: 'jack', age: 18} 

三、tsconfig.json相关配置说明

{
  // 路径: **表示任意目录 *表示任意文件
  "include": [
    "./src/**/*" // include表示把src下的ts文件进行编译
  ],
  "exclude": [
    "./node_modules/**/*" // exclude表示node_modules目录下的文件无需被编译 
  ],
  "extends": "./config.json", // extends表示会将config.json的配置项一并引入
  "compilerOptions": {
    /*
     * target表示指定ts想编译成的ES版本，可任意配置想转换的ES版本
     * 可选参数 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019'
    */
    "target": "es5", 
    /*
     * module表示指定要使用的模块化规范
     * 可选参数'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020'
    */
    "module": "amd", 
    // "lib": [] 用来指定项目中所需要使用到的库，根据项目实际情况进行配置，默认情况下无需更改
    "outDir": "./dist", // 用来指定编译后生成的js文件所在的目录
    /*
     * outFile表示将所有全局作用域中的代码合并到app.js一个目录下
     * 此时module配置项的可选参数只能是'amd'、'system'
    */
    "outFile": "./dist/app.js",
    "allowJs": false, // 是否对js文件进行编译,值为true时会将js文件自动编译到outDir所设置的目录下,默认为false
    "checkJs": false, // 检查js代码是否符合语法规范,默认为false
    "removeComments": true, // 是否移除注释,true表示需要移除备注,默认为false
    //"noEmit": false  noEmit表示是否生成编译后的文件,true表示生成,默认为false
    "noEmitOnError": false, // 有错误时候不生成编译文件,true表示不生成,避免错误代码存到outDir配置项指定的目录下
    "strict": true, // 配置项alwaysStrict、noImplicitAny、noImplicitThis、strictNullChecks都为true
    "alwaysStrict": true, // 对编译后的js文件开启严格模式
    "noImplicitAny": true, // 不允许隐式的any类型
    "noImplicitThis": true, // 不允许不明确类型的this
    "strictNullChecks": true // 严格检查空值
  } 
}

三、使用Webpack 5打包ts代码

1. 新建一个项目，执行 npm init -y 对项目进行初始化
2. 执行 npm install --save-dev webpack-cli typescript ts-loader html-webpack-plugin webpack-dev-server 安装对应的依赖
3. 在项目根目录下创建 webpack.config.js 配置文件以及 src 文件夹，并在src文件夹下新建index.ts文件

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: "production",
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'], // extensions表示哪些文件可以作为模块被引入
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true, // 在生成文件之前清空 output 目录
  },
  devServer: {
    static: './dist', // 修改文件时自动刷新页面
  },
  plugins: [
    new HtmlWebpackPlugin() 
  ]
};

4. 对 package.json 配置项进行修改

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production", 
    "start": "webpack serve --open" 
  }

5. 接着在项目根目录下创建 tsconfig.json 文件

{
 "compilerOptions": {
   "outDir": "./dist/",
   "noImplicitAny": true,
   "module": "es6",
   "target": "es5",
   "allowJs": true,
   "moduleResolution": "node"
 }
}

此时 ，ts 文件就可以被成功的转化成 js文件，接着就可以在index.ts写上一些代码，然后通过执行npm start运行项目或者通过npm run build对项目进行打包，最后还需要处理一下兼容性问题，这里就不多说明了，感兴趣的朋友可以直接前往webpack官网 自行对代码进行补充~