一、使用TS前准备
- 安装TS
(sudo) npm i typescript -g - 新建TS项目文件夹，在文件夹下执行
tsc --init 和npm init -y后生成tsconfig.json和package.json - 测试TS运行是否正常，新增测试文件
src/index.ts
const hello = '可待'console.log(hello);- 进行编译
tsc ./src/index.ts成功生成index.js文件
var hello = '可待';console.log(hello);为了方便使用，不用每次编写都使用tsc手动编译，我们要将项目工程化
二、工程化
2.1 安装工程化包
webpack:统一编译
webpack-cli:为了使用webpack的一些命令
webpack-dev-server:更新后不用刷新，自动刷新
ts-loader:ts编译规则
typescript:使用typescript语言特性
html-webpack-plugin:打包的文件直接输出HTML文件
npm i webpack webpack-cli webpack-dev-server ts-loader typescript
html-webpack-plugin -D
2.2 配置build/webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
//入口
entry: './src/index.ts',
//出口
output: {
filename: 'app.js'
},
resolve: {
extensions: ['.js', '.ts', '.tsx']
},
devtool: 'cheap-module-eval-source-map',
module: {
rules: [{
test: /\.tsx?$/i,
use: [{
loader: 'ts-loader'
}],
exclude: /node_modules/
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html' //需要添加宿主文件
})
]
}记得添加宿主文件/public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ts使用</title>
</head>
<body>
<div id='app'></div>
</body>
</html>
2.3 修改 package.json 添加项目启动命令
"scripts": {
"dev": "webpack-dev-server --config ./build/webpack.config.js"
},2.4 启动项目 npm run dev
启动成功，后访问http://localhost:8080/
三、TS语法
3.1 类型语法
类型注解
类型推断，如果有初始值则根据原始类型推断类型原始类型：string、boolean、number、symbol、undefined、null
数组类型约束
函数约束(参数约束):返回值约束
无返回值void的使用
对象参数约束
可使用自定义类型写对象参数
//类型别名type:自定义类型,对类型的结构定义
type Prop = { prop: number }
//增强可读性
function fn3(o: Prop) { }
任意类型(此类型多用于数组)
类型断言as语法,无错误类型提示
联合类型(可以是...也可以是...)
交叉类型(可以复用自定义类型)
3.2 函数语法
函数必选参数
function good(person: string): string { return person + '好棒!'}函数可选参数 ?
function good(person: string, msg?: string): string { return person + '好棒!'}函数的重载
3.3 Class
class Parent {
private _dong = "dong"; // 私有属性，不能在类的外部访问
protected bar = "bar"; // 保护属性，可以在子类中访问
// 构造函数参数加修饰符，能够定义为成员属性
constructor(public tua = "tua") { }
// 方法也有修饰符
private someMethod() { }
// 存取器:属性方式访问，可添加额外逻辑，控制读写性
get dong() {
return this._dong;
}
set dong(val) {
this._dong = val;
}
}
class Child extends Parent {
baz() {
this.dong;
this.bar;
this.tua
}
}3.4 接口
接口和type区别:https://www.cnblogs.com/EnSnail/p/11233592.html
3.5 泛型(动态约定类型)
泛型(Generics)是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定 类型的一种特性。以此增加代码通用性。
// 不用泛型
// interface Result {
// ok:0|1;
// data: Feature[];
// }
// 使用泛型
interface Result<T> {
ok: 0 | 1;
data: T;
}
// 泛型方法
function getResult<T>(data: T): Result<T> {
return { ok: 1, data };
}
// 用尖括号方式指定T为string
getResult<string>('hello') // 用类型推断指定T为number
getResult(1)
// 进一步约束类型变量
interface Foo {
foo: string
}
// 约束T必须兼容Foo
function getResult2<T extends Foo>(data: T): Result<T> {
return { ok: 1, data };
}
getResult2({ foo: 'foo', bar: 'bar' })
拓展Vue中使用TypeScript
juejin.cn/post/684490…
