环境参数： typecript: 4.2.3
typescript的作用
为什么要使用typescript?
- 类型推演与类型匹配
- 开发编译时报错
- 极大程度的避免了低级错误
- 支持JavaScript最新特性（包含ES6/7/8）
二、语法
1、变量声明：let、const
2、TypeScript类型
- 基础类型：boolean、string、 number、 array、null、undefined、object
==新增==: tuple、 enum、 void、 never、 any - 高级类型：union 组合类型、Nullable 可空类型、Literal 预定义类型
3、常见用法
// 1、数组
let list1: Array<number> = [1, 2, 3]
let list2: number[] = [1, 2, 3]
let list3 = [1, 2, ,3]
let list4 = [1, '2', '3']
let list5: any[] = [1, 'b', true]
// 元祖（tuple）
// 固定长度和固定类型的特殊数组。注意声明元祖一定要指定类型。
let person1: [number, string] = [1, 'a']
person1[0] = 'b' // 报错
// 2、联合（Union）和字面量（Literal）类型
let union2: number | string | string[]
union2 = true // 报错
let literal: 1 | '2' | [1, 2]
literal = [1, 2, 3] // 报错
// 3、枚举类型Enum
enum Color {
red = 'red1',
blue = 'blue',
green = 'green'
}
console.log('Color', Color.red) // red1
// 4、any 和 unknown
let randomValue: any = 666
randomValue = true
randomValue()
randomValue.toUpperCase()
// any，可理解为忽略类型检查；unknow比any更加保险一点，保证类型安全
let randomValue: unknown = 666
randomValue = true
randomValue() // 报错
randomValue.toUpperCase() // 报错
// 5、void、undefined、 never
function printResult (): undefined {
console.log('lalala')
return
}
function thorwError (message: string, errorCode: number): never {
throw {
message,
errorCode
}
}
4、类型适配（类型断言） Type Assertions
let message: any
message = 'abc'
message.endsWith('c')
let ddd = (<string>message).endsWith('c')
let ddd2 = (message as string).endsWith('c')
5、函数类型
// 函数类型
let log = (message: string, code?: number, desc: string = '404') => {
console.log(message, code, desc)
}
log('helloWord')
// Object对象类型
const person = {
firstName: 'hello Word',
lastName: 'gao',
age: 18
}
console.log(person.hobby) // 报错
6、 接口、类、访问修饰符
// interFace接口
let drawPoint = (point: Point) => {
console.log({x: point.x, y: point.y })
}
drawPoint({x: 123, y: 456})
drawPoint({x: '123', y: '456'}) // 报错
interface Point {
x: number,
y: number
}
// Class类
interface IPoint {
x: number,
y: number;
drawPoint: () => void;
getDistances: (p: IPoint) => number
}
class Point implements IPoint {
constructor(public x: number, public y: number = 2) {
}
drawPoint = () => {
console.log('X:', this.x, 'Y:', this.y)
}
getDistances = (p: IPoint) => {
return Math.pow(p.x - this.x, 2) + Math.pow(p.y - this.y, 2)
}
}
const point = new Point(24, 50)
point.drawPoint()
// 访问修饰符
public 、 private, protected
// 私有变量懒人包
7、泛型
数据类型 + 尖括号
// 基本泛型
let list1: Array<number> = [1, 2, 3]
// 动态泛型
let makeTuple = <T, Y>(x: T, y: Y) => [x, y];
const v1 = makeTuple(1, 'one')
const v2 = makeTuple(true, 1)
