TS开发环境搭建
1.下载node.js
2.安装node.js
3.使用npm全局安装typescript
- 进入命令行
- 输入： npm install -g typescript
4.创建一个ts文件 xxx.ts
5.使用tsc对ts文件进行编译 - 进入命令行
- 进入ts文件所在目录
- 执行命令： tsc xxx.ts
TS的类型声明
console.log('hello Ts')
// TS的类型声明
let n: number;
n = 1
let a: string = '1';
let b = false //如果变量的声明和赋值同时进行，TS是可以自动对变量进行类型检测
image.png
console.log('hello Ts')
// TS的类型声明
let n: number;
n = 1
let a: string = '1';
let b = false //如果变量的声明和赋值同时进行，TS是可以自动对变量进行类型检测
//也可以直接使用字面量进行类型声明
let c: 10
//可以使用 | 来连接多个类型（ 联合类型 ）
let d : boolean | string
d = 'd'
d = false
//object表示一个js对象
let o :object;
o={}
o=function(){}
//{}用来指定对象中可以包含哪些属性
//语法：{属性名：属性值，属性名，属性值}
//在属性名后面加上？，表示属性是可选的
let o2 :{name:string, age?:number}
o2={name:'ss',age:2}
//[propName:string]:any 表示任意类型的属性
let o3 :{name:string,[propName:string]:any}
o3={name:'ss',age:12,gender:'男'}
//设置函数结构的类型声明：
//语法： (形参:类型, 形参:类型...) => 返回值
let o4 :(a:number,b:number) => number
o4 = function(n1,n2){
return n1+n2
}
//数组的类型声明： 类型[] Array<类型>
//string[]表示字符串数组
let e: string[]
e = ['a','b']
//number[]表示数值数组
let f: Array<number>
f=[1,2,3]
//元组，就说固定长度的数组
//语法：[类型,类型,类型]
let g:[string,string,number]
g = ['hello','abc',2]
//枚举 enum
enum Gender{
male = 0,
female = 1
}
let i :{name:string,gender:Gender}
i = {
name:'ss',
gender:Gender.male
}
console.log(i.gender = Gender.male)
TS编译选项
- 自动编译文件
编译文件时，使用 -w指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译
tsc app.ts -w - 自动编译整个项目
如果直接使用tsc指令，则可以自动将当前项目下的所有ts文件编译为js文件
但是能直接使用tsc命令的前提是 要先在项目根目录下创建一个ts的配置文件 tsconfig.json
tsconfig.json是一个JSON文件，添加配置文件后，只需tsc命令即可完成对整个项目的编译
tsc 编译所有ts文件,需要配置tsconfig.json文件
tsc -w 监视所有文件的变化并重新编译
- 配置选项
- include 定义希望被编译文件所在的目录
- exclude 定义需要排除在外的目录
- extends 定义被继承的配置文件
"extends":"./configs/base"
- files 指定被编译文件的列表，只有需要编译的文件少时才会用到
- compilerOptions 编译器的选项
{
/*
tsconfig.json 是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译
"include" 用来指定哪些ts文件需要被编译
路径： ** 表示任意目录
* 表示任意文件
"exclude" 不需要被编译的工作路径
默认值：["node_modules","bower_components","jspm_packages"]
*/
"include":[
"./src/**/*"
],
"exclude": [
"./src/js/**/*"
],
/*
compilerOptions 编译器的选项
*/
"compilerOptions":{
//target 用来指定ts被编译为的ES的版本
//'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'es2022', 'esnext'
"target": "ES6",
//module 指定要使用的模块化的范围
// 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'es2022', 'esnext', 'node16', 'nodenext', 'preserve'.
"module": "System",
//lib用来指定项目中要使用的库
// "lib":[]
//outDir 用来指定编译后文件所在的目录
"outDir": "./dist",
//将代码合并为一个文件
//设置outFile后，所有的全局作用域中的代码会合并到同一个文件中
// "outFile": "./dist/app.js",
//是否对js文件进行编译，默认是false
"allowJs": false,
//检查js代码是否符合语法规范，默认是false
"checkJs": false,
//是否移除注释
"removeComments": false,
//不生成编译后的文件
"noEmit": false,
//当有错误时不生成编译后的文件
"noEmitOnError": false,
//所有严格检查的总开关
"strict": false,
//用来设置编译后的文件是否使用严格模式，默认false
"alwaysStrict": false,
//不允许隐式的any类型
"noImplicitAny": false,
//不允许不明确类型的this
"noImplicitThis": false,
//严格的检查空值
"strictNullChecks": false,
}
}
使用webpace打包ts代码
1.初始化项目，通过命令生成package.json
npm init -y
2.下载构建工具
npm i -D webpack webpack-cli typescript ts-loader
3.创建webpack.config.json
//引入一个包
const path = require('path')
//webpack中的所有配置信息都应该写在module.exports中
module.exports = {
//指定入口文件
entry: "./src/index.ts",
//指定打包文件所在目录
output: {
path: path.resolve(__dirname,'dist'),
filename: "bundle.js"
},
module: {
//指定要加载的规则
rules: [
{
//test指定的是规则生效的文件
test: /\.ts$/,
//要是有的loader
use: 'ts-loader',
//要排除的文件
exclude: /node-modules/
}
]
}
}
4.创建tsconfig.json
{
"compilerOptions": {
"module": "ES2015",
"target": "ES2015",
"strict": true
}
}
5.package.json里添加 "build":"webpack"
- npm run build 进行打包
如果想要index.html也自动生成，安装html-webpack-plugin插件，
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
//module下配置
//配置webpack插件
plugins: [
new HtmlWebpackPlugin({
// title:'这是一个自定义title',
template:'./src/index.html'
})
]
7.网页浏览
webpack-dev-server 安装内置服务器
配置命令
"start": "webpack serve --open"
执行npm start 可打开页面
- 模块化报错配置
//用来设置引用模块
resolve: {
extensions: ['.ts','.js']
}
安装babel
npm i -D @babel/core @babel/preset-env babel-loader core-js
改webpack.config.js
use: [
//配置babel
{
//指定加载器
loader:"babel-loader",
//设置babel
options: {
//设置预定义的环境
presets: [
[
//指定环境插件
"@babel/preset-env",
//配置信息
{
//要兼容的目标浏览器
targets: {
"chrome":"58",
'ie':"11"
},
//指定corejs的版本
"corejs":"3",
//使用corejs的方式 "usage" 表示按需加载
"useBuiltIns": "usage"
}
]
]
}
},
'ts-loader'
],
webpack打包后箭头函数在ie下报错，解决办法
//指定打包文件所在目录
output: {
//指定打包文件的目录
path: path.resolve(__dirname,'dist'),
//打包后的文件
filename: "bundle.js",
//告诉webpack不使用箭头函数
environment: {
arrowFunction: false
}
},
面向对象
类
console.log('index')
class Person{
name: string
age: number
constructor(name:string,age:number){
this.name = name
this.age = age
}
// 方法必须使用该语法，不能使用ES5的对象完整形式
call(){
console.log(this)
}
}
let aaa = new Person('dsa',18)
aaa.call()
console.log(aaa)
以abstract开头的类是抽象类
抽象类和其他类区别不大，只是不能用来创建对象
抽象类就是专门用来继承的类
abstract class Animal {
name: string
constructor(name:string){
this.name = name
}
//定义一个抽象方法
//抽象方法使用abstract开头，没有方法体
//抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写
abstract sayHello():void
}
class Dog extends Animal {
sayHello(){
console.log("汪汪汪")
}
}
接口
//接口就是用来定义一个类的结构，用来定义一个类中应该包含哪些属性和方法
//同时接口也可以当成类型声明去使用
interface myInterface {
name: string
age: number
}
const obj: myInterface = {
name:'sss',
age: 18
}
//接口可以在定义类的时候去限制类的结构
//接口中的所有属性都不能有实际的值
//接口只定义对象的结构，而不考虑实际值
//在接口中所有的方法都是抽象方法
interface myInter{
name: string
sayHello():void
}
// 定义类时，可以使类去实现一个接口，
// 实现接口就是使类满足接口的要求
class myClass implements myInter{
name:string
constructor(name:string){
this.name = name
}
sayHello(): void {
console.log('大家好');
}
}
属性的封装
public 修饰的属性可以在任意位置访问（修改）默认值
private 私有属性，私有属性只能在类内部进行访问（修改）
protected 受保护的属性，只能在当前类和当前类的子类中访问（修改）
getter方法用来读取属性
setter方法用来设置属性
它们被称为属性的存取器
(function(){
class Person {
private _name:string
private _age:number
constructor(name:string,age:number){
this._name = name
this._age = age
}
//定义方法获取name属性
getName(){
return this._name
}
//定义方法，用来设置name属性
setName(value:string){
this._name = value
}
//TS中设置getter方法的方式
get age(){
return this._age
}
set age(value:number){
if(value >0){
this._age = value
}
}
}
const per = new Person('孙武了',18)
per.setName('猪八戒')
console.log(per.getName())
per.age = 30
console.log(per.age)
class C{
constructor(public name:string,public age:number){
this.name = name
this.age = age
}
}
const c = new C('xxx',18)
console.log(c)
})()
泛型
在定义函数或类时，如果遇到类型不明确就可以使用泛型
function fn<T>(a:T):T{
return a
}
//可以直接调用具有泛型的函数
fn(10) //不指定泛型，TS可以自动对类型进行推断
fn<string>('hello') //指定泛型
案例
安装less
npm安装
npm i -D less less-loader css-loader style-loader
webpack.config.json中配置
module: {
rules: [
//设置less文件的处理
{
test: /\.less$/,
use:[
"style-loader",
"css-loader",
"less-loader"
]
}
]
}
babel 配置css兼容
npm i -D postcss postcss-loader postcss-preset-env
//设置less文件的处理
{
test: /\.less$/,
use:[
"style-loader",
"css-loader",
//引入postcss
{
loader:"postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env",
{
browsers:"last 2 versions"
}
]
]
}
}
},
"less-loader"
]
}
