• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

typescript入门

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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'
    }
}


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
用TypeScript开发了一个网页游戏引擎,开放源代码发布时间:2022-07-18
下一篇:
转载《TypeScript类型定义DefinitelyTyped》发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap