思考一个问题，JavaScript是一门非常优秀的编程语言，但是直到今天，JavaScript在类型检测上依然是毫无进展，所以我们需要学习TypeScript，这不仅仅可以为我们的代码增加类型约束，而且可以培养我们前端程序员具备类型思维
目录
一、认识TypeScript
TypeScript: JavaScript With Syntax For Types.
GitHub说法：TypeScript is a superset of JavaScript that compiles to clean
TypeScript官网：TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
翻译一下：TypeScript是拥有类型的JavaScript超集，它可以编译成普通、干净、完整的JavaScript代码。
- JavaScript所拥有的特性，TypeScript全部都支持
- 在语言层面上，不仅仅增加了类型约束，而且包括一些语法的扩展
- TypeScript在实现新特性的同时，总是保持和ES标准的同步甚至是领先
- TypeScript最终会被编译成JavaScript代码，不需要担心兼容性问题
- TypeScript不仅让JavaScript更加安全，而且给它带来了诸多好用的好用特性
安装TypeScript
# 安装命令
npm install typescript -g
# 查看版本
tsc --version二、配置TypeScript的环境
1. 使用ts-node
01 - 安装ts-node及其依赖包
npm install ts-node tslib @types/node -g02 - 代码栗子，创建 .ts 文件
// 规定message的类型为string
let message: string = 'hello'
// 报错！
// message = 123
// 规定参数类型为string
function abc(name: string){}
console.log(message);
// 因为ts默认作用域会在一个，这样设置导出，会让文件形成单独作用域
export {}03 - 使用 ts-node
// ts-node可以直接运行TypeScript代码
ts-node 文件名
2. 使用webpack进行配置
具体可看之前的webpack文章，webpack 之 零基础使用常用的Loader ，这里我快速过一遍哈
01 - 项目初始化
npm init -y02 - 安装各种东东
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin ts-loader typescript -D03 - 新增一个index.html模版
04 - package.json配置
05 - webpack.config.js配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/main.ts',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'boundle.js'
},
devServer: {},
resolve: {
extensions: ['.js', '.ts', '.json']
},
module: {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
})
]
};
06 - 生成tsconfig.json
// 先不用理这个文件，后续讲解
tsc --init07 - 创建src文件夹，里面再创建main.ts
const message: string = '123'
console.log(message);
08 - npm run serve运行即可
三、变量的声明
01. 声明变量的关键字
声明了类型后TypeScript就会进行类型检测，声明的类型可以称之为类型注解
var/let/const 标识符: 数据类型 = 赋值;
数据类型的大小写是有区别的 ，用小写即可
- string ( 小写 ) 是TypeScript中定义的字符串类型
- String ( 大写 ) 是ECMAScript中定义的一个类
02. 类型推导/推断
如果不写数据类型，会讲赋值的值的类型，作为标识符的类型
四、 TypeScript的类型
01. number 类型
let demo: number = 22; // 十进制
let demo: number = 0b110; // 二进制
let demo: number = 0o555; // 八进制
let demo: number = 0xf23; // 十六进制02. boolean 类型
let bool: boolean = true
let bool: boolean = 30 > 2003. tring 类型
const name: string = 'star'
const info: string = `my name is ${name}`04. Array 类型
// 需要制定数组类型，同时制定数组内部值的类型
// 写法一 : 不推荐
const name: Array<string> = []
// 写法二 : 推荐
const name: string[] = []05. 对象 类型
// 使用自动推导即可
const info = {
name: 'star',
age: 18
};06. null 类型
const n: null = null07. undefined 类型
const n: undefined = undefined08. symbol 类型
// Symbol 生成独一无二的key
const info = {
[Symbol('name')]: 'star',
[Symbol('name')]: 'coder'
};09. any 类型
// 任意类型都可赋值，也可赋值给任何类型
let message: any = 'star';
message = 123;
message = true;10. unknown 类型
function foo() {
return 'string';
}
function bar() {
return 123;
}
let flag: boolean = true;
// result 不知是什么类型时可用
let result: unknown;
if (flag) {
result = foo();
} else {
result = bar();
}和any类型的区别
- unknown类型只能赋值给unknown类型和any类型
- any类型可以赋值给任何类型
let result: unknown;
// 报错
let num: number = result
// 可以赋值
let unres: unknown = result
let anyres: any = result11. void 类型
// 当函数没有返回值的时候，该函数就是void类型，不写也阔以,会自动推导
const sum = (num1: number, num2: number): void => {
console.log(num1, num2);
};12. never 类型
// 当永远没有返回值的时候，用never
function foo(): never {
while (true) {}
}
function bar(): never{
throw new Error()
}13. tuple 元组类型
// tuple 多种元素的组合
const info: [string, number, number, string] = ['star', 1, 2, 'coder'];14. 对象 类型
// info是一个对象类型，对象中有两个属性
function find(info: { name: string; age: number }) {}15. 可选 类型
// money是可选类型，可传可不传
function find(info: { name: string; age: number; money?: number }) {}
find({ name: 'coder', age: 123 });
find({ name: 'coder', age: 123, money: 1000 });16. 联合 类型
// 联合类型 可以为其中的一种
function find(id: string | number) {
// 使用联合类型的值的时候，需要特别小心
switch (typeof id) {
case 'string':
break;
case 'number':
break;
}
}
find(123);
find('456');可选类型和联合类型的关系
一个参数是一个可选类型的时候，它其实类似于这个参数是 类型｜undefined的联合类型
function foo(message?: string) {}
// 这里可以不传
foo();
function foo(message: string | undefined) {}
// 但是这里还是要传一个值
foo(undefined);17. 类型别名
// type 用于定义类型别名
type IdType = string | number | boolean;
// 太长了
function idSet(id: string | number | boolean) {}
// 取别名可以优化
function idSet(id: IdType) {}后续会继续更新～～