TypeScript 类型
ES6的数据类型
Boolean
Number
String
Array
Function
Object
Symbol
undefined
null
TypeScript新加的数据类型
void
any
never
元组
枚举
高级类型
1,数组
//数组 两种等价声明
let arr1:number[] = [1,2,3]
let arr2:Array<number> = [1,2,3]
2,元组
//元组 //是一种特殊的数组,限定了数组的类型和个数
let tup ...
webpack配置typescript项目
有时候我们需要创建一个单单使用typescript的项目,如:我们想使用typescript开发一个网页游戏,如果使用ts文件,每次写完都要tsc的方式输出相应的js文件,我们想能不能通过使用webpack的方式自动编译自动输出。具体实现方式如下:
首先创建一个项目文件,如果没有安装typescript: cnpm install -g typescrip ...
typescript 中的 this 类型
typescript中,this 也是一种类型,一个计算器的例子:
class Counter{
constructor(public count:number = 0){}
add(value:number){
this.count += value
return this
}
subtract(value:number){
this.count -= value
return this
}
}
let counter = new Counter(10)
console.log(counter.c ...
uni-app 创建typescript 项目 并且引入 vant
前言
在小程序上应用uniapp 然后引入ts ,你说香不香,哈哈哈
好了 先来一发教程:
官网下载 软件 https://uniapp.dcloud.io/
我创建的TS项目是,用cli 命令行创建的
全局安装vue-cli
npm install -g @vue/cli
创建uni-app
使用正式版(对应HBuilderX最新正式版)
vue create -p dcloudio/uni-preset-vue my-t ...
create-react-app + Typescript脚手架搭建
1、创建使用ts的新项目
yarn create react-app my-test-app --template typescript
2、配置tsconfig.json
(1)在根目录下新建文件tsconfig.extend.json
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@/*": ["./*"]
}
}
}
(2)在tsconfig.json中新增
"extends": "./t ...
Vue 使用typescript, 优雅的调用swagger API
Swagger 是一个规范和完整的框架,用于生成、描述、调用和可视化 RESTful 风格的 Web 服务,后端集成下Swagger,然后就可以提供一个在线文档地址给前端同学。
前端如何优雅的调用呢?
入门版
根据文档,用axios自动来调用
// 应用管理相关接口
import axios from '../interceptors.js'
// 获取应用列表
export const getL ...
webpack集成ts(typescript)
typscript是什么?
Typescript是一种基于静态类型检查的强类型语言
弱类型:javaScript是动态运行的弱类型语言,例如:
var a=1;
a='hello'
强类型 列如:
let str: string = 'hello ts';
str=1下面会给你显示:不能将类型“999”分配给类型“string”。今年要发布vue3.0源码 ...
typescript中使用泛型
介绍
这里引入官网一段介绍,了解个大概:
软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。
在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的 ...
typescript定义函数类型
函数类型
为函数定义类型
给函数定义类型,包括对参数和返回值的类型定义:
function add(arg1: number, arg2: number): number {
return arg1 + arg2
}
// 箭头函数
const add = (arg1: number, arg2:number):number => {
return arg1 + arg2
}
如果这里省略参数的类型,typescript 会默认这个参数是 any 类型;如 ...
在React中使用Typescript
在React中使用Typescript
最近学习的技术发现TS越来越多,于是自己尝试做了几个Demo实战,发现TS上手不是很难,但是一旦出现错误很难百度到对应的文档,而且在react中也不会使用ts来编写
跟着这个文章走,内容可能会很长,一步一步去写,保证你的React项目可以使用TS来编写
本人写的一个 TS+Hooks简易版实战
1. 创建一个React的TS ...
TypeScript箭头函数(第3篇)
TypeScript箭头函数(第3篇)
//不带参数的写法
let fun1 = ()=> 1;
let fun2 = ()=> 1+2;
let fun3 = ()=> {return 1+2;};
let fun4 = ()=> {let a = 1; return a+2;};
fun1() //就这么调用,如果要看值,需要console输出。例如: console.log(fun1())
//一个参数的写法(没有指定返回类型的时 ...
TypeScript联合类型 接口
TypeScript联合类型
联合类型表示取值可以为多种类型中的一种
如下所示
/**
* 联合类型
*/
var muchtype:string|number="hello";
muchtype=1;
这一块我们必须使用string或者number都支持的类型,那么下面我们可以进行调用扩展方法toString()
/**
* 联合类型
* 注意:如果说我们使用字符串的length属性那么我们需要注意 ...
从零搭建React+TypeScript的后台项目(一)
这段特殊时期,在家闲暇时间比较多,就系统学习了React+Ts的语法逻辑,以及如何从零搭建一个简易的后台管理项目。技术栈包括React、React-router-dom、Redux、Axios、TypeScript、Ant Design。刚好公司项目重构也是基于React+ts开发的。话不多说,直接开撸。
一、create-react-app构建TypeScript项目
yarn create react-ap ...
【开源】使用Angular9和TypeScript开发RPG游戏
RPG系统构造
通过对于斗罗大陆小说的游戏化过程,熟悉Angular的结构以及使用TypeScript的面向对象开发方法。
Github项目源代码地址
人物
和其他RPG游戏类似,游戏里面的人物角色大致有这样的一些属性:生命值,魔法值(魂力),攻击力,防御力,速度。RPG游戏中的角色随着等级的提高,这些属性都会提升,属性提升的快慢则取 ...
typescript 文档
TypeScript 要点知识整理
本篇主要是整理一下 typescript 相关的知识点。
什么是 TypeScript
TypeScript 是 JavaScript 的一个超集,主要提供了类型系统和对 ES6 的支持。
安装 TypeScript 及编译 Ts 文件
npm -g install typescrip // 全局安装 typescript
全局安装 typescript 后即可在终端使用 tsc 命令了,编译 ts ...
VSCode使用ts-node 调试TypeScript代码
TS-NODE
可以看出这些不足都来自于一个根本原因,运行之前需要编译。后来我就发现了一个很强大的工具ts-node,来看下ts-node的简介:
TypeScript execution environment and REPL for node.
简单的说就是它提供了TypeScript的运行环境,让我们免去了麻烦的编译这一步骤。最简单的例子,在注册ts-node之后,我们 ...
typescript中interface和type的区别
https://github.com/SunshowerC/blog/issues/7
大家使用 typescript 总会使用到 interface 和 type,官方规范 稍微说了下两者的区别An interface can be named in an extends or implements clause, but a type alias for an object type literal cannot.An interface can have multiple merged declarations, but a type a ...
给萌新的 TS custom transformer plugin 教程——TypeScript 自定义转换器插件
xuld/原创
Custom transformer (自定义转换器)是干什么的
简单说,TypeScript 可以将 TS 源码编译成 JS 代码,自定义转换器插件则可以让你定制生成的代码。比如删掉代码里的注释、改变变量的名字、将类转换为函数等等。
TypeScript 将 TS 代码编译到 JS 的功能,其实也是通过内置的转换器实现的,从 TS 2.3 开始,TS 将此 ...
项目常用eslint配置(Vue/React/TypeScript)
项目常用eslint配置(Vue/React/TypeScript)
记录一下常用的eslint配置。
Vue项目常用eslint配置
需要安装依赖(Vue这里使用standard扩展和vue插件,所以需要安装)
{
"devDependencies": {
"babel-eslint": "^10.0.2",
"eslint": "^6.1.0",
"eslint-config-imperative-es6": "^2.1.0",
...
TypeScript Array(数组)
TypeScript Array(数组)
数组对象是使用单独的变量名来存储一系列的值。
数组非常常用。
假如你有一组数据(例如:网站名字),存在单独变量如下所示:
var site1="Google"; var site2="Runoob"; var site3="Taobao";
如果有 10 个、100 个这种方式就变的很不实用,这时我们可以使用数组来解决:
var si ...