关于前端:TypeScript-快速上手-基础语法篇笔记

36次阅读

共计 4796 个字符,预计需要花费 12 分钟才能阅读完成。

本篇内容不波及 TypeScript 装置以及配置,只波及 TypeScript 语法相干内容。不讲废话,简略间接。

1、原始类型

const a: string = 'foo'
const b: number = 100
const c: boolean = true
const d: void = undefined
const e: null = null
const f: undefined = undefined
const g: symbol = Symlol()

2、object 类型

object 并不单指对象,而是指除了原始类型以外的其余类型

const foo: object = function () {} // [] // {}
const obj: {foo: number,bar: string} = {foo: 123, bar: 'string'}

3、数组类型

// 第一种定义形式,元素类型设置为 *number*
const arr1: Array<number> = [1, 2, 3]
// 第二种定义形式,较为常见
const arr2: number[] = [1, 2, 3]

// 例子
function sum (...args: number[]) {
    // 传统做法是要判断传入的参数是否是数字,而 TypeScript 中只须要像下面这样对参数做一个类型注解,就行了
    return args.reduce(prev, current) => prev + current, 0)
}

sum(1, 2, 3, 'foo') // 这里传入了一个非数字的值就会报错

4、元组类型

元组就是一个 明确元素数量 明确元素类型 的数组

const tuple: [number, string] = [18, 'foo']
// const tuple: [number, string] = [18, 18] 类型不匹配,会报错
// const tuple: [number, string] = [18, 'foo', 'xxx'] 数量不匹配,会报错

// 拜访
const age = tuple[0]
const name = tuple[1]

// 解构
const [age, name] = tuple

5、enum 类型

// enum 对象的属性能够不必赋值,默认从 0 开始递增,也能够赋值 Draft = 5,前面的就从 5 开始递增
   也能够给具体的值,比方 Draft = 'xxx', 这样前面的属性都要给具体的值
enum PostStatus {
    Draft = 0,
    Unpublished = 1,
    Published = 2
}

const post = {
    title: 'Hello TypeScript',
    content: 'TypeScript is a typed superset of JavaScript.',
    status: PostStatus.Draft // 0 // 1 // 2
}

6、函数类型

// 申明式函数
// 参数 a 和 b 是 number 类型,函数返回是 string 类型,// 参数后带问号代表是可选参数
// 当参数数量不固定的时候能够应用 rest 运算符来承受参数,类型是一个值为 number 的数组
function func1 (a: number, b?: number,...rest: number[]): string {return 'func1'}

// 函数表达式定义函数
const func2 = function (a: number, b: number): string {return 'func2'}

// 如果把一个函数作为参数传递,相似 callback 函数。function fntD(callback: (bl: boolean) => boolean) {callback(true)
}
function callback(bl: boolean): boolean {console.log(bl)
    return bl
}
const dResult = fntD(callback)

7、任意类型 any

// value 能够承受任意类型
function stringfy (value: any) {return JSON.stringify(value)
}

stringify('string')
stringify(10)
stringify(true)

// foo 能够任意赋值
let foo: any = 'string'
foo = 100

8、隐式类型推断

// age 赋值为 number 类型
let age = 18 // number

age = 'string' // 会正告谬误,因为 age 是 number 类型

let foo // 没有赋值,就是 any 类型

foo = 100
foo = 'string'

9、类型断言 as

// 假设这个 nums 来自一个明确的接口
const nums = [110, 120, 119, 112]

// 这里 TypeScript 推断 res 的类型为 number|undefined
// 因为它并不知道这个 i 到底在数组中有没有
const res = nums.find(i => i > 0)

// 这里就会报错正告
const square = res * res

// 如果咱们间接 断言 这个 res 就是 number 类型
const num1 = res as number

// 这里就不会报错了
const square = res * res

10、接口 interface

接口用来约定对象的构造, 一个对象要实现一个接口,就必须领有这个接口中所蕴含的所有成员

interface Post {
    title: string
    content: string
}

function printPost (post: Post) {console.log(post.title)
    console.log(post.content)
}

printPost({
    title: 'Hello TypeScript',
    content: 'A JavaScript superset'
})

