Typescript入门 | 青训营笔记

24 阅读7分钟

静态类型和动态类型区别

动态语言(弱类型语言) 是运行时才确定数据类型的语言,变量在使用之前无需申明类型,通常变量的值是被赋值的那个值的类型。. 比如Php、Asp、JavaScript、Python、Perl等等。静态语言(强类型语言) 是编译时变量的数据类型就可以确定的语言,大多数静态语言要求在使用变量之前必须声明数据类型。

数据类型

基础数据类型

//字面量类型声明
let a:10;
a = 10;

//可以使用 | 来连接多个类型(联合类型)
let b: "male" | "female"
b = "male";
b = "female";

let c: boolean | string;
c = true;
c = "hello"

//any 任意类型,相当于对d关闭了TS的类型检测,不建议使用(显示any)
//声明变量如果不指定类型,也会自动判断any(隐式any)
//any可以赋值给任意变量,很破坏其它变量的类型检查
let d:any 

//unknown 表示未知类型的值,不能直接赋值给其它变量
let e:unknown

	//第一种
	if(typeof e === "string"){
    s = e;
  }

	//第二种:类型断言,k可以用来告诉解析器变量的实际类型
	/*语法:
	*		变量 as 类型
  * 	<类型>变量
  */
	s = e as string;
	s = <string>e;

数组类型

//数组的类型声明:
//	1. 类型[]
	let e: string[];
//	2.	Array<类型>
	let f:Array<number>

函数类型

  • 参数列表中加入类型约束,返回值也需要添加(加在参数列表右括号上)
//设置函数结构的类型声明:语法:(形参:类型,...)=>返回值
let d: (a:number,b:number)=>number;

//void 表示空,表示没有返回值的函数,返回undefined 和 null 都行
function fn():void {
  return
}

//never 表示永远不会返回结果
function fn2():never{
  throw new Error('报错了');
}

对象类型

//object 表示一个js对象,由于js中可以表示对象的东西太多,所以不适用
let a:object;
a = {};
a = function()}{}

//{}可用来指定对象中可以包含哪些属性,语法:{属性名:属性值,属性名:属性值……}
//?: 表示可选属性
let b: {name:string,age?: number};
b = {name:'孙', age:18}

//[propName:string]:any 表示任意类型的属性 (设置对象)
let c: {name:string,[propName:string]:any};
c = {name:'猪',age:'11'}

  • 自定义类型带一个大写的I开头代表是一个类型
  • 注意自定义属性中可以定义
    • 只读属性 readonly
    • 可选属性,?:
    • 任意属性,任意属性标注下可以添加任意属性

元祖类型

//元祖:固定长度的数组
//语法:[类型,类型]
let h: [string,number];

枚举类型

//enum

enum Gender{
  Male = 0,
  Female = 1
}

let i: {name:string,gender:Gender};
i = {
  name:'孙',
  gender:Gender.Male
}

console.log(i.gender === Gender.Male);

//&表示同时
let j: {name:string} & {age:number};

//类型的别名
type myType = 1 | 2 | 3 | 4 
let k:myType

TS编译选项

编译命令

//1.直接编译
tsc 文件名.ts

//2.实时更新编译(避免每次都要重新操作)
tsc --init //创建tsconfig配置文件(vscode上要做)
tsc 文件名.ts -w

//3.添加配置文件后,只需tsc命令即可完成对整个项目的编译,配置文件tsconfig.json
//初始化的json文件即使里面只有{}也可
tsc

//

配置选项:

** 表示任意目录

*表示所有文件

  • include
    • 定义希望被编译文件所在的目录
    • 默认值:["**/*"]
    • 示例:

"include":["src/**/*", "tests/**/*"]
      • 上述示例中,所有src目录和tests目录下的文件都会被编译
  • exclude
    • 定义需要排除在外的目录
    • 默认值:["node_modules", "bower_components", "jspm_packages"]
    • 示例:

"exclude": ["./src/hello/**/*"]
      • 上述示例中,src下hello目录下的文件都不会被编译
  • extends
    • 定义被继承的配置文件
    • 示例:

"extends": "./configs/base"
      • 上述示例中,当前配置文件中会自动包含config目录下base.json中的所有配置信息
  • files
    • 指定被编译文件的列表,只有需要编译的文件少时才会用到
    • 示例:

"files": [
    "core.ts",
    "sys.ts",
    "types.ts",
    "scanner.ts",
    "parser.ts",
    "utilities.ts",
    "binder.ts",
    "checker.ts",
    "tsc.ts"
  ]
      • 列表中的文件都会被TS编译器所编译
    • compilerOptions
      • 编译选项是配置文件中非常重要也比较复杂的配置选项
      • 在compilerOptions中包含多个子选项,用来完成对编译的配置
        • 项目选项
          • target
            • 设置ts代码编译的目标版本
            • 可选值:
              • ES3(默认)、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
            • 示例:

"compilerOptions": {
    "target": "ES6"
}
              • 如上设置,我们所编写的ts代码将会被编译为ES6版本的js代码
          • lib
            • 指定代码运行时所包含的库(宿主环境)
            • 可选值:
              • ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost ......
            • 示例:

"compilerOptions": {
    "target": "ES6",
    "lib": ["ES6", "DOM"],
    "outDir": "dist",
    "outFile": "dist/aa.js"
}
          • module
            • 设置编译后代码使用的模块化系统
            • 可选值:
              • CommonJS、UMD、AMD、System、ES2020、ESNext、None
            • 示例:

"compilerOptions": {
    "module": "CommonJS"
}
          • outDir
            • 编译后文件的所在目录
            • 默认情况下,编译后的js文件会和ts文件位于相同的目录,设置outDir后可以改变编译后文件的位置
            • 示例:

"compilerOptions": {
    "outDir": "dist"
}
              • 设置后编译后的js文件将会生成到dist目录
          • outFile
            • 将所有的文件编译为一个js文件
            • 默认会将所有的编写在全局作用域中的代码合并为一个js文件,如果module制定了None、System或AMD则会将模块一起合并到文件之中
            • 示例:

"compilerOptions": {
    "outFile": "dist/app.js"
}
          • rootDir
            • 指定代码的根目录,默认情况下编译后文件的目录结构会以最长的公共目录为根目录,通过rootDir可以手动指定根目录
            • 示例:

"compilerOptions": {
    "rootDir": "./src"
}
          • allowJs
            • 是否对js文件编译
          • checkJs
            • 是否对js文件进行检查
            • 示例:

"compilerOptions": {
    "allowJs": true,
    "checkJs": true
}
          • removeComments
            • 是否删除注释
            • 默认值:false
          • noEmit
            • 不对代码进行编译
            • 默认值:false
          • sourceMap
            • 是否生成sourceMap
            • 默认值:false
        • 严格检查
          • strict
            • 启用所有的严格检查,默认值为true,设置后相当于开启了所有的严格检查
          • alwaysStrict
            • 总是以严格模式对代码进行编译
          • noImplicitAny
            • 禁止隐式的any类型
          • noImplicitThis
            • 禁止类型不明确的this
          • strictBindCallApply
            • 严格检查bind、call和apply的参数列表
          • strictFunctionTypes
            • 严格检查函数的类型
          • strictNullChecks
            • 严格的空值检查
          • strictPropertyInitialization
            • 严格检查属性是否初始化
        • 额外检查
          • noFallthroughCasesInSwitch
            • 检查switch语句包含正确的break
          • noImplicitReturns
            • 检查函数没有隐式的返回值
          • noUnusedLocals
            • 检查未使用的局部变量
          • noUnusedParameters
            • 检查未使用的参数
        • 高级
          • allowUnreachableCode
            • 检查不可达代码
            • 可选值:
              • true,忽略不可达代码
              • false,不可达代码将引起错误
          • noEmitOnError
            • 有错误的情况下不进行编译
            • 默认值:false

Webpack打包

1 初始化文件

选定文件夹进行初始化 npm init -y,创建package.json文件

2 安装依赖

npm i -D webpack webpack-cli typescript ts-loader (D-开发依赖 save -Dev,ts-loader可以整合webpack和ts成一体的,)

package.json中会出现上图的依赖信息和版本号

3 配置webpack配置文件

创建webpack.config.js,配置webpack的配置信息

//引入一个包
const path = require("path");

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

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

  //指定webpack打包时要使用的模块
  module: {
    //指定要加载的规则
    rules: [
      {
        //test指定的是规则生效的文件
        test: /.ts$/,
        //要使用的loader
        use: "ts-loader",
        //要排除的文件
        exclude: /node-modules/,
      },
    ],
  },
};

4 编写tsconfig文件

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

5 编写package.json文件

增加webpack命令,增加bulid命令

{
  "name": "ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build":"webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.4.2",
    "typescript": "^4.9.4",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  }
}

6 自动生成网页插件

cli命令:npm i -D html-webpack-plugin

webpack.config.js

const HTMLWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  ...
  plugins:[
    new HTMLWebpackPlugin({
      //title:"这是一个自定义的title"//生成的html中对应的配置
      //或者给定模板进行参照设定
      template:"./src/index.html"
    })
  ]
  ...
}

7 webpack开发服务器(自动编译修改)

cli命令:npm i -D webpack-dev-server

在package.json中修改命令脚本

"scripts":{
  "start":"webpack serve --open"
}

8 清除dist文件中的文件

cli命令:npm i - clean-webpack-plugin

作用先清空dist文件夹,再编译

在webpack.config.js中

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  ...
  plugins:[
    new CleanWebpackPlugin()
    ...
  ],
  ...
}

9 webpack关于模块配置

如果不配置,ts文件相互引入的话会出问题

resolve:{
    extensions:['.ts','.js'],
},

babel打包

作用:

  1. 新语法转换成旧语法
  2. 旧浏览器不支持的,让其支持,提高兼容性

命令行cli:npm i -D @babel/core @babel/preset-env babel-loader core-js

第一个是babel的核心工具

第二个是预置环境,兼容到不同环境

第三个是将babel和webpack结合的工具

第四个是给老浏览器提供新的环境(按需加载)

  • 注意use数组中的插件是按照从后往前的顺序执行,所以ts-loader要写在后面,先转成js代码,再用babel-loader转换成旧版本的代码

webpack.config.js中需要修改的地方

output: {
    //指定打包文件的目录
    path: path.resolve(__dirname, "dist"),
    //打包后文件的名字
    filename: "bundle.js",
    //告诉webpack不适用箭头函数
    environment: {
      arrowFunction: false,
    },
module: {
    //指定要加载的规则
    rules: [
      {
        //test指定的是规则生效的文件
        test: /.ts$/,
        //要使用的loader
        use: [
          //配置bebel
          {
            //指定加载器
            loader: "babel-loader",
            //设置babel
            options: {
              //设置预定义的环境
              presets: [
                //指定环境的插件
                "@babel/preset-env",
                //配置信息
                {
                  //要兼容的目标浏览器
                  targets: {
                    chrome: "88",
                  },
                  //指定corejs的版本
                  corejs: "3",
                  //使用corejs的方式“usage”表示按需加载
                  useBuiltIns: "usage",
                },
              ],
            },
          },
          "ts-loader",
        ],
        //要排除的文件
        exclude: /node-modules/,
      },
    ],
  },