介绍TS
是 Javascript 的超集
以 Javascript 为基础的语言
扩展了 Javascript,并添加了类型
TS 不能被 JS 解析器直接执行,需要编译为JS运行
类型
tsconfig.json
1、介绍
是 ts 编译器的配置文件,ts 编译器会根据它的信息来对代码进行编译
{
"compilerOptions": {
// 编译成JS的版本
"target": "ES6",
// 指定使用的模块化规范
"module": "ES6",
// 指定编译后文件所在目录
"outDir": "./dist",
// 将编译后文件合并成一个文件
"outFile": "./dist/app.js",
// 对JS进行编译
"allowJs": false,
// 检查 JS语法
"checkJs": false,
// 移除 注释
"removeComments": false,
// 不生成编译后的文件
"noEmit": false,
// 有错误时,不生产编译后文件
"noEmitOnError": false,
// 设置编译后的js是否开启严格模式
"alwaysStrict": false,
// 开启所有的严格检查
"strict": false,
// 不允许隐式的Any类型
"noImplicitAny": true,
// 严格的检查可能的null空值
"strictNullChecks": false
},
/*
include 用来指定编译哪些ts文件
*/
"include": [
"./**/*" //**表示任意目录,*表示任意文件
],
/*
exclude 不需要被编译的文件目录
默认值:["node_modules","bower_components","jspm_packages"]
*/
"exclude": [
]
}
webpack
# 安装需要的依赖包
npm i -D webpack wepack-cli typescript ts-loader
// 编写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$/,//规则生效的文件
use:'ts-loader',
exclude:/node_modules/ //指定要排除的文件
}
]
}
}
// 编写ts的配置
{
"compileOptions":{
"module":"ES6",
"target":"ES6",
"strict":true
}
}
npm i -D html-wepack-plugin
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
new htmlWebpackPlugin()
]
}
npm i -D webpack-dev-server
const webpackdevserver = require('webpackdevserver')
module.exports = {
plugins: [
new htmlWebpackPlugin()
]
}
"scripts":{
"start":"webpack serve --open chrome.exe"
}
类
class Person {
// 实例属性[通过对象访问]
name:string
age:number
// 实例只读属性
readonly address:string='lloo'
// 静态属性[通过类访问]
static sex:number = 1
// 静态只读属性
static readonly email:string='lll'
// 构造函数
constructor(name:string,age:number){
this.name = name;
this.age = age;
}
// 方法
sayHello(){}
}
const person = new Person('lisi',12);
继承
class animal {
name:string
age:number
constructor(name:string,age:number){
this.name = name;
this.age = age;
}
// 方法
sayHello(){
console.log('动物')
}
}
class Cat extends animal{
constructor(name:string,age:number) {
super(name,age);
}
// 覆盖父类方法:方法重写
sayHello(){
console.log('狗')
}
}
抽象 extends
1、抽象类
- 抽象类不能创建实例
abstruct class 类名{}
2、抽象方法
- 抽象方法只能定义在抽象类中
- 抽象方法没有方法体
- 子类必须对抽象方法进行重写
abstruct sayhello():void;
接口 implements
interface 接口名 {}
-
接口用来规范一个类中应该包含哪些属性和方法
-
接口也可做类型声明使用
-
接口中的所有方法都是抽象方法【和抽象类的区别】
属性访问修饰
public:类内外随便访问
private: 只允许类内部访问
protected: 只能在当前类和子类中访问
setxx(){}
getxx(){}
当属性合法性要求高,访问限制高,可以使用get,set方法
如果属性很简单,可以不使用get set方法
class dog {
_name:string,
constructor(name:string){this._name=name}
// ts中设置getter方法方式
get name(){return this._name}
set name(name:string){this._name=name}
}
dog d = new dog()
console.log(d.name)// 底层调用get name()方法
d.name = 'lisi' // 底层调用set name()方法
泛型
// 定义
function f1<T>(a:T):T {
return a;
}
// 方式一Ts自动推断类型
f1(10);
// 方式二手动指定泛型
f1<string>('hello')
// 定义多个泛型
function f1<T,F>(a:T,b:F):T{
return a;
}
f1(123,'123')
f1<number,string>(123,'123')
interface loginInter{
length:number;
}
// 对未知类型添加限制
function fn2<T extends loginInter>(a:T):number {
return a.length;
}
class mycalss<T> {
name:T;
constructor(name:T){this.name = name}
}
const mc = new Mycalss<st>