起步
1. TS和JS最大的区别。 ts是静态类型语言，在编译中报错 js是动态类型语言，在执行阶段报错。
2. TS就像是加入了类型的JS，有js基础很容易上手
入门
1. ts基本数据类型
number 、 boolean /、string /、字面量类型 如 ‘aaa’|‘bbb’|‘ccc’ (值只能是aaa，bbb，ccc 三种)。
2. any/unknow 类型
区别**：any类型变量可以赋值给任意类型变量，而类型unknow赋值给其他类型变量会ts报错。
本质上unknow是较为安全的any，因为给其他类型变量赋值一个any类型变量会破坏原有变量的类型。 如：
let num:number = 123
const a:any = 'icy is god like'
num = a
console.log(num);
首先定义一个number类型的num 再定义一个 const a:any = ‘icy is god like’ ，把any赋值给numberi类型，编译器是不会报错的 控制台打印的num则是: 是一个字符串，使得原有的number类型被破坏了。
使用类型unknow则会ts报错
当然，针对这种，我们可以使用类型断言解决 。当我们确定a是某一个类型后,可以使用类型断言。 语法: 1.变量 as 类型 2. 变量
3.函数类型
可以指定函数的参数类型和返回值类型。 参数类型指定方式同变量（有上面说明的几种） 函数类型语法
let a: (a:number,b:number)=>number // 第一种
function (a:number,b:number):number // 第二种
返回值类型除了以上几种还有 void 、never , 这两种类型都是返回为空，区别在于void的返回的是个空值，表示一个函数没有返回值。而never代表的是实际上什么也没返回，不能是任何值。 never的使用场景很少，常见的就是抛出一个错误中使用:
function useMyFunc():never {
throw new Error('报错了')
}
4.对象类型
对象类型是object，也可以写成{},因为在js中，万物皆是对象，所以它没有什么实际意义，一般不使用，而是指定内部属性类型。 如果只想指定对象内某个属性的类型，其他的不限制，则可以使用 {[propsName:string]:any} 来进行指定。
5.数组类型
数组较好的使用场景是数组内元素类型一致，这样声明数组类型才会精确合理。 语法（两种定义方式）：
let a: string[] // 字符类型数组
let b: Array
● 元组：固定长度的数组（当数组里的值是固定的时候使用元组比较合适） 语法: let h:[string,string,number] 表示数组里只有3个值，第一第二个值类型为string，第三个值类型为number。
● 枚举： 适合一些只有固定值的属性 语法:
// 定义枚举类
enum Gender {
Male = 0, // 这里其实也不用赋值0或1
Female = 1
}
// 定义类型
let i :{name:string,gender:Gender}
// 赋值
i = {
name:'icy',
gender:Gender.Male
}
// 判断
console.log(i.gender === Gender.Male)
6.补充
1. | 和 &
有时候我们会看到 string|number ,表示这个类型可以是string或number 当然也有 string & number ，表示这个类型是 string 且 number (虽然没什么意义，但是也是可以使用的) 比如 let j :{name:string}&{age:number} ，亦或是这种情况要求既可以是string，又可以是string[]。但是总之，这种写法不是很明确，尽量不要去使用，除非万不得已。 类型别名 语法：
type MyType = string;
let str:MyType; // 相当于 let str:string
// 当然，真实情况下不会像上面那样起一个无意义的别名，我们可以用到以下这种情况
type MyType = 1|2|3|4|5|6 // 后续使用起来就非常的方便
2.配置相关(TS编译选项）
一般配置会通过脚手架默认生成，如果没有的话，就手动创建。（扩展：tsc编译所有ts文件，tsc -w 动态监视所有ts文件）
tsconfig.json 配置选项 1）include/exclude 需要编译的ts文件目录/排除的目录 语法:
"include":[
"./src/**/*"
]
"exclude":[
".src/umi/**/*"
]
2)compilerOptions(编译器的选项，有很多子选项） ● target 指定ts编译到的js版本，默认ES3。一般指定ES6/ES5也可以写ES2022，也可以写ESNext ● module 指定要使用的模块化的规范:“es2015”,“commonjs”,“none”,“amd”,“system”,es6",“es2022”,“esnext” ● lib 用来指定项目中要使用的库 语法: lib:["dom","es6"] ● outDir 用来指定编译后的文件所在目录 "outDir":"./dist" ● outFile 将代码合并为一个文件 "outFile":"./dist/app.js" ● allowJs : false/true 设置是否对js文件进行编译，默认为false ● checkJs: false/true 检查js代码是否符合语法的规范，默认为false ● removeComments: false/true 是否移除注释，默认为false ● noEmit :false/true 不生成编译的文件 ● noEmitOnError： false/true 当存在错误时，不生成编译后的文件 ● alwaysStrict: false/true 设置编译后的文件是否使用严格模式，默认为false ● noImplicitAny: false/true 检查，是否允许隐式的any类型，默认为false 常见于在函数形参的场景下，未给形参定义类型，ts编译器将会隐式的将形参推论为any类型，如果不想这种情况发生，可以打开此配置。 ● noImplicitThis: false/true 是否允许不明确类型的this ● strictNullChecks: false/true 是否严格检查空值 ● strict： false/true 所有严格检查的总开关 一般开发建议设置为true，并且置于所有严格检查的顶部，如果需要关闭哪项检查，写在其下面即可。 放一个Demo:
{
"include": ["./src/**/*"],
"exclude": ["./test/index.ts"],
"compilerOptions": {
"target": "ES6",
"module": "System",
"lib": ["dom", "ES6"],
"outDir": "./dist",
"outFile": "./dist/main.js",
"allowJs": true,
"checkJs": true,
"removeComments": false,
"strict": true,
"noEmit": false,
"noImplicitThis": false,
}
}
其他的配置项不一一赘述，单独整理了一份配置清单： https://blog.csdn.net/qq_43682422/article/details/129990284?spm=1001.2014.3001.5501 其他更详细的配置可以查看中文文档：https://typescript.bootcss.com/tsconfig-json.html
2.webpack中使用ts
1）初始化：npm init -y 安装webpck、webpack-cli、typecrript npm i -D webpack webpack-cli typescript
编写webpack.config.js 配置文件 const path = require(“path”); // 获取path工具包（node自带）
module.exports = {
mode: "development", // 指定模式：开发模式development|生产模式product
entry: "./src/index.ts", // 指定入口文件
output: {
filename: "bundle.js", // 打包后的名字
path: path.resolve(__dirname, "dist"), // 指定打包后的路径
},
// 指定webpack打包时需要使用的模块
module: {
// 指定要加载的规则
rules: [
{
test: /\.ts$/, // 指定规则生效的文件(所有以ts结尾的文件)
use: "ts-loader", // 要使用的loader(需要npm安装,npm i -D ts-loader)
exclude: /node_modules/, // 要排除的文件
},
],
},
};
在pakage.json文件的script下面配置打包命令
"scripts": {
"build": "webpack"
},
2）配置自动生成HTML文件插件 安装：npm i -D html-webpack-plugin 配置：在webpack.config.js配置文件下与entry同级
引入
const HTMLPlugin = require("html-webpack-plugin");
配置
entry:'xxxx',
plugins: [new HTMLPlugin()], // 插件都配置在plugins数组中
HTMLPlugin是一个构造函数，里面可以传一些参数，可修改默认值，如修改网页标题:
plugins: [
new HTMLPlugin({
title: "自定义的标题",
}),
],
为了不重复设置，还能指定模板：
plugins: [
new HTMLPlugin({
title: "自定义的标题", // 自定义网页标题
template: "./src/index.ts", // 指定模板文件
}),
],
3）配置实时项目实时监听插件（修改代码自动刷新页面） 安装 npm i -D webpack-dev-server 在pakage.json文件的script下面配置运行命令
"scripts": {
"dev": "webpack-dev-server"
},
4）配置自动清除打包（dist）文件夹插件，每次打包会自动删除旧的打包文件夹并重新生成新的，避免打包文件夹含有旧的无用文件 安装 npm i -D clean-webpack-plugin 在webpack.config.js中配置
// 引入自动清楚dist文件夹的插件(名字不能乱取，这个解构名字是固定的哈）
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
// 在plugins下面配置
plugins: [
new CleanWebpackPlugin(),
],
5）配置resolve resolve可以配置编译的模块类型，举个例子： 我们在index.ts中引入hello.ts中的变量
未配置resolve时，hello.ts是无法作为模块被识别的，因此导出的常量hi无法被识别，控制台会报如下引用错误。
此时我们在webpakc.config.js中配置resovle，将ts后缀文件设置为可引用的模块，
// 用来设置引用的模块
resolve: {
extensions: [".ts", ".js"], // 以ts或者js后缀结尾的文件都能作为模块被引用
},
补充（常见问题）
创建tsconfig文件进行配置include时出现如下ts报错
原因：VSCode会自动检测当前项目当中是否有TS文件；如果没有的话，就会报这个错提示我们去创建一个文件，再去使用。 2) 运行npm run dev 时报错
是因为 html-webpack-plugin 版本与webpack不兼容 解决办法： ● 方法一：降级 webpack 版本，降到 v5.22.0 以下。 ● 方法二：修改本地的 html-webpack-plugin 源码，找到你本地的 xxx/node_modules/html-webpack-plugin/index.js 第 325 行： ● 方法三：在webpack.config.js文件中配置plugins插件时，不要指定template
// Evaluate code and cast to string
let newSource;
try {
// fix issues: https://github.com/jantimon/html-webpack-plugin/issues/1603
// newSource = vmScript.runInContext(vmContext);
vmScript.runInContext(vmContext);
} catch (e) {
return Promise.reject(e);
}
// see issues: https://github.com/jantimon/html-webpack-plugin/issues/1603
newSource = vmContext.HTML_WEBPACK_PLUGIN_RESULT;
建议降低版本，重新安装webpack: ● 查看webpack所有版本 npm view webpack versions ● 重新安装一个低于v5.22.0的版本 npm install webpack@5.21.2 -D
文章来源
发表评论