TS
还有第二篇:https://blog.csdn.net/weixin_52519753/article/details/122017651
1. TS是什么?
1.以js为基础构建的语言
2.js的超集,可以在支持js的平台执行
3.对js进行扩展,并添加类型,把js变成了静态语言
动态类型语言：在运行期进行类型检查的语言，也就是在编写代码的时候可以不指定变量的数据类型，比如Python和Ruby
静态类型语言：它的数据类型是在编译期进行检查的，也就是说变量在使用前要声明变量的数据类型，这样的好处是把类型检查放在编译期，提前检查可能出现的类型错误，典型代表C/C++和Java
4.TS不能在JS解析器执行,需要进行编译成为js
5.相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS。
2.TypeScript 开发环境搭建
-
下载Node.js
- 64位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi
- 32位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi
-
安装Node.js,在cmd输入 node -v
-
使用npm全局安装typescript
-
进入命令行
-
输入：npm i -g typescript
再输入tsc检查安装好了吗?
-
-
创建一个ts文件
-
使用tsc对ts文件进行编译
-
进入命令行cmd进入ts的文件夹
-
执行命令：tsc xxx.ts,之后会产生一个xxx.js文件
-
3. 开始
1.类型声明
类型声明
-
类型声明是TS非常重要的一个特点
-
通过类型声明可以指定TS中变量（参数、形参）的类型
-
指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错
-
简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值
-
语法：
-
let 变量: 类型; let 变量: 类型 = 值; function fn(参数: 类型, 参数: 类型): 类型{ ... }let a:number; a=10; // a的值只能赋值数字型,否则报错.在js是没有静态语言类型的,在ts就有. a="ios"; var b:string; b="hello" b="as" var c= false; c=true; // 类型推断:在有变量值的时候TS会进行类型判断 function sum(a:number,b:number):number{ return a+b } sum(22,32)//在():number就定义了sum就是number类型ts会对赋值过来的数据进行检查,js会不会进行检查,而是自动判断直接赋值.
类型表：
类型 例子 描述 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中新增类型 -
字面量(字面量是也是一种类型)
var d:'male'|"java" d="male" d="java" // 当值不一样时候报错,作用:进行输入值的限制 // '|' 是"或"的意思(联合类型) d="c"// |的使用 // var e:Sting 相比下面的会多一个类型 var e:boolean|String e=true e="golang" //9会进行报错,因为不符合类型 e=9 -
any类型
// any是任意类型,相当于TS关闭了类型检测了,变回了js的弱类型 // 不建议使用, 失去了TS的意义 var f:any; f="123" // 下面这种不指定类型,TS检测器会判定为any类型 var f;let f; f="123" f=1234 // any可以赋值给任何变量,这样会影响h变量的限制,导致h的string直接无效,这就是不推荐使用的any的原因,为了改变这种情况出现了unknown类型 let h:string; h=f; console.log(h) //1234 console.log(typeof h) //number -
unknown(一个类型安全的any)
let i:unknown; i=123; let o:number; o=i;// 这里会显示报错,解决了any的问题 // 赋值的时候会检查i的类型,只要不符合就不通过 // 原理如下: if( typeof i ==="number"){ o=<number>i; } -
断言
o=i as number;//告诉编译器i是一个number类型,进行强调作用 o=<number>i;//强转 -
void
平常的使用
function函数会自动判断return的类型是什么
function a2(num):boolean|number{ if(num>0){ return true } return 0 }function a3():void{ return 1 //这里报错函数强制要求了a3()必须返回void,如果return就会报错 }function a4():void{ } // void 返回的是 undefind -
number
-
let decimal: number = 6; let hex: number = 0xf00d; let binary: number = 0b1010; let octal: number = 0o744; // 可以赋值多种进制数值 -
string
let fullName: string = `Bob Bobbington`; let age: number = 37; let sentence: string = `Hello, my name is ${fullName}. /// 进行字符串拼接,语法:${变量名} -
object（没啥用）
let obj: object = {}; js中{}是对象let person:{ name:String; age?:number } person={name:''} // age加了?所以是可选属性.let person1:{name:string,[xx:string]:unknown} person1={name:'lqc',age:12,sg:181} // 限制某个字段的时候,要加[xx:类型]:unknown -
array
类型[]
string[ ] 是数组类型
let arr:string[]; arr=['1','2','3'] -
tuple
let tuple1:[string,string] tuple1=['one','two'] -
enum 枚举
enum Gender{ Mela=0, Female=1 } let mess:{name:string,gender:Gender} i={name:"lqc",gender:Gender.Mela} console.log(i.gender===Gender.Mela);// 两个都是0枚举的定义
+ enum 名字{ 属性=， 属性， // 如果属性是字符串要赋值；如果是数字那他就会自己增长，默认从0开始增长，如果第一个属性是1，那么第二个如果没有赋值就是2。 // 枚举可以作为类型限制，可以获取其值，不可以赋值 }enum 名字{
属性=，
属性=，
// 如果属性是字符串要赋值；如果是数字那他就会自己增长，默认从0开始增长，如果第一个属性是1，那么第二个如果没有赋值就是2。
}
枚举的好处就是我们输入一些字段是男的，但是后面的代码会把他转化为0或者1，代表男生或者女生
TS有报红一定要处理!!!
-
4、编译选项
-
自动编译文件
-
编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。
-
示例：
-
tsc xxx.ts -w
-
-
-
自动编译整个项目
-
如果直接使用tsc指令，则可以自动将当前项目下的所有ts文件编译为js文件。
-
但是能直接使用tsc命令的前提时，要先在项目根目录下创建一个ts的配置文件 tsconfig.json
-
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代码
-
-
-
module
-
设置编译后代码使用的模块化系统
-
这个是要使用的模块化规范
-
可选值：
- CommonJS、UMD、AMD、System、ES2020、ESNext、None
-
示例：
"compilerOptions": { "module": "CommonJS" }
-
-
lib
-
指定代码运行时所包含的库（宿主环境）（在浏览器就不需要dom了，在node.js之中就要安装dom）
-
可选值：
- 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" }
-
outDir
-
编译后文件的所在目录
-
默认情况下，编译后的js文件会和ts文件位于相同的目录，设置outDir后可以改变编译后文件的位置
-
示例：
-
"compilerOptions": { "outDir": "dist" } -
设置后编译后的js文件将会生成到dist目录
-
-
-
outFile
-
将所有的文件编译为一个js文件
-
默认会将所有的编写在全局作用域中的代码合并为一个js文件，如果module制定了None、System或AMD则会将模块一起合并到文件之中（模块化的不建议合并，也不兼容）
-
示例：
-
"compilerOptions": { "outFile": "dist/app.js" }
-
-
allowJs
- 是否对js文件编译
-
checkJs
-
是否对js文件进行检查
-
示例：
-
"compilerOptions": { "allowJs": true, "checkJs": true }
-
-
-
removeComments
- 编译后的js是否删除注释
- 默认值：false
-
noEmit
- 不对代码进行编译
- 默认值：false
严格检查
- strict
- 启用所有的严格检查，默认值为true，设置后相当于开启了所有的严格检查
- alwaysStrict(在有导入其他文件的时候默认会开启严格模式;没有导包的时候在js头部,会自动加一句"use strict")
- 总是以严格模式对代码进行编译
- noImplicitAny
- 禁止隐式的any类型
- noImplicitThis
- 禁止类型不明确的this
- strictBindCallApply
- 严格检查bind、call和apply的参数列表
- strictFunctionTypes
- 严格检查函数的类型
- strictNullChecks
- 严格的空值检查
- strictPropertyInitialization
- 严格检查属性是否初始化
-
-
额外检查
- noFallthroughCasesInSwitch
- 检查switch语句包含正确的break
- noImplicitReturns
- 检查函数没有隐式的返回值
- noUnusedLocals
- 检查未使用的局部变量
- noUnusedParameters
- 检查未使用的参数
- noFallthroughCasesInSwitch
-
高级
- allowUnreachableCode
- 检查不可达代码
- 可选值：
- true，忽略不可达代码
- false，不可达代码将引起错误
- noEmitOnError
- 有错误的情况下不进行编译
- 默认值：false
- allowUnreachableCode
-
-
-
-
5、webpack
-
通常情况下，实际开发中我们都需要使用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
- 共安装了7个包
-
根目录下创建webpack的配置文件webpack.config.js
// 补全路径 const path = require("path"); // 生成html模块 const HtmlWebpackPlugin = require("html-webpack-plugin"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); module.exports = { optimization:{ minimize: false // 关闭代码压缩，可选 }, entry: "./src/index.ts", devtool: "inline-source-map", devServer: { contentBase: './dist' }, output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js", environment: { arrowFunction: false // 关闭webpack的箭头函数，可选 } }, resolve: { extensions: [".ts", ".js"] }, module: { rules: [ { test: /\.ts$/, use: { loader: "ts-loader" }, exclude: /node_modules/ } ] }, // 插件 plugins: [ new CleanWebpackPlugin(), // 加载html插件 new HtmlWebpackPlugin({ title:'TS测试' }), ] }
-
根目录下创建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语法
- @babel/core
-
修改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/ } ] } ...略... -
如此一来，使用ts编译后的文件将会再次被babel处理，使得代码可以在大部分浏览器中直接使用，可以在配置选项的targets中指定要兼容的浏览器版本。
-
-
-
6. 面向对象
面向对象是程序中一个非常重要的思想，简而言之就是程序之中所有的操作都需要通过对象来完成。面向对象是一种对现实世界理解和抽象的方法，是计算机编程技术发展到一定阶段后的产物.
- 举例来说：
- 操作浏览器要使用window对象
- 操作网页要使用document对象
- 操作控制台要使用console对象
一切操作都要通过对象，也就是所谓的面向对象，那么对象到底是什么呢？这就要先说到程序是什么，计算机程序的本质就是对现实事物的抽象，抽象的反义词是具体，比如：照片是对一个具体的人的抽象，汽车模型是对具体汽车的抽象等等。程序也是对事物的抽象，在程序中我们可以表示一个人、一条狗、一把枪、一颗子弹等等所有的事物。一个事物到了程序中就变成了一个对象。
在程序中所有的对象都被分成了两个部分数据和功能，以人为例，人的姓名、性别、年龄、身高、体重等属于数据，人可以说话、走路、吃饭、睡觉这些属于人的功能。数据在对象中被成为属性，而功能就被称为方法。所以简而言之，在程序中一切皆是对象。
定义类
-
class 类名 { 属性名: 类型; constructor(参数: 类型){ this.属性名 = 参数; } 方法名(){ .... } } -
示例：
class Person{ name: string; age: number; constructor(name: string, age: number){ this.name = name; this.age = age; } sayHello(){ console.log(`大家好，我是${this.name}`); } } const p = new Person('孙悟空', 18); p.sayHello();- this指向的是p这个实例,this指向的是对象的实例
this.name = name; this.age = age; 与 p.name="孙悟空" p.age=18 是同一个意思的2.constructor(){}是一个构造函数,实例创建就直接运行
类的属性
class Person{ name:string='孙悟空'; static age:number=18; } const tony=new Person() console.log(Person.age);name是实例属性,可以直接通过tony.name访问
age是静态属性(类属性),通过Person.age访问到
下面是编译后的js
"use strict"; class Person { constructor() { this.name = '孙悟空'; } } Person.age = 18; const tony = new Person(); console.log(Person.age); console.log(tony);static readonly age:number=18; readonly是只读属性,不可以修改
6. 心得:
1.函数定义模板,需要添加参数类型和放回类型
function a11(one:number,two:number):number{
return one +two
}
a11(1,2)
a11(2,2)
-
变量定义模板
let 名字:string;
let name:string[];
-
字面量也可以是object,而且object也可以进行定义
let person1:{name:string,[xx:string]:unknown} person1={name:'lqc',age:12,sg:181} // 限制某个字段的时候,要加[xx:类型]:unknown -
TypeScript 使用ts的语法转换为各种es版本的东西
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
