React+TypeScript组件开发（一）TypeScript类型
虞修平
- TypeScript 基础类型
// 布尔类型
let isDone: boolean = false
// 数值类型
let age: number = 20
let binaryNumber: number = 0b1111
// string 类型
let firstName: string = 'viking'
let message: string = `Hello, ${firstName}, age is ${age}`
// undefined 和 null 是所有类型的子类型
let u: undefined = undefined
let n: null = null
let num: number = undefined
- any类型和联合类型
// any 允许赋值为任何类型
let notSure: any = 4
notSure = 'maybe it is a string'
notSure = true
notSure.myName
notSure.getName()
// 当有明确的类型时应该避免使用any 会丧失类型检查的作用 并且没有类型方法的提示了
// 一个变量可以是 number 或者 string （限制这俩个类型 其他不行）
let numberOrString: number | string = 234
numberOrString = 'abc'
- Array和Tuple
// Array
let arrOfNumbers: number[] = [1, 2, 3, 4]
arrOfNumbers.push(5)
function test() {
console.log(arguments) // array like object
arguments.length
arguments[0]
// 但是没有数组的一些方法 例如 arguments.forEach 等
let htmlCollection: Node
}
// Tuple 合并了多个类型的数组
let user:[string, number] = ['viking', 1]
- Interface
// Interface接口
/**
* 1 对对象的形状（shape）进行描述
* 2 对类 （class） 进行抽象
* 3 Duck Typeing（鸭子类型）
*/
interface IPerson {
name: string;
age: number;
gender?: string; // 可选属性
readonly id: number; //只读属性
}
let viking: IPerson = {
name: 'viking',
age: 20,
id: 1234
}
// viking.id = 1111 错误 只读属性不能继续赋值
const viking2 = 1111; // 只读
5.函数类型和推断
// 函数类型和推断 参数类型 返回类型 类型判断 参数默认值 可选参数
function add(x: number, y: number = 10, z?: number): number {
if(typeof z === 'number') {
return x + y + z
}
return x + y
}
let result = add(2, 4)
// 函数表达式 add2 为 函数类型 自动推断类型为function
const add2 = function (x: number, y: number = 10, z?: number): number {
if(typeof z === 'number') {
return x + y + z
}
return x + y
}
// => 声明 返回值类型
const add3: (x: number, y: number, z?: number) => number = add
let str = 'str'
// str = 123 错误 TypeScript 会在没有类型的时候推测出一个类型
- Class
// Class
// 面向对象的基本术语
// 类 （Class）: 定义了一切事物的抽象特点
// 对象(Object): 类的实例
// 面向对象（oop） 三大特性： 封装、继承、多态
class Animal {
name: string;
constructor(name: string) {
this.name = name
}
run() {
return `${this.name} is running`
}
}
const snake = new Animal('snake')
snake.run()
// 继承
class Dog extends Animal {
bark() {
return `${this.name} is barking`
}
}
const bati = new Dog('bati')
bati.run()
bati.bark()
// 方法的重写
class Cat extends Animal {
constructor(name) {
super(name) // 必须super调用父类的方法
}
run() {
return `Miao , ${super.run()}`
}
}
const miao = new Cat('xixi');
miao.run()
// 多态 不需要了解是什么类型，只需要调用方法，就会执行正确的方法，
7 Class2
// Class
// 面向对象的基本术语
// 类 （Class）: 定义了一切事物的抽象特点
// 对象(Object): 类的实例
// 面向对象（oop） 三大特性： 封装、继承、多态
class Animal {
name: string;
private age: number; // 只有当前类中可以使用
readonly sex: boolean; // 只读 不可以写
protected gender: boolean; // 父类和子类中可以使用
static categoies: string[] = ['mammal', 'bird'] // 静态属性
static isAnimal(a) { // 静态方法
return a instanceof Animal
}
constructor(name: string) {
this.name = name
}
run() {
return `${this.name} is running`
}
}
const snake = new Animal('lily')
console.log(snake.name)
snake.name = 'lucy'
// snake.age 属性为私有属性 只能在父类中访问
console.log(Animal.isAnimal(snake)) // true
// 继承
class Dog extends Animal {
bark() {
return `${this.name} is barking`
}
}
const bati = new Dog('bati')
bati.run()
bati.bark()
// 方法的重写
class Cat extends Animal {
constructor(name) {
super(name) // 必须super调用父类的方法
}
run() {
return `Miao , ${super.run()}`
}
}
const miao = new Cat('xixi');
miao.run()
// 多态 不需要了解是什么类型，只需要调用方法，就会执行正确的方法，
// 修饰符 默认的属性都是 public 在任何地方都可以访问到
- 接口实现 接口继承
// 俩个类共同的接口
interface Radio {
switchRadio(triggerL: boolean) : void // 参数 返回值
}
// 单独的接口
interface Battery {
checkBatteryStatus();
}
// 接口继承
interface RadioWithBattery extends Radio {
checkBatteryStatus();
}
class Car implements Radio {
switchRadio(triggerL: boolean) {
}
}
class Cellphone implements Radio, Battery {
switchRadio(triggerL: boolean){
}
checkBatteryStatus(){
}
}
// 俩个类都有共同的方法 可以提取出来一个interface
9 枚举
const enum Direction {
Up,
Down,
Left,
Right
}
// 枚举默认从0开始赋值 自动递增
// 也可以给定第一个元素一个数字 自动递增
// 赋值常量字符串
// 枚举对象可以通过数组取到他的key字符串 Direction[0] 输出 'Up'
10 泛型
function echo<T>(arg: T):T {
return arg
}
const result = echo('string')
function swap<T,U>(tuple:[T,U]):[U,T] {
return [tuple[1],tuple[0]]
}
const result2 = swap(['string', 123])
11 . 约束泛型
function echoWithArr<T>(arg: T[]):T[] {
console.log(arg.length)
return arg
}
interface IwithLength {
length: number
}
function echoWithLength<T extends IwithLength> (arg: T):T {
console.log(arg.length)
return arg
}
const str = echoWithLength('string')
const arr = echoWithLength([1,2,3])
const obj = echoWithLength({length: 1})
12 类型断言和别名
// type aliases 类型别名
type PlusType = (x:number, y:number) => number
function sum(x:number, y:number):number {
return x + y
}
const sum2: PlusType = sum
type NameResolver = () => string
type NameOrResolver = string | NameResolver
function getName(n: NameOrResolver):string {
if( typeof n === 'string') {
return n
}else {
return n()
}
}
// type assertion 类型断言
function getLength(input: string | number): number {
// const str = input as String
// if(str.length) {
// return str.length
// } else {
// const number = input as Number
// return number.toString().length
// }
if((<string>input).length) {
return (<string>input).length
} else {
return input.toString().length
}
}
13 声明文件 引入第三方 @types typeconfig.json typesearch查找三方库
类似资料：