1. TypeScript是什么
TypeScript是微软开发的一种强类型语言,它不允许改变变量的数据类型,除非进行强制的类型转换,它是JavaScrip的一个超集,它遵循最新的ES6脚本语言规范,TypeScript扩展了JavaScript的语法,任何已经存在的JavaScipt程序都可以在不经任何改动的情况下在TypeScript环境运行
2. 基本数据类型的使用
boolean
let isBoolean: boolean = false
string
let str1: string = 'typescript'
let str2: string = `hello ${str1}`
number
TypeScript里的所有数字都是浮点数,这些浮点数的类型都是number,除了支持十进制和十六进制字面量,TypeScript还支持ES5中引入的二进制和八进制字面量
let num: number = 27
let hexLiteral: number = 0xf00e
let binaryLiteral: number = 0b1011
let octalLiteral: number = 0o744
array
let arr1: Array<number> = [1, 2] // 这个数组只能是 number 类型
let arr2: number[] = [1, 2] // arr1 和 arr2 是等价的
let arr3: Array<number|string> = [1, 2, '3'] // 多种类型的 Array
tuple
let tuple: [number, string]
tuple = [0, '1'] // OK
tuple = ['1', 0] // Error
enum
默认情况,索引从0开始
enum e {
a,
b,
c
}
// 从0索引开始取值
console.log(e.a) // 0
console.log(e[0]) // a
如果有赋值
enum e {
a = 1,
b,
c
}
// 后面的会依次递增 b = 2
any
任何类型,加上any就跟JavaScript效果一样
let anyData: any = 27
anyData = 'nayData'
anyData = false
anyData = [1]
void
void类型与any类型相反,表示没有任何类型,函数没有返回值的时候,其返回值的类型是void
function voidData(): void {
console.log("This function return voidData")
}
null 和 undefined
在TypeScript中,null和undefinedl自己的类型分别为null和undefinedl,默认情况下null和undefined是所有类型的子类型,就是说可以把null和undefined赋值给其他类型的变量
let n: null = null
let u: undefined = undefined
let num: number = null
never
never表示永远不会有返回值的类型, 是任何类型的子类型,也可以赋值给任何类型,然而除了never本身,没有类型是never的子类型或者可以赋值给never类型
function
// 参数是 number,返回值也是 number
function func1(x: number, y: number): number {
return x + y
}
func1(1, 2)
// 可选参数和默认参数
function func2(x = 123, y?:number) {
return x + y
}
func2()
// 拓展运算符,参数不固定,可选参数放后面
function func3(firstName: string, ...optionalName: string[]) {
return firstName + " " + optionalName.join(" ")
}
object
const obj: {x: number, y: number} = { x: 1, y: 1}
obj.y = 2
interface
interface Inter {
label: string
}
function func(obj: Inter) {
console.log(obj.label)
}
// 传入的对象满足上面的必要条件,就是被允许的
const myObj = { label: 'typescript', other: 'other' }
func(myObj)
断言
interface Result {
data: List[]
}
function render(result: Result) {
result.data.forEach((a) => console.log(a))
}
let result1 = {
data: [
{ id: 1, name: 'A' }
]
}
render(<Result>{
data: [
{ id: 2, name: 'A' }
]
})
可选属性
interface Inter {
str: string;
num?: number; // 可有可无
}
类型别名
type t = (x: number, y:number) => number
let res: t = (x, y) => x + y
class
class Dog {
// 私有化,函数不能调用,也不能继承
// private constructor(name: string) {
// this.name = name
// }
// 受保护的,函数不能被实例化,只能被继承
// protected constructor(name: string) {
// this.name = name
// }
constructor(name: string) {
this.name = name
}
name: string
age?: numebr // 可选属性
run() {}
private call() {} // 私有属性,子类和实例不能调用
protected eat() {} // 受保护的,不能被实例化,只能被继承
readonly weight: number = 10 // 只读属性,必须在声明时或构造函数里被初始化
static food: string = 'shit' // 静态成员,只能通过类名调用,不能实例调用,子类可以调用
}
继承
class hashiqi extends Dog {
// 构造函数加属性
constructor(name: any, public color: string) {
super(name)
this.color = color
}
sleep() {
console.log('hashiqi sleep')
}
}
抽象类 abstract
抽象类可以作为其他派生类的基类,一般不会直接被实例化,也不允许实例化,可以抽离一些事物的公共特性,有利于代码的复用和扩展,可以实现多态
// 抽象类
abstract class Animal {
constructor() {}
eat() {
console.log('eat something')
}
// 抽象方法
abstract sleep(): void
}
class Dog extends Animal {
constructor() {
super()
}
name: string
sleep() {
console.log('dog sleep')
}
}
let dog = new Dog()
dog.eat() // 子类实例化,可以调用父类的方法
dog.sleep() // 子类实例化,可以自己的方法
// 实现多态
class Cat extends Animal {
sleep() {
console.log('car sleep')
}
}
let cat = new Cat()
let amimals: Animal[] = [dog, cat]
amimals.forEach(item => {
item.sleep()
})
接口的继承
interface Inter1 {
str: string
func1(): void
}
interface subInter1 extends Inter1 {
subFunc(): void
}
// 多继承
interface Inter2 {
func2(): void
}
interface subInter2 extends Inter1, Inter2{}
泛型
泛型既可以约束类型,又可以灵活的使用各种类型,而不需要使用any
// 函数泛型
function func<T>(value: T): T {
console.log(value)
return value
}
// 调用方式--指定类型
func<string>('1')
func<number>(1)
// 调用方式--类型推断
func('1')
// 接口泛型
interface Inter<T> {
(value: T): T
}
let myInter: Inter<number> = Inter
myInter(1)
// 类泛型
class classGeneric<T> {
func(value: T) {
console.log(value)
return value
}
}
let classGeneric = new classGeneric<number>()
classGeneric.func(1)