// 非凡的接口成员 可选成员 只读成员
interface Post{
    title: string
    content: string
    subtitle?: string // 加问号就是可选成员
    readonly summary: string // 加 readonly 就是只读成员
}

const hello: Post = {
    title: 'Hello TypeScript',
    content: 'A javascript superset',
    summary: 'a javascript'
}

hello.summary = 'other' // 会报错,因为 summary 是只读成员

// 动静成员
interface Cache {[prop: string]: string
}

const cache: Cache = {}

cache.foo = 'value1'
cache.bar = 'value2'

11、类 Class

Class Person {
    // 在这里赋值,和在构造函数中初始化必须两者选其一
    name: string // = 'init name' 这里能够间接初始化
    private age: number // 这里定义 age 为公有属性
    protected gender: boolean // 受爱护的类型
    readonly national: string // 只读属性,一经初始化,不可更改

    constructor (name: string, age: number) {
        // 须要在下面标注出构造函数中属性的类型
        this.name = name
        this.age = age
        this.gender = true
        this.national = national
    }

    sayHi (msg: string): void {console.log(`I am ${this.name}, ${msg}`)
        console.log(this.age)
    }
}

const tom = new Person('tom', 18)
console.log(tom.name) // tom
console.log(tom.age) // 报错,因为 age 是公有属性,所以拜访不到
console.log(tom.gender) // 报错,因为 gender 是受爱护的属性,这里拜访不到

// 在下方新申明一个类 student 继承与 Person
class Student extends Person {constructor (name: string, age: number) {super(name, age)
    console.log(this.gender) // 这里就一个拜访到 受爱护的属性 gender
}

12、类与接口

implements 实现

interface Eat {eat (food: string): void
}

interface Run {run (distance: number): void
}

// Person 类,实现了 Eat 和 Run 两个接口
class Person implements Eat, Run {eat (food: string): void {console.log(` 优雅的进餐:${food}`)
    }
    
    run (distance: number) {console.log(` 直立行走:${distance}`)
    }
}

// Animal 类,实现了 Eat 和 Run 两个接口
class Animal implements Eat, Run {eat (food: string): void {console.log(` 狼吞虎咽的吃:${food}`)
    }
    
    run (distance: number) {console.log(` 匍匐:${distance}`)
    }
}

13、抽象类

abstract 定义抽象类,抽象类只能被继承,不能通过 new 的形式创立实例对象

// 定义一个抽象类 Animal
abstract class Animal {eat (food: string): void {console.log(` 狼吞虎咽的吃:${food}`)
    }
    
    // 定义一个形象办法 run,能够不须要办法体。// 定义了形象办法之后,子类中必须实现这个形象办法
    abstract run (distance: number): void
}

class Dog extends Animal {run(distance: number): void {console.log('四脚匍匐', distance)
    }
}

const d = new Dog()
d.eat('嘎嘎') // 狼吞虎咽的吃:嘎嘎
d.run(100) // 四脚匍匐 100

14、泛型 Generics

泛型是指在定义接口函数类的时候,没有指定具体的类型,等到咱们在应用的时候再去指定具体的类型的这种特色

// 这里申明一个创立 number 类型数组的函数 creatNumberArray
function createNumberArray (length: number, value: number): number[] {
    // 这里的 Array 是 any 类型,所以要给它指定一个 Number 类型
    const arr = Array<number>(length).fill(value)
    return arr
}

// 这里申明一个创立 String 类型数组的函数 createStringArray
function createStringArray (length: number, value: string): string[] {const arr = Array<string>(length).fill(value)
    return arr
}

// 因为下面的两个函数代码有冗余,所以这里咱们能够应用 泛型
// 个别咱们应用 T 来作为泛型参数的名称,而后把函数中不明确的类型都改为 T 来做代表
function createArray<T> (length: number, value: T): T[] {const arr = Array<T>(length).fill(value)
    return arr
}

// 而后应用泛型的时候 传递 T 的类型
const res = creatArray<string>(3,'foo')

// const res = createNumberArray(3, 100)
// res => [100, 100, 100]

根底语法篇到这里完结,更多对于 TypeScript 的应用请关注我,继续为大家更新。

正文完
 0