TS中的类型赋值
格式:let a:类型;
注意:如果变量的类型和赋值是同时进行的,ts会自动识别变量的类型
比如 let a=false
此时ts将a视为boolean,若 a=“字符串”;则会报错。
函数中也可声明变量类型
function sum(a:number,b:number):number{ return a+b;}
ts中可以使用字面量直接赋值
let b:"male" | "female"
此时b只能为male或female
也可以通过字面量的方式限制变量类型,比如
let b : boolean | string ;
b=false;
b="字符串";
any 任意类型,相当于js
尽量不用any
类型断言
s=e as string;
s=<string>e;
非空断言
在变量后面加 ! 表示不会为undefined和null
void 类型
以函数为例,表示函数的返回值为空
never 类型
什么都不返回,连空都不返回
object
普通对象
{}表示对象类型,多用于指定对象中的属性
let person:{name:string};
表示person只有一个属性为name
let person:{name:string,age?:number};
?代表属性是可选的,此时person中有无age属性都可以,但必须有name属性
let person:{name:string,[propName:string]:any};
表示person中必须有name属性,其他所有属性都是可选的
函数对象
let fn:(a:number,b:number)=>number;
表示函数接收两个形参,a为number,b为number,返回值为number
数组
两种表示类型
let arr:number[];
let arr:Array <number>;
元组:固定长度的数组
语法:let arr:[string,string];
枚举
enum Gender{
male=0,
female=1
}
let person:{name:string,gender:Gender}
person={
name:"孙悟空",
genger:Gender.male
}
&同时
let person :{name:string}&{age:number};
type类型
type mytype= 1 | 2 | 3 | 4 | 5 ;
let a:mytype;
let b:mytype;
TS配置文件
tsconfig.json
include:那些文件需要被编译
路径:**任意目录,*任意文件
exclude 不需要被编译的文件
compilerOptions
target:用来指定ts被编译为ES的版本
module:指定要使用的模块化的规范
lib:指定项目中要使用的库
outDir
用来指定编译后文件所在的目录
outFile(不常用)
将代码合并为一个文件
设置outFile后,所有的全局作用域中的代码会合并到同一个文件中
allowJS
是否对JS文件进行编译,默认为false
checkJS
是否检查js代码是否符合语法规范。默认为false
removeComments
是否移除注释
noEmit
不生成编译后的问价
noEmitOnerror
当有错误时不生成编译后的文件
语法检查相关选项
strict
所有严格检查总开关
alwaysStrict
用来设置编译后的文件是否使用严格模式,默认false
noImplicitAny
不允许隐式的any类型
noImplicitThis
不允许不明确类型的this
strictNullChecks
严格的检查空值
小技巧:如果不知道配置项中可以写什么,可以先写一个错的,查看报错信息使用webpack打包ts
初始化 npm init -y
目的:生成package.json
安装依赖
四个核心包:webpack,webpack-cli,typescript,ts-loader
命令:npm i -D webpack webpack-cli typescript ts-loader
webpack配置文件
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.ts', // 入口文件
output: {
path: path.resolve(__dirname, 'dist'), // 输出目录
filename: 'bundle.js' // 输出文件名
},
module: {
rules: [
{
test: /\.ts$/, // 对于所有.ts文件
exclude: /node_modules/, // 排除node_modules文件夹
use: {
loader: 'ts-loader'
}
}
]
},
devServer: {
contentBase: './dist', // 开发服务器从哪个目录提供内容
port: 8080, // 端口号
open: true // 自动打开浏览器
}
};
安装插件:npm i -D html-webpack-plugin
作用:自动生成html文件并引入js
需要在webpack.config.js中配置
安装webpack内置服务器 : npm i -D webpack-dev-server
需要在package.json中配置
面向对象
程序中的所有操作都要通过对象来完成
类
class关键字
注意:
readonly只读属性
static 静态属性
只能被类访问而不能被实例访问
构造函数
constructor ( 参数1 , 参数2 ){}
继承
extends关键字
super关键字
多用于子类想添加其他属性时,constructor里面必须调用一下super
super表示父类
class Dog extends Animals{
age: number
constructor(name:string,age:number) {
super(name)
this.age=age
}
}
抽象类
abstract关键字
抽象类只能用来定义,可以被继承,不能被实例
抽象方法可以规定一下结构,在子类里必须被重写
接口
接口中所有的属性都不能有实际值,所有方法都为抽象方法
定义类时,可以使类去实现一个接口,实现接口就是使类满足接口的要求
interface myInter {
name: string
say():void
}
class Myclass implements myInter{
name: string
constructor(name:string) {
this.name=name
}
say() {
console.log("你好")
}
}
属性的封装
public公共属性,可读可写
private私有属性,不能够被读写,但可以通过get,set方法读写
class Person{
public _name: string
private _age: number
constructor(name: string, age: number) {
this._name = name
this._age=age
}
get age() {
return this._age
}
set age(age) {
if(age>=0)
this._age=age
}
}
let p = new Person("张三", 18)
p.age=-30
protected受保护的
只能在类和子类里访问修改,在实例里不行
可以直接将属性定义在构造函数中
class Person{
constructor(public name:string,public age:number)
}
等同于
class Person{
public name:string
public age:number
constructor(name:string,age:number){
this.name=name
this.age=age
}
}
泛型
在定义函数货是类时,如果遇到类型不明确就可以使用泛型
function fn<T>(a:T):T {
return a
}
可以指定泛型
fn<string>("hello")
可以使用多个泛型
function fn3<T, K>(a: T, b: K): T {
return a
}
可以限制泛型的范围,比如限制泛型是某个接口的子类
interface myInter {
name:string
}
function fn2<T extends myInter>(a:T):T{
return a
}
let p = { name: "张三", age: 18 }
let result = fn2(p)
console.log(result)