微信表情包制作网站,西峡微网站开发,重庆网站设计定制,企业网站seo 优帮云环境搭建
以javascript为基础构建的语言#xff0c;一个js的超集#xff0c;可以在任何支持js的平台中执行#xff0c;ts扩展了js并且添加了类型#xff0c;但是ts不能被js解析器直接执行#xff0c;需要编译器编译为js文件#xff0c;然后引入到 html 页面使用。
ts增…环境搭建
以javascript为基础构建的语言一个js的超集可以在任何支持js的平台中执行ts扩展了js并且添加了类型但是ts不能被js解析器直接执行需要编译器编译为js文件然后引入到 html 页面使用。
ts增加了数据类型支持es的新特性添加了es不具备的新特性丰富的配置选项还有强大的开发工具。
全局安装ts需要node环境 安装后 tsc 指令可以查看是否安装成功 npm i -g typescript tsc xxx.ts //编译ts文件为js 基本类型
需要类型声明指定ts中变量的类型指定类型后当变量赋值时ts会自动检查值是否符合声明的类型否则就报错。如果变量的声明和赋值是同时进行的ts可以自动对变量进行类型检测除了声明变量也可添加类型给函数参数对于返回的结果也可以设置类型。
let a true //如果变量的声明和赋值是同时进行的ts可以自动对变量进行类型检测。let b:number;function sum(a:number,b:number):number{return ab;
}
类型例子描述number1,-33,2.5任意数字stringhi任意字符串booleantrue/false布尔值字面量其本身 (let a:10a的值只能是10很少这么用限制变量的值就是该字面量的值any*任意类型相当于关闭了类型检测unknown*类型安全的anyvoid空值undefined没有值或undefinednever没有值不能是任何值object{name:张三}任意的js对象array[1,2,3]任意js数组tuple[4,5,123]元祖ts新增类型固定长度数组enumenum{A,B}枚举ts新增类型
number类型
let a:number 6
string类型
let str:string hello!
boolean类型 let str:boolean true
字面量 类型
let a:10
a 10 //a只能为10let b:male|female //b只能是 male 或者 female(联合类型) 其他值会报错
b male
b femalelet c:boolean|string //c可以是布尔类型或者字符串类型
c true
c hello
any类型
可以是任意类型相当于对该变量关闭了ts类型检测不设置指定类型默认为any类型但是any类型的值可以赋值给任意变量不报错会影响其他变量类型。少用一般多用unknown
let d:any; //可以是任意类型相当于对该变量关闭了ts类型检测
d hello
d 123
d truelet e; //不设置指定类型默认为any类型
unknown类型
未知类型用法与any一致但是不同的类型依旧不可以赋值。实际上就是一个安全类型的any不能直接赋值给其他可以采用类型断言的方式赋值。告诉解析器变量的实际类型。
let e:unknown;
e hellolet s:string
s e //此时报错因为e不是string类型//类型断言,两种方式都可以
s e as string
s stringe
void类型
主要用于函数的无返回值表示函数无返回值
function fn():void{}
never类型
表示永远不会返回结果比如调用下方的方法就会报错代码执行立即结束则没有返回值了
function fn():never{throw new Error(报错了)
} objec类型
比较鸡肋万物皆是对象可以是 {} 可以是 function也可以是[ ] 。
let a:object;
a {}
a function (){}//b是对象类型并且要有一个name属性,age属性可有可无再添加属性就会报错
let b:{name:string,age?:number};//任意字符串的属性名对应的值为any任意类型可以写多个属性但是一定要有name属性
let c {name:string,[propName:string]:any}
c {name:helloage:18,gender:男}let d:(a:number,b:number)number //
d function (a:number,b:number):number{return a b
}
Array类型
let e:string[]; //表示字符串数组
e [a,b]let f:number[]; //数字数组let g:Arraynumber; // 数字数组与上方的意义相同
g [1,2,3,4]
元组类型
固定长度的数组严格需要个数一致。
let h:[string,number]
h [abe,123]
enum 枚举
enum Gender{male 0female 1
}
let i:{name:string,gender:Gender }
i {name:hello,gender:Gender.male
} 表示同时
let j:{name:string} {age:number};
j {name:hello,age:18
}
类型别名
type myType 1|2|3
let m:myType //起了别名
编译选项
自动编译文件
使用-w指令ts会监听文件变化并在变化时对文件重新编译。
tsc xxx.ts -w
自动编译整个项目 需要配置tsconfig.json文件添加配置文件后执行 tsc 指令可以完成对整个项目的编译
tsc -w 指令监听并编译整个项目文件 可以直接使用命令行来初始化配置文件
tsc -init
配置选项
include
用来指定哪些ts文件需要被编译
{include:[./src/**/* //src文件夹下所有文件 **表示任意目录*表示任意文件]
}
exclude
用来指定哪些ts文件不需要被编译默认值[node_modules,browser_components,jspm_packages]也可以不配置。
{exclude: [./src/hello/**/*],
}
extends
定义被继承的配置文件另一个配置文件的配置选项和 tsconfig.json 一致。
{extends:./config.json,
}
files
指定被编译文件的列表只有需要变异的文件少时才会用到。类似于include这个仅限于文件。
{files: [./src/01.ts]
}
compilerOptions 编译选项
target
指定ts被编译为ES的版本默认是 ES3
//可取值为es3 es5es6 es2015es2016es2017 es2018es2019es2020es2021‘es2022esnext
{compilerOptions: {target:ES3}
}
module
指定要使用的模块化的规范
//取值 none, commonjs, amd, system, umd, es6, es2015, es2020, es2022, esnext, node16, nodenext{compilerOptions: {module: es6}
}
lib
用来指定项目中要使用的第三方的库是一个数组但是一般情况下我们不会去改。
//可取值 es5, es6, es2015, es7, es2016, es2017, es2018, es2019, es2020, es2021, es2022, es2023, esnext, dom, dom.iterable, webworker, webworker.importscripts, webworker.iterable, scripthost, es2015.core, es2015.collection, es2015.generator, es2015.iterable, es2015.promise, es2015.proxy, es2015.reflect, es2015.symbol, es2015.symbol.wellknown, es2016.array.include, es2017.object, es2017.sharedmemory, es2017.string, es2017.intl, es2017.typedarrays, es2018.asyncgenerator, es2018.asynciterable, es2018.intl, es2018.promise, es2018.regexp, es2019.array, es2019.object, es2019.string, es2019.symbol, es2019.intl, es2020.bigint, es2020.date, es2020.promise, es2020.sharedmemory, es2020.string, es2020.symbol.wellknown, es2020.intl, es2020.number, es2021.promise, es2021.string, es2021.weakref, es2021.intl, es2022.array, es2022.error, es2022.intl, es2022.object, es2022.sharedmemory, es2022.string, es2022.regexp, es2023.array, esnext.array, esnext.symbol, esnext.asynciterable, esnext.intl, esnext.bigint, esnext.string, esnext.promise, esnext.weakref, decorators, decorators.legacy{compilerOptions: {// lib: [es6]}
}
outDir
指定编译后的文件所在的路径默认编译是和原ts文件在同一目录下。
{compilerOptions: {outDir: ./dist}
}
outFile
指定将ts代码编译后合并为一个js文件默认合并的是全局作用域中的代码如果涉及到模块化export / import会报错需要更改 module 为 amd 或者是 system一般不常用。
{compilerOptions: {outFile: ./dist/app.js}
}
allowJs
是否对js文件进行编译默认是false
{compilerOptions: {allowJs: false}
}
checkJs
检查js代码是否符合语法规范默认是false
{compilerOptions: {checkJs: false}
} removeComments
是否移除编译后js中的注释。
{compilerOptions: {removeComments: true}
} noEmit
是否生成编译后的文件默认为false
{compilerOptions: {noEmit: false,}
}
noEmitOnError
当有错误的时候不生成编译文件默认为false
{compilerOptions: {noEmitOnError: false,}
} alwaysStrict
设置编译后的文件是否使用严格模式默认为false
{compilerOptions: {alwaysStrict: false,}
} noImplicitAny
不允许 ts 中隐式 any 的类型出现比如忘记给函数形参指定数据类型
{compilerOptions: {alwaysStrict: true,}
} noImplicitThis
不允许不明确类型的 this默认值false
{compilerOptions: {noImplicitThis: true,}
} strictNullChecks
严格检查空值 null 并且报错默认值为false
{compilerOptions: {strictNullChecks: true,}
} 其余配置选项参考tsconfig.json · TypeScript中文网 · TypeScript——JavaScript的超集 使用webpack来配置ts的打包编译
npm init
npm i -D webpack webpack-cli typescript ts-loader html-webpack-plugin clean-webpack-plugin webpack-dev-server
webpack.config.js
const path require(path)
const HTMLWebpackPlugin require(html-webpack-plugin)
const { CleanWebpackPlugin } require(clean-webpack-plugin)
module.exports {//指定入口文件entry: ./src/index.ts,//指定打包文件的所在目录output: {//指定打包文件目录path: path.resolve(__dirname, dist),//打包后文件名称filename: bunndle.js,clean: true,environment:{arrowFunction:false}},module: {rules: [//指定ts文件的loader{test: /\.ts$/,use: [{loader: babel-loader,options: {presets: [[babel/preset-env, {targets: { chrome: 88,ie:11},corejs: 3,useBuiltIns: usage}]]}},],//要排除的文件exclude: /node-modules/}]},plugins: [new HTMLWebpackPlugin({template: ./public/index.html}),new CleanWebpackPlugin()],resolve: {extensions: [.ts, .js]},mode: production
}
//tsconfig.json{compilerOptions:{module: es2015,target: es2015,strict: true}
}
//package.jsonscripts: {test: echo \Error: no test specified\ exit 1,build: webpack,start: webpack serve --open chrome.exe },
Class类的一点总结
super函数调用当子类继承父类后有了自己的构造函数那么相当于父类的构造函数被重写那么将不会调用父类的构造函数会报错此时需要调用super函数来执行父类的构造函数。
abstact类当一个类只用于继承时那么使用抽象类且不能用来创建对象抽象父类的公共方法需要子类必须重写抽象方法不用写函数体抽象方法只能写在抽象类中。
abstract class Parent{abstract test():void;
}class Child extends Parent{constructor(){super()}test(){console.log(test)}}
接口interface
用来定义一个类的结构应该包含哪些属性和方法同时也可以当做是类型声明但是接口可以重复定义最终是将相同接口的内容合并在一起。
接口可以在定义类的时候去限制类的结构接口内的所有属性不能有实际的值方法也是抽象方法可以看做是一个抽象类通过 implements 进行实现。
interface myInterface{name:string;age:number;test():void;
}const obj:myInterface {name:sss,age:111}class Test implements myInterface{name:string,construcror(name:string){this.name name}test(){}
}
属性修饰符
public修饰的属性可以在任意位置访问修改。
private私有属性只能在类内部修改如果要修改private属性可以添加 getter setter 的方法外部可以直接通过 . 的方式进行访问和修改属性。
class Test implements myInterface{private _name:stringpivate _age:numberget name(){return this._name}set name(value){this._name value}
}let test new Test()
let name test.name
protected受保护的属性只能在当前的类和子类中内部访问外部不能访问。
泛型
在定义函数或类时如果遇到类型不明确就可以使用泛型泛型可以同时指定多个
function fnT(a:T):T{return a
}
let a fn(10) //不指定类型ts会自动对类型进行推断此时T为number
let str fnstring (hello) // 指定泛型function fn2T,K(a:T,b:K):T{return a
}
let num fn2number,string(123,hello)interface Inter{length:number
}
function fn3T extends Inter(a:T):number{ //继承Inter接口是Inter的子类return a.length
}
fne({length:10})class MyClassT{name:T;constructor(name:T){this.name name}
}
const mc new MyClassstring(jerry)
其他参考文档文档简介 · TypeScript中文网 · TypeScript——JavaScript的超集
