typescript 入门

1、Ts起步 环境安装与基本代码

1.1 node.js

可以官网安装 也可以腾讯软件安装

1.2 TypeScript 编译器安装

npm i typescript -g

1.3 ts文件创建和编译

执行tsc -init 初始化出一个tsconfig.json 配置文件

新建一个后缀为 '.ts' 的文件 并编写如下代码

interface Animal {
    name: string,
}
function getAnimalName(dog: Animal):string {
    return dog.name
}
let dogName = getAnimalName({ name: 'xiaohuang' })

console.log(dogName)

执行tsc name.ts 生成 name.js

执行node name.js 输出 ’xiaohuang'

1.4 ts-node直接执行ts文件

npm i ts-node -g

ts-node name.ts

2、ts 类型声明

2.1 interface

interface Animal {
    name: string,
    age?: number,
    readonly height: number,
    getName(): string

}
function getAnimalName(dog: Animal): string {
    return dog.name
}
const dog: Animal = {
    name: 'xiaoHuang',
    age: 12,
    height: 35,
    getName() {
        return this.name
    }
}
//dog.height=2 设置的时候会报错 因为只读
let dogName = getAnimalName(dog)
console.log(dog.getName())
console.log(dogName)

2.2 type

type Animal = {
    name: string,
    readonly age: number,
    getName(): string
}

let dog: Animal = {
    name: 'xiaoHua',
    age: 12,
    getName() {
        return this.name
    }
}
console.log(dog.getName())

//几乎和interface 一样
// 不一样的用法
interface Car{
    color:string
}
type MyCar = Car

2.3 class

class Car {
    color = 'red';
    getColor() {
        return this.color
    }
    getInfo() {
        return 'color: ' + this.color
    }
}

//类继承类
class BigCar extends Car {
    size = "Big";
    getInfo() {
        return super.getInfo() + ' size:' + this.size
    }
}

const myBigCar = new BigCar();
console.log(myBigCar.getInfo())


//类继承接口
interface Tree {
    name: string,
    getType(): string
}

class AppleTree implements Tree {
    name: string = 'ApplerTree';
    getType(): string {
        return 'apple'
    }
}