学习笔记

Appearance

基础 ​

TypeScript

环境 ​

安装 typescript ​

sh
npm install typescript -g
npm install typescript -g
sh
pnpm add typescript -g
pnpm add typescript -g
sh
yarn global add typescript
yarn global add typescript

运行 ​

先编译、再运行

tsc index.ts、node index.js

或者使用 ts-node 直接运行

sh
npm install -g ts-node
npm install -g ts-node

类型注解和类型推断 ​

类型注解 ​

我们告诉 TS 变量是什么类型

ts

// 类型注解
const count: number = 1
const www: string = 'www'

// 类型注解
const count: number = 1
const www: string = 'www'

类型推断 ​

TS 会自动的去尝试分析变量的类型

ts

// 类型推断
const count = 1
const www = 'www'

// 类型推断
const count = 1
const www = 'www'

如果 TS 能够自动分析变量类型，我们就什么也不需要做了

如果 TS 无法分析变量类型的话，我们就需要使用类型注解

静态类型 ​

可以更好的判断变量的属性及内容

基础静态类型 ​

number、string、null、undefined、symbol、boolean、void

ts
const count: number = 1
const www: string = 'www'
const count: number = 1
const www: string = 'www'

对象类型 ​

ts

// 对象类型
const my: {
    name: string
    age: number
} = {
    name: 'weiGuo',
    age: 25
    // sex: 'man',
}

// 对象类型
const my: {
    name: string
    age: number
} = {
    name: 'weiGuo',
    age: 25
    // sex: 'man',
}

数组类型 ​

ts

// 1、包含普通类型
const list: number[] = [1, 2, 3]
const list1: Array<number> = [1, 2, 3]
const list2: {
    [index: number]: number
} = [1, 2, 3]
const multiArr: (number | string)[] = ['1', 1] // 多个类型

// 2、包含对象类型
// 2.1、类型别名(type alias)
type Info = {
    name: string
    age: number
}

const infoList: Info[] = [
    {
        name: 'forguo',
        age: 25
    }
]

// 2.2、类进行定义
class InfoClass {
    name: string | undefined
    age: number | undefined
}

const infoList2: InfoClass[] = [
    {
        name: 'forguo',
        age: 25
    }
]

// 1、包含普通类型
const list: number[] = [1, 2, 3]
const list1: Array<number> = [1, 2, 3]
const list2: {
    [index: number]: number
} = [1, 2, 3]
const multiArr: (number | string)[] = ['1', 1] // 多个类型

// 2、包含对象类型
// 2.1、类型别名(type alias)
type Info = {
    name: string
    age: number
}

const infoList: Info[] = [
    {
        name: 'forguo',
        age: 25
    }
]

// 2.2、类进行定义
class InfoClass {
    name: string | undefined
    age: number | undefined
}

const infoList2: InfoClass[] = [
    {
        name: 'forguo',
        age: 25
    }
]

元组类型 tuple ​

数组中的每个元素类型的位置给固定住了，这就叫做元组

ts

const xiaojiejie1: [string, number] = ['teacher', 28]

// 二维数组
const xiaojiejies: [string, string, number][] = [
    ['dajiao', 'teacher', 28],
    ['liuying', 'teacher', 18],
    ['cuihua', 'teacher', 25]
]

const xiaojiejie1: [string, number] = ['teacher', 28]

// 二维数组
const xiaojiejies: [string, string, number][] = [
    ['dajiao', 'teacher', 28],
    ['liuying', 'teacher', 18],
    ['cuihua', 'teacher', 25]
]

类类型 ​

code
ts

// 1、基本使用
class Person111 {
    public name: string
    constructor(name: string) {
        this.name = name
    }
}

const person111 = new Person111('www')
console.log(person111.name)

// 2、简写
class Person222 {
    constructor(public name: string) {}
}
const person222 = new Person222('http')
console.log(person222.name)

// 3、类继承中的构造器写法
class PersonA {
    constructor(public name: string) {
        // 这里就不用再去 this.name = name;
    }
}

class Teacher extends PersonA {
    constructor(name: string, public age: number) {
        super(name)
    }
}

console.log(new Teacher('罗翔', 18))

// 4、typescript中类的Getter、Setter和static的使用
class XiaoJieJie {
    public readonly _name: string
    constructor(name: string, private _age: number) {
        this._name = name
    }
    // ** get
    get age() {
        return this._age
    }
    // ** set
    set age(age: number) {
        this._age = age
    }
    say() {
        return 'I am ' + this._age + 'years old' // XiaoJieJie.prototype.say = function
    }
    // ** 不用 new 出对象就可以使用类里的方法
    static sayLove() {
        return 'I Love you' // XiaoJieJie.sayLove = function
    }
}
const www1 = new XiaoJieJie('www', 18)
www1.age = 20
// _name 不可以修改
www1._name = 'www'; 
console.log(www1.age)
// 直接访问
XiaoJieJie.sayLove();

// 5、抽象类的使用
abstract class Waiter {
    abstract skill(): any // 没有具体方法，这里不写括号
}

class PrimaryWaiter extends Waiter {
    skill() {
        console.log('初级Waiter')
    }
}

class IntermediateWaiter extends Waiter {
    skill() {
        console.log('中级Waiter')
    }
}

class SeniorWaiter extends Waiter {
    skill() {
        console.log('终极Waiter')
    }
}

// 1、基本使用
class Person111 {
    public name: string
    constructor(name: string) {
        this.name = name
    }
}

