一、什么是typeScript
拥有类型系统的JavaScript的超级，可以编辑成纯JavaScript，像是一个工具
类型检查：会在编译代码时进行严格的静态类型检查，编码是发现存在的隐患
语言扩展：会包括es6和未来提案中的特性，接口抽象类型
工具属性：可以编译成标准的JavaScript，可以在任何浏览器操作系统上运行
好处：提高开发效率，降低维护成本，重塑类型思维
二、基础
1、不同类型的语言
（1）强类型语言与弱类型语言
- 强类型语言：不允许改变变量的属于类型，除非进行强制的类
- 型转换
弱类型语言：变量可以被赋予不同的数据类型
（2）动态类型语言与静态类型语言
- 动态类型语言：在执行阶段确定所有的变量类型。在程序运行时，动态计算属性偏移量；对类型非常宽松；bug可能隐藏；运行性能差；可读性差。但是：性能可以改善，单元测试可以测试出隐藏bug
- 静态类型语言：在编译阶段确定所有的变量类型。编译阶段确定属性偏移量；对类型季度严格；运行性能好
2、编写一个typeScript程序
步骤：
1、全局安装typeScript:
npm i typescript -g
2、获取帮助信息:
tsc -h
3、创建tsc配置项:
tsc --init
4、创建ts文件index.ts,写入:
let hello : string = 'Hello TypeScript'
5、编译ts文件:
tsc ./src/index.ts
6、编译ts文件后生成js文件，其内容:
var hello = 'Hello TypeScript';
7、为了让工程项目跑起来，需要安装三个包:
npm i webpack webpack-cli webpack-dev-server -D
8、创建文件夹build，存放配置文件（需要区分开发环境和生成环境的配置，可以分开书写配置）
//根据需要安装'ts-loader'、'typescript'、'html-webpack-plugin'
//html-webpack-plugin可以将ts的内容映射到index文件中，因此要创建一个index.html文件。并在body标签下加入<div class="app"></div>
//webpack.base.config.js:
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.ts',
output: {
filename: 'app.js'
},
resolve: {
extensions: ['.js', '.ts', '.tsx']
},
module: {
rules: [
{
test: /\.tsx?$/i,
use: [{
loader: 'ts-loader'
}],
exclude: /node_modules/
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/tpl/index.html'
})
]
}
//webpack.dev.config.js 开发环境
//启用source-map，以下官方推荐，cheap忽略劣质信息，
module.exports = {重编译速度快
devtool: 'cheap-module-eval-source-map'
}
//webpack.pro.config.js 生产环境
//安装'clean-webpack-plugin',作用：每次成功构建之后，帮我们清空很多无用文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
plugins: [
new CleanWebpackPlugin()
]
}
//webpack.config.js 将基础配置和不同环境所需要的配置结合在一起
//安装webpack-merge',作用：将基础配置和需要的配置合并
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.config')
const devConfig = require('./webpack.dev.config')
const proConfig = require('./webpack.pro.config')
let config = process.NODE_ENV === 'development' ? devConfig : proConfig
module.exports = merge(baseConfig, config)
9、修改npm的脚本，package.json
//webpack-dev-server 启动项目
//mode 将当前的环境变量指定为什么
//config 指定当前环境的配置文件
"scripts": {
//开发环境脚本
"start": "webpack-dev-server --mode=development --config ./build/wbpack.config.js",
"build": "webpack --mode=production --config ./build/webpack.pro.config.js"
},
10、启动项目:
npm start
11、打开浏览器查看项目：
http://localhost:8080/
3、基本类型
（1）类型注解：
作用：相当于强类型语言中的类型声明，可以对变量起到约束作用
语法：(变量/函数): type
（2）不同的类型
//原始类型
let bool: boolean = true
let num: number = 123
let str: string = 'abc'
str = 123 ❌ //不能将类型“123”分配给类型“string”
//数组
//以下两种数组都是number类型的数组
let arr1: number[] = [1,2,3]
let arr2: Array<number> = [1,2,3]
//想要number和string类型的数组
let arr3: Array<number | string> = [1,2,3,'4']
//元组，（特殊的数组，限定的数组元素的类型和个数）
let tuple: [number, string] = [0,'1']
let tuple1: [number, string] = [0, '1', 9] ❌ //不能将类型“[number, string,number]”分配给类型“[number, string]”。属性“length”的类型不兼容。不能将类型“3”分配给类型“2”
//ts允许往元组添加新元素，但是不能访问
tuple.push(2); console.log(tuple) // [0, "1", 2]
tuple[2] ❌ // Tuple type '[number, string]' of length '2' has no element at index '2'
//函数
let add = (x, y) => x + y //参数“x”,“y”隐式具有“any”类型。
let addNumber = (x: number, y: number): number => x + y //括号后添加的类型为函数返回值的类型，通常返回值类型可以省略，ts会推断
//定义函数类型并且实现
let compute: (x: numbwe, y: number) => number; compute = (a, b) => a + b
//对象
let obj: objsct = {x: 1, y:2}
obj.x = 3 ❌ //简单指定了obj的类型是object，并没有具体定义应该包含的属性;⚠️any类型，类型“object”上不存在属性“x”
let obj2: {x: number, y: number} = {x: 1, y: 2}
obj.x = 3 ✔️
//symbol 具有唯一的值
let s1: symbol = Symbol()
let s2 = Symbol()
console.log(s1 === s2) //false
//undefined, null
//被赋值成undefined，null的变量只能被赋值成undefined，null,不能被赋值成其他类型
let un:undefined = undefined
let nu: null = null
//在ts的官方文档中，undefined，null是任何类型的子类型，是可以被赋值给其他类型，但需要设置！！！
num = undefined ❌ //不能将类型“undefined”分配给类型“number”
"strictNullChecks": false, //打开tsconfig.json
num = undefined ✔️
//以上的方法尽量不要操作，但是必须要赋值，我们可以用联合类型
let num2: number | undefined | null = 2
num2 = null
//void 表示没有任何返回值的类型
let noReturn = () => {}
//any 和js没有什么区别,不是特别情况，不建议使用
let x
x = 1
x = []
x = () => {}
//never 永远不会有返回类型
let error = () => {
throe new Error('error')
}
let endless = () => { //死循环
while(true) {}
}
