阅读量:0
一、TypeScript 开发环境搭建
- 下载并安装 Node.js
- 使用 npm 全局安装 typescript
- 进入命令行
- 输入：
npm i -g typescript- 创建一个 ts 文件
- 使用 tsc 对 ts 文件进行编译
- 进入命令行
- 进入 ts 文件所在目录
- 执行命令：
tsc xxx.ts
二、基本类型
类型声明
通过类型声明可以指定 TS 中变量（参数、形参）的类型
类新声明给变量设置了类型，使得变量只能存储某种类型的值
语法：
let 变量: 类型; let 变量: 类型 = 值; function fn(参数: 类型, 参数: 类型): 类型 { ... }自动类型判断
- TS 拥有自动的类型判断机制
- 当对变量的声明和赋值是同时进行的，TS 编译器会自动判断白能量的类型
- 如果变量的声明和赋值是同时进行的，可以省略掉类型声明
新增类型
类型 例子 描述 any * 任意类型 unknown * 类型安全的 any void 空值 (undefined) 没有值 (或 undefined) never 没有值 不能是任何值 tuple [4, 5] 元组，固定长度数组 enum enum(A, B) 枚举 // 使用字面量声明 let a: 10; a = 10; // 可以使用 | 来连接多个类型（联合类型） let b: 'male' | "female"; b = 'male'; b = 'female'; let c: boolean | string; // 相当于关闭了 TS 类型检测 let d: any; // let d; // 隐式的 any d = 10; d = 'hello'; d = true; let e: unknown; e = 10; e = 'hello'; e = true; let s: string; // d: any，可以赋值给任意变量 // s = d; e = 'hello'; // unknown 类型的变量不能直接赋值给其他变量 if (typeof e === 'string') { s = e; // 类型不同 } // 类型断言 s = e as string; s = <string>e; function fn(): void { return; } function fn2(): never { throw new Error('报错了'); } // 变量后面加上一个 ？表示属性是可选的 let b: {name: string, age?: number}; b = {name: 'abc', age: 18}; // 需要 name 属性 let c: {name: string, [propName: string]: any}; c = {name: 'aaa', age: 18, gender: 'male'}; // 设置函数结构的类型声明： // 语法：(形参: 类型, 形参: 类型 ...) => 返回值 let d: (a: number, b: number) => number; // d = function(n1: string, n2: string): number { // return 10; // } // 报错 let e: string[]; // 表示字符串数组 e = ['a', 'b', 'c']; let f: number[]; f = [1, 2, 3] let g: Array<number>; g = [1, 2, 3]; // let h: [string, number]; // 元组 h = ['hello', 123]; // enum enum Gender { Male = 0, Female = 1 } let i: {name: string, gender: Gender}; i = { name: 'abc', gender: Gender.Male } // console.log(i.gender === Gender.Male); let j: { name: string } & { age: number }; // & 表示同时 // j = {name: '孙悟空', age: 18}; // 类型的别名 type myType = 1 | 2 | 3 | 4 | 5; let k: myType; let l: myType; let m: myType; k = 5;
三、编译选项
1、自动编译文件
- 编译文件时，使用 -w 指令后，TS 编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译
- 示例：
tsc xxx.ts -w
2、自动编译整个项目
直接使用 tsc 指令，可以自动将当前项目下的所有 ts 文件编译为 js 文件
直接使用 tsc 命令的前提时要现在项目根目录下创建一个 ts 的配置文件 tsconfig.json
配置选项：
include
- 定义希望被被编译文件所在目录
- 默认值：
["**/*"]- 示例：
“include”: ["src/**/*", "tests/**/*"]exclude
- 定义需要排除在外的目录
- 默认值：
["node_modules", "bower_components", "jspm_packeages"]- 示例：
“exclude”: ["./src/hello/**/*"]extends
- 定义被继承的配置文件
- 示例：
“extend”: "./configs/base"files
指定被编译文件的列表，只有需要编译的文件少时才会用到
示例：
"files": [ "core.ts", "sys.ts", "types.ts", ... ]compilerOptions
编译选项是配置文件中非常重要也比较复杂的配置选项
在 compilerOptions 中包含多个子选项，用来完成对编译的配置
项目选项
target
设置 ts 代码编译的目标版本
可选值：
ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext示例：
"compilerOptions": { "target": "ES6" }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" }示例：
{ "include": [ "./src/**/*" // **：表示任意目录 *：表示任意文件 ], // "exclude": [ // "./src/hello/**/*" // ], "compilerOptions": { "target": "ES2015", "module": "ES6", // "lib": ["es6", "dom"], "outDir": "./dist", // 用来指定编译后文件所在的目录 // "outFile": "./dist/app.js" // 将代码合并为一个文件 "allowJs": true, // 是否对 js 文件进行编译 "checkJs": true, // 是否检查 js 代码是否符合规范 "removeComments": true, // 是否移除注释 "noEmit": false, // 不生成编译后的文件 "noEmitOnError": true, // 当有错误时不生成编译后的文件 "strict": true, // 所有严格检查的总开关 "alwaysStrict": true, // 用来设置编译后的文件是否使用严格模式 "noImplicitAny": true, // 不允许隐式的 any 类型 "noImplicitThis": true, // 不允许不明确类型的 this "strictNullChecks": true, // 严格地检查空值 } }
3、webpack
初始化项目
- 进入项目根目录，执行命令
npm init -y：创建 package.json 文件下载构建工具
npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin
- 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'); const HTMLWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 写入 webpack 的所有配置信息 module.exports = { // 指定入口文件 entry: "./src/index.ts", // 指定打包文件所在位置 output: { // 指定打包文件的目录 path: path.resolve(__dirname, 'dist'), // 打包后的文件 filename: 'bundle.js', // 不使用 箭头函数 environment: { arrowFunction: false } }, // 指定 webpack 打包时使用的模块 module: { // 指定要 load 的 rule rules: [ { // test 指定规则生效的文件 test: /\.ts$/, // 要使用的 loader use: [ // 配置 babel { // 指定加载器 loader: "babel-loader", // 设置 babel options: { // 设置预定义的环境 presets: [ [ // 指定环境插件 "@babel/preset-env", // 配置信息 { // 要兼容的目标浏览器 targets: { 'chrome': "127", 'ie': '11' }, // 指定 core-js 的版本 "corejs": "3", // 使用 corejs 的方式 "useBuiltIns": "usage" // 表示按需加载 } ] ] } }, 'ts-loader' ], // 要排除的文件 exclude: /node-module/ } ] }, // 配置 webpack 插件 plugins: [ new CleanWebpackPlugin(), new HTMLWebpackPlugin({ // title: "这是一个自定义的 title" template: "./src/index.html" }), ], resolve: { extensions: ['.ts', '.js'] } };
