问:优秀的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