const person111 = new Person111('www')
console.log(person111.name)

// 2、简写
class Person222 {
    constructor(public name: string) {}
}
const person222 = new Person222('http')
console.log(person222.name)

// 3、类继承中的构造器写法
class PersonA {
    constructor(public name: string) {
        // 这里就不用再去 this.name = name;
    }
}

class Teacher extends PersonA {
    constructor(name: string, public age: number) {
        super(name)
    }
}

console.log(new Teacher('罗翔', 18))

// 4、typescript中类的Getter、Setter和static的使用
class XiaoJieJie {
    public readonly _name: string
    constructor(name: string, private _age: number) {
        this._name = name
    }
    // ** get
    get age() {
        return this._age
    }
    // ** set
    set age(age: number) {
        this._age = age
    }
    say() {
        return 'I am ' + this._age + 'years old' // XiaoJieJie.prototype.say = function
    }
    // ** 不用 new 出对象就可以使用类里的方法
    static sayLove() {
        return 'I Love you' // XiaoJieJie.sayLove = function
    }
}
const www1 = new XiaoJieJie('www', 18)
www1.age = 20
// _name 不可以修改
www1._name = 'www'; 
console.log(www1.age)
// 直接访问
XiaoJieJie.sayLove();

// 5、抽象类的使用
abstract class Waiter {
    abstract skill(): any // 没有具体方法，这里不写括号
}

class PrimaryWaiter extends Waiter {
    skill() {
        console.log('初级Waiter')
    }
}

class IntermediateWaiter extends Waiter {
    skill() {
        console.log('中级Waiter')
    }
}

class SeniorWaiter extends Waiter {
    skill() {
        console.log('终极Waiter')
    }
}

typescript中类的访问类型 ​

  • public 默认 允许在类的内部和外部被调用

  • private 只允许在类的内部被调用，外部不允许调用

  • protected 允许在类内及继承的子类中使用

函数类型 ​

ts

// 函数类型
const func: () => string = () => 'www'
const say: (string) => (string) = (name) => {
    return name
}

// 函数类型
const func: () => string = () => 'www'
const say: (string) => (string) = (name) => {
    return name
}

函数参数和返回类型定义 ​

简单类型定义 ​
ts

// 简单类型定义
function getTotal(one: number, two: number): number {
    return one + two
}
getTotal(1, 2)

// 简单类型定义
function getTotal(one: number, two: number): number {
    return one + two
}
getTotal(1, 2)
无返回值的定义: void ​
ts

// 无返回值的定义: void
function hello(): void {
    console.log('hello')
}
hello()

// 无返回值的定义: void
function hello(): void {
    console.log('hello')
}
hello()
never返回值类型 ​
ts

// never返回值类型

// 抛出异常
function errFun(): never {
    throw new Error()
    console.log('error')
}

// 死循环
function whileFun(): never {
    while (true) {}
    console.log('error')
}

// never返回值类型

// 抛出异常
function errFun(): never {
    throw new Error()
    console.log('error')
}

// 死循环
function whileFun(): never {
    while (true) {}
    console.log('error')
}
函数参数为对象 ​

解构赋值的类型注解

ts
// 函数参数为对象
function add({ one, two }: { one: number; two: number }): number {
    return one + two
}
const total = add({ one: 1, two: 2 })
// 函数参数为对象
function add({ one, two }: { one: number; two: number }): number {
    return one + two
}
const total = add({ one: 1, two: 2 })

注：

在 ts当中，如果对象参数为字面量，会强制校验多余参数，参数为变量则不会

接口 ​

interface ​

基本使用、可选属性、任意属性、只读属性

ts

// 定义一个接口
interface IPeople {
    name: string
    age?: number // 可选属性
    [propName: string]: any // 这个的意思是，属性的名字是字符串类型，属性的值可以是任何类型。
    say?(): string
}

const weiGuo: IPeople = {
    name: 'weiGuo',
    // age: 25
    // sex: 'man',
}

// 定义一个接口
interface IPeople {
    name: string
    age?: number // 可选属性
    [propName: string]: any // 这个的意思是，属性的名字是字符串类型，属性的值可以是任何类型。
    say?(): string
}

const weiGuo: IPeople = {
    name: 'weiGuo',
    // age: 25
    // sex: 'man',
}

接口和类的约束 ​

ts

// 应用这个接口
class People implements IPeople {
    name = ''
    sex = ''
    say() {
        return this.name
    }
}

// 应用这个接口
class People implements IPeople {
    name = ''
    sex = ''
    say() {
        return this.name
    }
}

接口间的继承 ​

ts

/* 接口只是在 TypeScript 里帮我们作语法校验的工具，编译成正式的js代码，就不会有任何用处了。 */
interface ITeacher extends IPeople {
    teach(): string
}

/* 接口只是在 TypeScript 里帮我们作语法校验的工具，编译成正式的js代码，就不会有任何用处了。 */
interface ITeacher extends IPeople {
    teach(): string
}

类型别名和接口的区别 ​

类型别名可以直接给类型，比如string，而接口必须代表对象。

interface可以继承类，type不能

ts

type Name = string
const people1: Name = 'name'

type Name = string
const people1: Name = 'name'

tsconfig.json ​

tsc init ​

初始化tsconfig文件

more

泛型 ​

甘公网安备 号
Copyright © 2016 - 2023  forguo
总访问量， 总访客数
平台公约