问：优秀的JavaScript没有缺点吗？
有！比如es5的var声明变量作用域问题、代码运行后才知道语法是否错误 等。。
问：JavaScript是不是在蓬勃发展，
对！你看看都Es几了
，不可否认的是，JavaScript正在慢慢变得越来越好，无论是从底层设计还是应用层面，ES6、7、8等的推出，每次都会让这门语言更加现代、更加安全、更加方便，但你发现没JavaScript在类型检测上依然是毫无进展。。网友说就跟着图一样
在博文中我会将复杂点用最为简单容易理解的话术来解，例如定义的变量，为了让人理解可以是随你换的，我给它叫aa bb xiaohong等。。。
认识 TypeScript
官网解释：TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
我们可以将 TypeScript理解成加强版的JavaScriptES6、ES7、ES8等新语法标准，它都是
支持的,ts在编译阶段就会提示是否报错，第一次赋值变量如果不指定类型，会自动类型推论
很多公司并不是不想使用ts，因为很多人无法使用ts完成项目，有挺多的人刚开始将 ts使用成了any类型
数组里面统一的类型叫数组，不统一叫元组，如果没接触过ts，看不懂没关系，往下看，看到最后看不懂请揍我！
建议去撸一遍官方文档5分钟上手TypeScript · TypeScript中文网 · TypeScript——JavaScript的超集
下载Ts
- TypeScript最终会被编译成JavaScript来运行，所以我们需要搭建对应的环境：
# 安装命令
npm install typescript -g
# 查看版本
tsc --version
编写了TypeScript之后可以直接运行在浏览器上，编写了TypeScript之后可以直接运行在浏览器上那就需要用到ts-node
- 另外ts-node需要依赖 tslib 和 @types/node 两个包：
npm install ts-node -g
npm install tslib @types/node -g
现在，我们可以直接通过 ts-node 来运行TypeScript的代码：
ts-node xxx.ts使用 ts
JavaScript类型
定义类型 string
let message: string = 'Hello 活在风浪里。。'
- 发现什么异样了吧，对ts就是类型严格，在变量声明前就规定好了类型，
- ts在编译阶段就会提示是否报错
- 第一次赋值变量如果不指定类型，会自动类型推论，例如你写10就是number类型，现在是string类型，因为你写的是字符串啊
- 注意：这里的string是小写的，和String是有区别的
string是TypeScript中定义的字符串类型，String是ECMAScript中定义的一个类 - 如果我们给message赋值非string的值，那么就会报错
定义类型 number
在开始就说了它支持es6、es7...ES6新增了二进制和八进制的表示方法，而TypeScript也是支持二进制、八进制、十六进制的表示：
let num1: number = 100 // 十进制
let num2: number = 0b100 // 二级制
let num3: number = 0o100 // 八进制
let num4: number = 0x100 // 十六进制
console.log(num1, num2, num3, num4) // 100 4 64 256
定义类型 Array
第一种 常用
const uname: string[] = [] ;
第二种 react jsx 中有冲突
const uname: Array<string> = []定义类型 boolean
let flag: boolean = true
定义类型 Symbol
在ES5中，如果我们是不可以在对象中添加相同的属性名称的，比如下面的做法
const userinfo = {
uname: 'holle',
uname: 'holle' // 报错 不可以在对象里定义相同属性
}
所以就可以用到es6的symbol
const uname= Symbol('uname')
const uname= Symbol('uname')
const info = {
[uname]: 'tom',
[uname]: 'tom'// 两个tom是不一样的
}
Es6引用了一种新的原始数据类型symbol，表示独一无二的值，js的第七种语言, 特点：symbol的值是唯一的，用来解决变量的问题，值不能与其他数据进行运算，创建symbol S要大写，直接传值使用symbol值是不一样的,使用函数对象 symbol.for 创建 的编号是一样的状态码
直接传两个相同的值使用symbol编号是不一样的
let s1 = Symbol('张三');
let s2 = Symbol('张三');
console.log(s1===s2); //false 不相等 虽然都是为张三服务但是内存编号是不一样的
定义类型 null和undefined
const aa: null = null
const bb: undefined = undefined
TypeScripte 类型 （5种）
定义类型 any
- 在某些情况下，我们确实无法确定一个变量的类型，并且可能它会发生一些变化，这个时候我们可以使用any类型
// 在不想给某些 变量 添加具体的数据类型时可以用any
let message: any = 'Hello World'
message = 123
message = true
message = {}
console.log(message)
定义类型 unknown
- unknown是TypeScript中比较特殊的一种类型，它用于描述类型不确定的变量
function str() {
return 'abc'
}
function num() {
return 123
}
// unknow 类型只能复制给 any 和 unknow 类型
// any 类型可以赋值给任意类型 ！！
const flag = true
let result: unknown
if (flag) {
result = str()
} else {
result = num()
}
console.log(result)
定义类型 void
- void通常用来指定一个函数是没有返回值的，那么它的返回值就是void类型：
function sum(num1: number, num2: number): void {
console.log(num1 + num2)//没有返回值，直接打印
}
sum(20, 30)
定义类型 never
- 如果一个函数中是一个死循环或者抛出一个异常，那么写void类型或者其他类型作为返回值类型都不合适，我们就可以使用never类型。never 表示永远不会发生值的类型
function bar(): never {
throw new Error()
}定义类型 tuple
- 数组中通常建议存放相同类型的元素，不同类型的元素是不推荐放在数组中。（可以放在对象或者元组中）根据索引可获取对应的值
const info: [string, number, number] = ['why', 18, 1.88]
const name = info[0]
const age= info[1]数据类型
对象类型、接口都可以规定对象的形状
//对象类型
function obj (num: { x: number; y: number }) {
console.log(num.x)
console.log(num.y)
}
// num('123') //报错
// num({ x: '123', y: '123' }) // 报错
obj({ x: 123, y: 321 })//类型传入正确
接口
interface InfoType {
name: string
age: number
}
const obj: InfoType = {
name: 'tom',
age: 18
}
可选类型
//对象类型
function obj (num: { x: number; y?: number }) {// y 非必传
console.log(num.x)
console.log(num.y)
}
obj({ x: 123, y: 321 })//类型传入正确
obj({ x: 354})// 正确联合类型
function obj ( v : number | string) {
if (typeof v === 'string') {
console.log(v) // abc
} else {
console.log(v) // 123
}
}
obj(123)
obj('abc')// 传这两种类型都可以，联合类型就是将多种类型用 管道符 串联
类型断言
- 在开始说过，默认不指定类型，就会自动的断言类型
更新中。。。
2022 / 3 / 2
