随笔分类 - typescript
贪吃蛇游戏源码
摘要://定义食物类food class Food { //定义一个属性表示食物对应的元素 element: HTMLElement; constructor() { //获取页面中的food元素并赋值给element this.element = document.getElementById('foo
ts17贪吃蛇项目_1
摘要:使用ts写一个贪吃蛇的项目 第一步:配置webpack和tsconfig,这里可以使用之前配置过的 第二步:在之前配置好的webpack中加入css打包时的配置模块 运行npm i -D less less-loader css-loader style-loader下载相关依赖并在module.r
TS16泛型
摘要:// function(a:any){ // return a // } /* 定义函数或者类时,如果遇到类型不明确就可以使用泛型 */ //泛型可以同时指定多个 function fn<T, K>(a: T, b: K): T { return a } //可以直接调用具有泛型的函数 fn(10,
ts15属性的封装
摘要:(function () { //定义一个表示人的类 class Person { /* 可以在属性前面添加属性的修饰符 public:public修饰的属性可以在任意部分访问和修改,是默认修饰符。 private:private私有属性只能在类的内部访问和修改 通过在类中添加方法使得私有属性可以被
ts14抽象类
摘要:(function () { abstract class Animal { //abstract 开头的类是抽象类 //抽象类和其他类区别不大只是不能用来创建对象 //抽象类就是专门用来被继承的类 //抽象类中可以添加抽象方法 name: string; age: number; construc
ts14_super关键字
摘要:(function () { class Animal { name: string constructor(name: string) { this.name = name } sayhello() { console.log("动物在叫"); } } class Dog extends Anim
ts13_继承
摘要:(function () { //定义一个dog类 class Animal { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } sayhe
ts12_构造函数
摘要:构造函数,会在对象创建时调用,new关键字会执行constructor class Dog{ name:string; age:number; //构造函数,会在对象创建时调用,new关键字会执行constructor constructor(name:string,age:number){ //在
ts11_类的简介
摘要:类可以理解为创建对象的模板 对象是由两部分组成的:属性和方法 所以类也是有属性和方法组成的: 1.属性 直接定义的属性是实例属性,需要通过对象的实例去访问 const per = new person() per.name 使用static修饰的属性是静态属性(类属性),可以直接通过类去访问 per
ts10_使用webpack打包ts文件3
摘要:1.为了让编译后的JS文件能给兼容更多的浏览器我们还需要配置babel 运行命令npm i -D @babel/core @babel/preset-env babel-loader core-js来安装相关插件 2.安装完成之后在webpack.config.js的module选项的rule下进行
ts09_使用webpack打包ts文件2
摘要:1.为了对html文件进行自动生成和一些资源的自动按需引入还需要对webpack继续进行一些配置,首先需要安装html-webpack-plugin插件帮助我们自动生成html文件 运行npm i -D html-webpack-plugin 2.引入html-webpack-plugin cons
ts08_使用webpack打包ts文件
摘要:1.新建项目使用npm init -y在根目录生成packge.json文件,管理包 2.使用npm安装webpack相关工具 npm i -D webpack webpack-cli typescript ts-loader,ts-loader起到一个整合ts和webpack的作用 3.配置web
ts07_ts的编译选项2
摘要:compileOptions编译器配置选项中一些关于语法检查的配置选项 "allowJs": false ,//是否对JS文件进行编译,默认false "checkJs": false,//是否对JS文件进行检查,默认false "removeComments": false,//是否移除注释,默认
ts06_ts的编译选项1
摘要:tsconfig.json是ts编译器的配置文件,ts编译器可以根据它的信息来对代码进行编译。 可以执行 tsc --init命令自动生成 常用的配置选项: include:定义希望被编译文件所在的目录,用来指定哪些ts文件需要被编译 默认值:["**/*"], 示列:["./src/**/*"],
typesc04_ts中的类型2
摘要:ts复杂类型: object:任意的js对象 array:任意js数组 tuple:元组,ts新增类型,固定长度的数组 enum:枚举,ts中新增的类型 /* ts复杂类型: object:任意的js对象 array:任意js数组 tuple:元组,ts新增类型,固定长度的数组 enum:枚举,ts
typesc03_ts中的数据类型1基本数据类型
摘要:ts类型中的基本数据类型: 1.number:任意数字 2.string:任意字符 3.Boolean:布尔值 4.字面量:限制变量的值就是该字面量的值 5.any:任意类型,设置类型为any后相当于对改变量关闭了ts的类型检测,使用ts时不建议使用any类型(any类型可以赋值给任意类型) 6.u
typescript02_声明变量
摘要://声明一个变量a同时声明他的类型为number let a:number //a的类型生命为number,在以后的使用过程中a只能是数字 a=1 //a = 'hello'此行代码会报错,因为a的类型是number不能赋值为字符串 let b :boolean = true //声明完变量直接赋值
typescript_01搭建环境
摘要:typescript是什么? 以JavaScript为基础构建的语言,可以在任何支持JavaScript的平台中执行,ts不能被js解析器直接执行需要先编译成js文件,ts是一个js的超集,拓展了js并添加了类型,使Js变成一个静态类型的语言。 typescript开发环境搭建: 1.安装nodej
TypeScript解决无法重新声明块范围变量“XXX”问题
摘要:在学习typescript过程中,两个不同的文件相同名称的变量会出现无法重新声明块范围变量“XXX”报错。 解决方法在文件的尾部加上export {}; 这样这样TS就会认为这些文件都是独立的模块了