typescript语法讲解都写在这里了,通过注释就能看懂ts到底怎么使用,代码从上往下看,知识点都是由易到难
“写文案讲解代码真的很累不如直接手撸来得快,今天偷懒通过注释的形式讲解看不懂的地方多看两遍就懂”
// -------------> 定义类型
let num: number = 0
let str: string = '123'
let bol: boolean = true
let all: any = false
// -------------> 联合类型
let angle: number | string;
angle = "123";
angle = 123;
// -------------> 数组类型
let numer: number[] = [13,1,2,1]
let objArr: object[] = [{name: 123}, {name: 254}]
// objArr.push(123) // 错误的添加类型
objArr.push({name: '123'})
let arr: [number] = [1] // 写了一个类型就只能对应一个数字
// -------------> 元祖 (理解为数组中定义多个不同类型)
let oArr: [number , string] = [123, "123"] // 元祖定义类型的先后顺序赋值也必须一致
// -------------> interface接口 声明对象
interface person {
name: string;
age: number;
address ?: string; // 可选
readonly mail: string; // 必读
}
let mine: person = {
name: 'frank',
age: 23,
// address: '中国重庆',
mail: '123@qq.com',
}
// -------------> 函数类型
const add = (x: number = 1,y:number, z?:number): number => {
if(typeof z === 'number') {
return x + y + z
} else {
return x + y
}
}
const add2: (x:number, y:number ,z: number) => number = add //函数类型声明
const add3: (x:number, y:number) => number = add
// let str1 = '123'
// str1 = 123 // 类型推断
// -------------> class 类型
class Animal {
name: string;
constructor (name: string) {
this.name = name
}
run () {
return `${this.name} 在奔跑`
}
}
const snake = new Animal('蛇')
// 继承
class Dog extends Animal {
bark () {
return `${this.name} is barking`
}
}
const xiaogou = new Dog('bob')
console.log(xiaogou.run())
console.log(xiaogou.bark())
// 多肽
class Cat extends Animal {
constructor(name: string) {
super(name) // 必须使用子类super调用父类name
console.log(this.name)
}
run () {
return `猫咪, 在玩耍` + super.run ()
}
static stateFun () {
return '静态属性'
}
}
const maomao = new Cat('maomao')
console.log(maomao.run())
console.log(Cat.stateFun())
// 类修饰符
/**
public 公用的
private 只能在类里进行访问,子类都无法访问属性
protected 子类可以访问,只能父类和子类访问
readonly 只读,不可修改
static 静态方法定义
**/
// -------------> 类和接口
interface Radio {
switchRadio (triggerL: boolean): void;
}
// 接口继承
interface RadioWithBatter extends Radio {
checkBatterStatus(): void;
}
class Car implements Radio{
switchRadio () {
}
}
//实现(implements) 继承多个接口
class Cellphone implements RadioWithBatter {
switchRadio () {
}
checkBatterStatus() {
}
}
// -------------> 枚举
enum Direction {
one = 0, // 数字类型赋值必须从0开始,否则未Direction[0]输出undfined
two = 1,
three = 2,
four = 3
}
/**
* 枚举有点双向映射的意思
*/
console.log(Direction[3]) // four
console.log(Direction.one) // 0
const value = 2
if(value === Direction.three) {
console.log('bingo') // true
}
// -------------> 泛型 (ts难点)
// 概念如何做到函数在调用中的参数可以传入不同类型
function echo <T> (arg: T): T {
return arg
} // T是否传入什么类型
const result1 = echo('123')
const result2 = echo(123)
// 元祖类型参数
function swap <T, U>(tuple: [T, U]): [U, T] {
return [tuple[1] , tuple[0]]
}
const result3 = swap(['ts', 'hello'])
console.log(result3.join(','));
// 约束泛型
interface IWidthLength {
length: number
}
// 继承IWidthLength声明类型
function echoWidthLength<T extends IWidthLength>(arg: T): T {
return arg
}
const strFun = echoWidthLength('str')
const objFun = echoWidthLength({length: 1, a: 2})
const arrFun = echoWidthLength([1,2,3])
// echoWidthLength(123) //报错不能传number类型
// 对象泛型
interface KeyPair<T, U> {
key: T;
value: U
}
let kp1: KeyPair<number , string> = {
key: 1,
value: '123'
}
// 函数泛型
interface funPair<T> {
(x: T, y: T): T
}
function plus (x: number , y: number): number {
return x + y
}
function strPlus (val: string): string {
return `hello, ${val}`
}
const aBtn: funPair<number> = plus
const strBtn: funPair<string> = strPlus
// -------------> 类型别名
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 strNum = string | number // 也可以理解为将代码变得更可读
function strNumFun(val: strNum): number {
if(typeof val === 'string') {
return val.length
} else {
return val
}
}
// -------------> 类型断言 概念:你比系统更懂当前需要什么类型
function getLength(input: string | number): number {
// 第一种写法 用as来声明当前类型
// 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
}
}