新手实用向，主要适用于学习过Ts但没有实战经验的人进行参照或者长时间未使用后复习使用。
Ts基本类型
声明语法
变量: 类型;
let 变量: 类型 = 值;
function fn(参数: 类型, 参数: 类型): 类型{ ... }
类型种类
| 类型 | 例子 | 描述 |
|---|---|---|
| number | let decimal: number = 6 | 任意数字 |
| string | let color: string = "blue" | 任意字符串 |
| boolean | let isClick: boolean = false | 布尔值true或false |
| 字面量 | xxxx | 限制变量的值就是该字面量的值 |
| any | let color: any =4 ; | 任意类型(ts编译时会不检查any) |
| unknown | let color: unkonwn =4 ; | 类型安全的any |
| void | let unusable: void = undefined; | 没有返回值（或undefined） |
| never | function error(message: string): never { throw new Error(message);} | 不能是任何值 |
| object | let obj: object = {}; | 任意的JS对象 |
| array | let list: number[] = [1, 2, 3]; let list: Array = [1, 2, 3]; | 任意JS数组 |
| tuple | let type: [string, number]; x = ["hello", 10]; | 元素，TS新增类型，固定长度数组 |
| enum | enum Color {Red = 1, Green, Blue,}let c: Color = Color.Green; | 枚举，TS中新增类型 |
- 字面量实例：
- let color: 'red' | 'blue' | 'black'
- let num: 1 | 2 | 3 | 4 | 5
any和unknown的区别
unknown和any都可以被赋予任何类型的值，但unknown更安全。any类型的变量可以给任意类型变量赋值（这可能会导致一些问题），但unknown类型的变量只可以给any 和 unknown类型赋值。如果想对 unknown 进行操作，必须使用类型断言或缩小到一个特定的类型。
void和never的区别
用于函数时， never 表示函数用于执行不到返回值那一步（抛出异常或死循环）的返回值类型，即永不存在的值的类型，而 void 则表示没有返回值，不返回或返回 undefined。
Ts文件编译
单个ts文件的编译
可使用-w命令对某ts文件进行自动编译，并可以在文件发生变化时对文件进行重新编译.
tsc xxx.ts -w
对整个项目中的ts文件进行编译
需要配置tsconfig.json，然后使用tsc指令运行
配置选项
include
- 定义希望被编译文件所在的目录
- 默认值：["**/*"]
"include":["src/**/*", "tests/**/*"]
exclude
- 定义需要排除在外的目录
- 默认值：["node_modules", "bower_components", "jspm_packages"]
"exclude": ["./src/hello/**/*"]
extends
- 定义被继承的配置文件
"extends": "./configs/base"
files
- 指定被编译文件的列表，只有需要编译的文件少时才会用到
"files": [ "core.ts", "sys.ts", "types.ts" "utilities.ts", "binder.ts", "checker.ts", "tsc.ts" ]
项目选项
- target
- 设置ts代码编译的目标版本
- 可选值： ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
"compilerOptions": { "target": "ES6" }
- lib
- 指定代码运行时所包含的库（宿主环境）
- 可选值： ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost ......
"compilerOptions": { "target": "ES6", "lib": ["ES6", "DOM"], "outDir": "dist", "outFile": "dist/aa.js" }
- module
- 设置编译后代码使用的模块化系统
- 可选值：CommonJS、UMD、AMD、System、ES2020、ESNext、None
- outDir
- 编译后文件的所在目录
- 默认情况下，编译后的js文件会和ts文件位于相同的目录，设置outDir后可以改变编译后文件的位置
- outFile
- 将所有的文件编译为一个js文件
- 默认会将所有的编写在全局作用域中的代码合并为一个js文件，如果module制定了None、System或AMD则会将模块一起合并到文件之中
- rootDir
- 指定代码的根目录，默认情况下编译后文件的目录结构会以最长的公共目录为根目录，通过rootDir可以手动指定根目录
"compilerOptions": { "rootDir": "./src" }
- allowJs
- 是否对js文件编译
- checkJs
- 是否对js文件进行检查
- removeComments
- 是否删除注释
- 默认值：false
- noEmit
- 不对代码进行编译
- 默认值：false
- sourceMap
- 是否生成sourceMap
- 默认值：false
- 严格检查
- strict
- 启用所有的严格检查，默认值为true，设置后相当于开启了所有的严格检查
- alwaysStrict
- 总是以严格模式对代码进行编译
- noImplicitAny
- 禁止隐式的any类型
- noImplicitThis
- 禁止类型不明确的this
- strictBindCallApply
- 严格检查bind、call和apply的参数列表
- strictFunctionTypes
- 严格检查函数的类型
- strictNullChecks
- 严格的空值检查
- strictPropertyInitialization
- 严格检查属性是否初始化
- strict
- 额外检查
- noFallthroughCasesInSwitch
- 检查switch语句包含正确的break
- noImplicitReturns
- 检查函数没有隐式的返回值
- noUnusedLocals
- 检查未使用的局部变量
- noUnusedParameters
- 检查未使用的参数
- noFallthroughCasesInSwitch
- 高级
- allowUnreachableCode
- 检查不可达代码
- 可选值：
- true，忽略不可达代码
- false，不可达代码将引起错误
- noEmitOnError
- 有错误的情况下不进行编译
- 默认值：false
- allowUnreachableCode
使用webpack打包Ts文件
安装依赖包
npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin
- webpack：构建工具webpack
- webpack-cli：webpack的命令行工具
- webpack-dev-server：webpack的开发服务器
- typescript：ts编译器
- ts-loader：ts加载器，用于在webpack中编译ts文件
- html-webpack-plugin：webpack中html插件，用来自动创建html文件
- clean-webpack-plugin：webpack中的清除插件，每次构建都会先清除目录
配置webpack
根目录下创建webpack的配置文件webpack.config.js：
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
optimization:{
minimize: false // 关闭代码压缩，可选
},
entry: "./src/index.ts",
devtool: "inline-source-map",
devServer: { contentBase: './dist' },
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
environment: {
arrowFunction: false // 关闭webpack的箭头函数，可选
}
},
module: {
rules: [
{
test: /\.ts$/,
use: { loader: "ts-loader" },
exclude: /node_modules/
}
]
},
配置TS编译选项
根目录下创建tsconfig.json
{
"compilerOptions": {
"target": "ES2015",
"module": "ES2015",
"strict": true
}
}
修改package.json配置
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve --open chrome.exe"
},
...
}
使用Babel
使用babel将一些Es6+的高级语法编译为浏览器可以识别的Es5语法
安装依赖包
npm i -D @babel/core @babel/preset-env babel-loader core-js
- @babel/core：babel的核心工具
- @babel/preset-env：babel的预定义环境
- @babel-loader：babel在webpack中的加载器
- core-js：core-js用来使老版本的浏览器支持新版ES语法
修改webpack.config.js配置文件
...
module: {
rules: [
{
test: /\.ts$/,
use: [
{
loader: "babel-loader",
options:{
presets: [
[ "@babel/preset-env",
{
"targets":{ "chrome": "58", "ie": "11" },
"corejs":"3",
"useBuiltIns": "usage"
}
]
]
}
},
{
loader: "ts-loader",
}
],
exclude: /node_modules/
}
]
}
类
定义类
class 类名 {
属性名: 类型;
constructor(参数: 类型){
this.属性名 = 参数;
}
方法名(){
....
}
}
在TS中可以对属性的权限进行设置
-
静态属性（static）：
- 声明为static的属性或方法不再属于实例，而是属于类的属性；
-
只读属性（readonly）：
- 如果在声明属性时添加一个readonly，则属性便成了只读属性无法修改
-
TS中属性具有三种修饰符：
- public（默认值），可以在类、子类和对象中修改
- protected ，可以在类、子类中修改
- private ，可以在类中修改
-
抽象类（abstract class）:
- 抽象类是专门用来被其他类所继承的类，它只能被其他类所继承不能用来创建实例,使用abstract开头的方法叫做抽象方法，抽象方法没有方法体只能定义在抽象类中，继承抽象类时抽象方法必须要实现.
接口（Interface）
接口主要负责定义一个类的结构,作用类似于抽象类，但接口中的所有方法都是抽象方法。对象只有包含接口中定义的所有属性和方法时才能匹配接口，实现接口时类中要保护接口中的所有属性.
示例：
interface Person{
name: string;
sayHello():void;
}
class Student implements Person{
constructor(public name: string) {
}
sayHello() {
console.log('大家好，我是'+this.name);
}
}
泛型（Generic）
定义一个函数或类时，有些情况下无法确定其中要使用的具体类型（返回值、参数、属性的类型不能确定），此时泛型便能够发挥作用；
function test<T>(arg: T): T{ return arg; }
//声明多个泛型
function test2<T, K>(a: T, b: K): K{
return b;
}
//使用泛型
test(10)
test<number>(10)
test2<number, string>(10, "hello");
T,K都只是我们自己起的名字，设置泛型后即可在函数中用T/K表示某个数据类型；泛型实际上就表示某个类型；
