网站 关键字,it网站建设资讯网,wordpress二次元主题,在线学习网站模板TypeSCript简介
TypeScript是JavaScript的超集。它对JS进行了扩展#xff0c;向JS中引入了类型的概念#xff0c;并添加了许多新的特性。TS代码需要通过编译器编译为JS#xff0c;然后再交由JS解析器执行。TS完全兼容JS#xff0c;换言之#xff0c;任何的JS代码都可以直…TypeSCript简介
TypeScript是JavaScript的超集。它对JS进行了扩展向JS中引入了类型的概念并添加了许多新的特性。TS代码需要通过编译器编译为JS然后再交由JS解析器执行。TS完全兼容JS换言之任何的JS代码都可以直接当成TS使用。相较于JS而言TS拥有了静态类型更加严格的语法更强大的功能TS可以在代码执行前就完成代码的检查减小了运行时异常的出现的几率TS代码可以编译为任意版本的JS代码可有效解决不同JS运行环境的兼容问题同样的功能TS的代码量要大于JS但由于TS的代码结构更加清晰变量类型更加明确在后期代码的维护中TS却远远胜于JS
TS环境搭建
NODEJS安装参照
全局安装typescript npm i typescript -g 对ts文件进行编译 tsc ./index.ts 监听编译文件的变化事实更新 tsc ./index.ts -w
基本类型
类型声明就是为了给变量设置类型使得变量只能存储某种类型的值
语法 let 变量 hello // TS拥有自动判断类型的机制该变量此时为string类型let 变量: 类型;let 变量: 类型 值;function fn(参数: 类型, 参数: 类型): 类型{...}类型
类型例子描述number1, -33, 2.5任意数字string‘hi’, “hi”, hi任意字符串booleantrue、false布尔值true或false字面量其本身限制变量的值就是该字面量的值any*任意类型unknown*类型安全的anyvoid空值undefined没有值或undefinednever没有值不能是任何值object{name:‘孙悟空’}任意的JS对象array[1,2,3]任意JS数组tuple[4,5]元素TS新增类型固定长度数组enumenum{A, B}枚举TS中新增类型
number
let a: number 1
console.log(a)function sum(a: number, b: number): number {return a b
}
console.log(sum(123, 456))字面量
//使用字面量进行类型声明
let b: male | female
b male
b femalelet c: number | boolean
c 10
c false
c trueany
//any类型 , any类型可以赋值给任意变量
//第一种声明方式
let d: any
d asd
d 111
//第二种声明方式
let e
e true
e 222c dunknown
//unknown类型实际上是一个类型安全的any不能直接赋值给其他变量
let f: unknown
f hello
f 3333// unknown类型可以进行类型断言
/*语法
* 变量 as 类型
* 类型变量*/
c f as number
c numberfvoid
//void 返回值为空
function fun(): void {return
}never
//never 表示永远不会有返回结果
function fun2(): never {throw new Error(错误信息)
}
object
let a: object
a {}
a function () {
}
console.log(a)
//{}用来指定对象中包含那些属性
// 语法{属性名属性值属性名属性值}
// 属性名后面加上表示该属性为可选属性
let b: { name: string, age?: number }
b {name: jsl, age: 20}
console.log(b)
// [propName: string]: any表示可以添加多个任意类型的属性
let c: { name: string, [propName: string]: any }
c {name: jsl, age: 20, gender: 男}
console.log(c)函数
//定义函数类型
/*设置函数结构的类型声明
* 语法(参数: 类型, 参数: 类型, ...) 返回值类型
* */
let d: (a: number, b: number) number
d function (a, b): number {return a b
}
console.log(d(12, 34))Array
/*数组类型的声明
* 类型[]
* Array类型
*/
// string[] 表示一个字符串类型的数组
let e: string[]
e [1, 23, 445]
let f: Arraynumber
f [1, 2, 3, 4]元组 tuple
// 元组元组是固定长度的数组
// 语法[类型, 类型, 类型...]
let g: [string, number]
g [jsl, 20]枚举 enum
/*枚举类型*/
enum Gender {male,female
}
let h: {name: string, gender: Gender}
h {name: jsl, gender: Gender.male}
console.log(h.gender Gender.male)类型别名
// 表示同时
let z: {name: string} {age: number}
z {name: jsl, age: 20}// 类型别名
type myType 1 | 2 | 3 | 4
// let x: 1 | 2 | 3 | 4
let x: myType
x 2
x 4编译选项 如果直接使用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代码 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
{/*include: 用来指定那些ts文件需要编译路径 ** 表示任意目录* 表示任意文件exclude不需要被编译的ts文件默认值[node_modules, bower_components, jspm_packages]*/include: [./src/*],exclude: [node_modules, bower_components, jspm_packages],compilerOptions: {// 所有严格检查的总开关strict: true,// target指定ts被编译为哪个ES版本(ES6 推荐)target: ES6,// module使用哪个模块化标准(ES6 推荐)module: ES6,// lib指定项目中要使用的库(dont modify generally)//lib: [],// outDir编译后的js文件存放目录(output directory)outDir: ./dist,// outFile将编译后的文件合并为一个文件//outFile: ./dist/main.js// allowJs是否编译js文件(default false)allowJs: false,// checkJs是否检查js文件符合ts标准(default false)checkJs: false,// removeComments是否移除注释(default false)removeComments: true,// noEmit不生成编译后的文件默认 false
// noEmit: false,// noEmitOnError有错误时不生成编译文件noEmitOnError: true,// alwaysStrict使用严格模式默认 falsealwaysStrict: false,// 不允许使用隐式any类型默认 falsenoImplicitAny: false,// noImplicitThis不允许不明确的this默认 falsenoImplicitThis: false,// strictNUllChecks严格检查空值strictNullChecks: false,}
}
使用webpack对项目进行打包 通常情况下实际开发中我们都需要使用构建工具对代码进行打包TS同样也可以结合构建工具一起使用下边以webpack为例介绍一下如何结合构建工具使用TS。 步骤 初始化项目 进入项目根目录执行命令 npm init -y 主要作用创建package.json文件 下载构建工具 npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader html-webpack-plugin 共安装了6个包 webpack 构建工具webpack webpack-cli webpack的命令行工具 webpack-dev-server webpack的开发服务器 typescript ts编译器 ts-loader ts加载器用于在webpack中编译ts文件 html-webpack-plugin webpack中html插件用来自动创建html文件
开发中还经常需要结合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语法
这样使用ts编译后的文件将会再次被babel处理使得代码可以在大部分浏览器中直接使用可以在配置选项的targets中指定要兼容的浏览器版本。
根目录下创建webpack的配置文件webpack.config.js
const path require(path)
const htmlWebpackPlugin require(html-webpack-plugin)module.exports {entry: ./src/main.ts,output: {path: path.join(__dirname, dist),filename: [name].bundle.js,clean: true,},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,}],// use: ts-loader,exclude: /node_modules/}]},plugins: [new htmlWebpackPlugin({title: 自定义的title,template: ./public/index.html,filename: index.html})],devServer: {open: true,port: 8899},// 用来设置引用模块resolve: {extensions: [.ts, .js]}
} 根目录下创建tsconfig.json配置可以根据自己需要 {compilerOptions: {target: ES2015,module: ES2015,strict: true}
}修改package.json添加如下配置 {...略...
scripts: {dev: webpack serve --modedevelopment,build: webpack},...略...} 在src下创建ts文件并在并命令行执行npm run build对代码进行编译或者执行npm run dev来启动开发服务器
面向对象
操作浏览器要使用window对象操作网页要使用document对象操作控制台要使用console对象
类
定义类
class Person {// 静态属性static str: string jsl// 只读属性不可修改readonly age: number 20say(): string {return 你好同学}
}console.log(new Person().say());
console.log(Person.str) // 使用类名.静态属性的方式读取静态属性
console.log(new Person().age)构造器和继承(extends) 通过继承可以将其他类中的属性和方法引入到当前类中 重写 发生继承时如果子类中的方法会替换掉父类中的同名方法这就称为方法的重写
class Animal {name: string;age: number;constructor(name: string, age: number) {this.name namethis.age age}say() {console.log(this.name Animal类 说 你好)}
}class Dog extends Animal {type: string;constructor(name: string, age: number, type: string) {super(name, age);this.type type}sayWang() {//调用父类的方法super.say()console.log(this.name this.type 汪汪~)}run(num:number) {console.log(this.name run num 米)}
}class Cat extends Animal {constructor(name: string, age: number) {super(name, age);}sayMiao() {//调用父类的方法super.say()console.log(this.name this.age 喵喵~)}sayhello super.say
}const dog: Dog new Dog(可乐, 4, 田园犬)
dog.sayWang()
dog.run(100)new Dog(糖果, 1, chaiquan).sayWang()
new Cat(火龙果, 2).sayhello()
new Cat(芒果, 7).sayMiao()
抽象类 抽象类abstract class 抽象类是专门用来被其他类所继承的类它只能被其他类所继承不能用来创建实例
abstract class Animal {name: string;age: number;protected constructor(name: string, age: number) {this.name namethis.age age}// 定义一个抽象方法让子类去实现具体的代码// 只能定义在抽象类中子类必须对抽象方法进行重写abstract say(): void
}class Dog extends Animal {type: string;constructor(name: string, age: number, type: string) {super(name, age);this.type type}//实现父类的抽象方法say() {console.log(Dog类 this.name this.age 岁了)}/*run(num: number) {console.log(this.name run num 米)}*/
}class Cat extends Animal {constructor(name: string, age: number) {super(name, age);}//实现父类的抽象方法say() {console.log(Cat类 this.name)}
}new Dog(狗胜, 4, 田园).say()
new Cat(芒果, 2).say()
接口 interface
接口的作用类似于抽象类不同点在于接口中的所有方法和属性都是没有实值的换句话说接口中的所有方法都是抽象方法。接口主要负责定义一个类的结构接口可以去限制一个对象的接口对象只有包含接口中定义的所有属性和方法时才能匹配接口。同时可以让一个类去实现接口实现接口时类中要保护接口中的所有属性。
// 描述一个对象的类型
type objType {name: string,age: number,gender: number,
}const obj: objType {name: jsl,age: 20,gender: 1
}console.log(obj)//定义一个接口
//定义接口就是定义一套规范所有的属性 方法 都没有实际的值
//接口中的方法都是抽象方法抽象类里面可有有抽象方法也可以有普通方法
//接口用来实现抽象类用来继承
interface objInterface {name: stringage: numberaddress: stringrun(): voideat(): void
}const person: objInterface {name: hello,age: 18,address: 郑州,eat() {console.log(吃饭)},run() {console.log(跑步)}
}
console.log(person)//类实现接口该类就要满足接口的规范是一种标准
class myInterface implements objInterface {address: string;age: number;name: string;constructor(name: string, age: number, address: string) {this.name namethis.age agethis.address address}eat(): void {console.log(myInterface 实现objInterface接口 实现eat方法)}run(): void {console.log(myInterface 实现objInterface接口 实现run方法)}}
let i new myInterface(打嗝, 2, zhegnzhou)
i.eat()
console.log(i.name 可乐);
泛型Generic
定义一个函数或类时有些情况下无法确定其中要使用的具体类型返回值、参数、属性的类型不能确定此时泛型便能够发挥作用。
/*泛型*///定义一个泛型函数
/*
函数有一个参数类型不确定但是能确定的时其返回值的类型和参数的类型是相同的由于类型不确定所以参数和返回值均使用了any但是很明显这样做是不合适的首先使用any会关闭TS的类型检查其次这样设置也不能体现出参数和返回值是相同的类型,这里就用到了泛型
*/function funK (a: K): K {return a
}
/*这里的T就是泛型T是我们给这个类型起的名字不一定非叫T设置泛型后即可在函数中使用T来表示该类型。所以泛型其实很好理解就表示某个类型。
*/
fun(123) // 不指定泛型TS可以自动对类型进行推断console.log(funstring(hello)); // 指定泛型//接口泛型
interface Inter {name: stringage: numberlength: number
}
class In implements Inter {name: string jslage: number 20length: number 100}
/*使用T extends MyInter表示泛型T必须是MyInter的子类不一定非要使用接口类和抽象类同样适用。
*/
function fun2K extends Inter (a: K): number {return a.length
}console.log(fun2(new In()));// 类 泛型
class MyClassK extends Inter {name: Kconstructor(name: K) {this.name name}toString() {console.log(this.name)}
}
new MyClass(new In()).toString()
面向对象的特点 封装 对象实质上就是属性和方法的容器它的主要作用就是存储属性和方法这就是所谓的封装 默认情况下对象的属性是可以任意的修改的为了确保数据的安全性在TS中可以对属性的权限进行设置 只读属性readonly 如果在声明属性时添加一个readonly则属性便成了只读属性无法修改 TS中属性具有三种修饰符 public默认值可以在类、子类和对象中修改protected 可以在类、子类中修改private 可以在类中修改 属性存取器 对于一些不希望被任意修改的属性可以将其设置为private 直接将其设置为private将导致无法再通过对象修改其中的属性 我们可以在类中定义一组读取、设置属性的方法这种对属性读取或设置的属性被称为属性的存取器 读取属性的方法叫做setter方法设置属性的方法叫做getter方法
/*对类 私有属性封装 设置set get 方法
* public(默认) 修饰的属性可以在任意位置访问、修改
* protected受保护的修饰的属性可以在自身的类和子类中访问 修改
* private私有的修饰的属性只能在自身类 中访问 修改
* */class Person {private name: stringprivate age: numberconstructor(name: string, age: number) {this.name namethis.age age}/*想想java就明白了 get set 方法*//*setName(name: string): void {this.name name}getName(): string {return this.name}//可以进行传值判断setAge(age: number): void {if (age 0 age 130)this.age age}getAge(): number {return this.age}*/set name(name: string) {this.name name}get name(): string {return this.name}set age(age: number) {if (age 0 age 130)this.age age}get age(): number {return this.age}toString() {console.log(this.name this.age)}
}const p new Person(jsl, 20)
p.setName(hello)
console.log(p.getName())
p.setAge(90)
console.log(p.getAge())
p.toString()
贪吃蛇模块
页面实现一个简单地贪吃蛇游戏 使用上下方向键控制移动 使用webpack搭建开发环境 这里的一些配置环境直接粘贴就好重点是几个业务类的开发和蛇的移动逻辑开发 涉及到的开发依赖 scripts: {dev: webpack serve --modedevelopment,build: webpack --modeproduction},devDependencies: {babel/core: ^7.22.11,babel/preset-env: ^7.22.14,babel-loader: ^9.1.3,core-js: ^3.32.1,css-loader: ^6.8.1,html-webpack-plugin: ^5.5.3,less: ^4.2.0,less-loader: ^11.1.3,postcss: ^8.4.29,postcss-loader: ^7.3.3,postcss-preset-env: ^9.1.2,style-loader: ^3.3.3,ts-loader: ^9.4.4,typescript: ^5.2.2,webpack: ^5.88.2,webpack-cli: ^5.1.4,webpack-dev-server: ^4.15.1}系统文件架构
--public--index.html
--src--assets--style--index.less--ts--food.ts--gameControl.ts--scorePanel.ts--snake.ts--index.ts
--package.json
--tsconfig.json
--webpack.config.jstsconfig.json
{include: [./src/**/*],compilerOptions: {target: ES6,module: ES6,strict: true,
// noEmitOnError: true}
}webpack.config.js
const path require(path)
const htmlWebpackPlugin require(html-webpack-plugin)module.exports {entry: ./src/index.ts,output: {filename: [name].bundle.js,path: path.join(__dirname, dist),clean: true},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,}],// use: ts-loader,exclude: /node_modules/},{test: /\.less$/,use: [style-loader,css-loader,{loader: postcss-loader,options: {postcssOptions: {presets: [postcss-preset-env,{browsers: last 2 versions}]}}},less-loader]}]},plugins: [new htmlWebpackPlugin({//没有html文件时生效创建了html文件后该属性失效title: hello,template: ./public/index.html,filename: index.html})],devServer: {open: true,port: 8890},resolve: {extensions: [.ts, .js]}
}
