TypeScript

基础介绍

TypeScript——JavaScript 的超集

Typescript 是静态语言与动态语言 JavaScript 不同，TS 是和 JS 都是弱类型语言 （只是在编译时检查）

tsc ./...ts 可以编译生成.js 文件，然后node .js 执行

或者安装 ts-node 执行

变量和数据类型

声明变量并指定类型->变量赋值

let age: number; //变量的声明
age = 22; //变量的赋值
let Name: string = "Katre"; //变量的初始化

类型注解 (type annotation)

为变量添加类型约束的方式 : type

一般简单的变量声明可以不写类型注解。能直接类型推断（type inference）。
一般函数的参数需要类型注解，返回值可以不用写类型注解

let 变量: 类型;
let 变量: 类型 = 值;
function fn(变量: 类型): 类型{
    ···
}

数据类型分类

1 原始类型 2 对象类型

常见的基本数据类型：

number string boolean undefined null symbol void enum

字面量 & 联合类型

let a: 10;//10是字面量
a = 11;// error

let b = "male" | "female";//作为枚举使用
let c = boolean | string; //称为联合类型

有点像常量

any & unknown

any表示任意类型 ，相当于对该变量关闭了类型检查不建议使用

let a;//隐式的any
let a: any;//显式的any

unknown表示安全的任意类型 ，不能直接赋值给其他类型变量，可以赋值给任意变量

let a: any = "ss";//类型any可以赋值给任意变量
let b: unknown = "ss";//类型unknown不能直接赋值给其他类型变量
let s: number;
s = a;
s = b;//error
//先执行类型检查
if(typeof b === "number"){
    s = b;
}
s = b as number;//类型断言
s = <number>b;

类型断言 ：可以用来告诉编译器变量的实际类型

变量 = 变量 as 类型;
变量 = <类型>变量;

void & nerver

主要用于函数的返回值 void 用于没有返回值的函数，不能分配给null，可以分配给undefined， never 表示没有值，是一个特殊类型，比如函数errorFunc，forever

function fn(): void{}
function fn2(): never{
    throw new Error("err!");
}

object

对象，挺少直接写object 采用类似字面量的赋值方式

let a: {age?: number, name: string};
//?表示是可选属性

let b: {name: string, [propName: string]: ang};
let c: (a: number, b: number)=>number;

array

let a: string[];
let b: Array<number>;

tuple & enum

元组——固定长度的数组枚举——和C语言差不多

let a: [string, string];
enum Gender{
    Female,
    Male
}
let b: {name: string, gender: Gender};

类型别名

comme typedefined

type myType = 1|2|3|4|5;

let k: 1|2|3|4|5;//类型复用
let l: myType;

编译选项

自动编译文件

-w 选项

tsc xxx.ts -w

编译配置

tsconfig.json ，直接tsc 编译所以项目文件

可以写注释
include：定义编译的文件范围
**表示任意目录，*表示任意文件
exclude：定义编译排除的范围默认值：["node_modules","bower_components","jspm_packages"]
extends：定义被继承的配置文件
files：指定被编译的文件列表（编译的文件比较少）

`compilerOptions`

target：指定编译为ES的版本
module：指定模块化的规范
lib：指定项目使用的库
outDir：指定编译后文件所在的目录./dist
outFile：将代码合并为一个文件
allowJs：是否编译js文件（默认为false）
checkJs：是否检查js代码（默认为false）
removeComments：是否移除注释
noEmit：不生成编译后的文件
noEmitOnError：有错误时不生成编译的文件（默认为false）
alwaysStrict：执行严格模式（有模块时自动进入）
noImplicitAny：不允许隐式的any类型
noImplicitThis：不允许不明确类型的this

strictNullChecks ：严格检查空值

ES2020的可选链

let box1 = document.getElementById('box1');
box1?.addEventListener('click', function(){
    alert('hello!')
});

strict：严格检查的总开关（建议打开）

使用webpack打包ts代码

npm init -y
npm i -D webpack webpack-cli typescript ts-loader

webpack 的配置信息`webpack.config.js`

const path = require('path');

const HTMLWebpackPlugin = require('html-webpack-plugin')

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/
            }

 ]
    },
    plugins: [
        new HTMLWebpackPlugin({
            title: "MyTitle"
        }),
    ],
    mode: "development",
    resolve:{
        extensions: ['.ts','.js']
}
}

添加tsconfig.json

在package.json 中添加script

"script":{
    "build": "webpack"
}

自动引入资源文件

npm i -D html-webpack-plugin

使用babel

npm i -D @babel/core @babel/preset-env babel-loader core-js

modules:{
rules:[
use:[
    {
        loader: 'babel-loader',
        options:{
        presets:[
            [
              "@babel/preset-env",
              {
                 targets:{
                    "chrome":"99"
                 },
              "corejs":"3",
              "useBuilt Ins":"uses"
              }
            ]
         ]
     }
},
     'ts-loader'
]]}

运算符

在字符串前面添加+ 号，可以将 string 类型转化为 number 类型

语句

TypeScript 支持三元运算符 ?: