typeScript的webpack配置
目录先上最终代码初始化写一段ts代码webpack配置需要安装的依赖代码tsconfig.json配置在tsx中使用js的模块引入方式使用第三方模块
先上最终代码
webpack.config.js
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/index.tsx',
module: {
rules: [
{
test: ...
Ant Design Pro V5 从服务器请求菜单(typescript版)
【前言】
找了很多Admin模板,最后还是看中了AntDesignPro(下文简写antd pro)这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的):
官网地址:https://pro.ant.design/index-cn
该套模板是使用了React开发框架作为基础,AntDesign(蚂蚁金服开源UI组件库)作为UI库,集成了Dva,Umi,Mock等库,如果不是很 ...
vue cli4构建基于typescript的vue组件并发布到npm
基于vue cli创建一个vue项目
首先安装最新的vue cli脚手架,
npm install --global @vue/cli
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\@vue\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wante ...
typescript书写规范
各位看官git上求个星星! 我有趣的前端笔记!!(webpack,babel,typescript,手撕排序算法等持续更新中!!)
基础用法
1、变量类型
英文
示例
注意
布尔值
boolean
let isDone: boolean = false;
数字
number
let decLiteral: number = 0xf00d;
number为浮点型,可8,10,16进制
字符串
string
let name: st ...
typescript中使用Object.keys
开发中使用typescript的时候,经常会遇到使用 Object.keys 这个方法报错的情况,报错如下:
错误场景1
var foo = {
a: '1',
b: '2'
}
var getPropertyValue = Object.keys(foo).map(item => foo[item]) // 这里会有typescript的错误提示
错误场景2
var foo = {
a: '1',
b: '2'
}
function ...
TypeScript 中的':' 和'?:'的区别
在rect中, 有下面的代码:
export type ReactComponentLike =
| string
| ((props: any, context?: any) => any)
| (new (props: any, context?: any)& ...
vue cli4.0项目引入typescript
现有的项目是采用vue cli4.0脚手架生成的,现在想要引入typescript。
1.执行安装命令
npm install --save-dev typescript
npm install --save-dev @vue/cli-plugin-typescript
2.根目录下新建 tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true, ...
TypeScript 对象的类型-接口
一、什么是接口
在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型
接口是一系列抽象方法的声明,是一些方法特征的集合,第三方可以通过这组抽象方法调用,让具体的类执行具体的方法
TypeScript 中接口除了可用于对类的一部分行为进行抽象以外,还可用于对「对象的形状(Shape)」进行描述
举个例子:
interf ...
react项目添加typescript类型定义文件 .d.ts
最近用react + antd mobile + typescript开发项目,其中使用了rc-form这个包,可惜没有typescript版本,导致找不到类型定义。
一起来重温一下这个经典的错误。
D:/Code/test/src/pages/me/register/RegisterTest.tsx
TypeScript error in D:/Code/test/src/pages/me/register/RegisterTest.tsx(5,28):
File 'D:/Code/test/ ...
如何在vscode上直接运行typescript?
在学习typescript的过程中发现在vscode上不能很好地的输出typescript的运行结果,需要先将typescript编译为javascript,在通过node执行js文件得到结果,执行过程如下
// greeter.ts
function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
console.log(user)
在命令行上执行
tsc greeter ...
typescript | typeScript 笔记
typescript学习网址 https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/tsconfig.json.html
------------------------------------------------------------------------------------
1、tsconfig.json 配置文件
compilerOptions属性具体解释
https://www.tslang.cn/docs/handbook/compile ...
React , TypeScript, CSS Module , Less , Antd 遇到的坑
序
因为React 本身的脚手架自身在webpack中已经做了对CSS Module 的配置,因最近遇到了很多坑,所以从头整理了一遍
使用版本
"react": "^16.13.1",
"antd": "^4.4.0",
"typescript": "~3.7.2",
"webpack": "4.42.0",
"less": "^3.11.3",
"less-loader": "5.0.0",
一. 安装和初始化---React and TypeSc ...
typeScript Class VS interface
在面向对象(OOP)编程中,经常会使用到class(类)和interface(接口)。在TypeScript(以下简称TS)中也引入了类和接口的概念,使得TS强大的类型检测机制更加完善。就像我们所知道的,一个类是一堆抽象概念的集合,我们可以从类的构造方法中创建出享有共同属性和方法的对象。一个接口所描述的是一个对象相关的属性和方法,但并 ...
typescript+vue 常见报错
报错1. main.ts报错( Cannot find module './App.vue'.)
原因: typescript不能识别.vue文件
解决办法: 引入vue的typescript declare库在tsconfig.json中加入
其中,types是自己延伸的一些declare
下面的是vue中的types拓展改后的tsconfig{"exclude": [ "node_modules" ], "compilerOptions": { "allowSyntheticDefaultImpor ...
TypeScript(11): Array(数组)
数组对象是使用单独的变量名来存储一系列的值。假如你有一组数据(例如:网站名字),存在单独变量如下所示:var site1="Google";
var site2="Runoob";
var site3="Taobao";如果有 10 个、100 个这种方式就变的很不实用,这时我们可以使用数组来解决:var sites:string[];
sites = ["Google","Runoob","Taobao"]这样看起 ...
Typescript的interface、class和abstract class
interface,class,和abstract class这3个概念,既有联系,又有区别,本文尝试着结合官方文档来阐述这三者之间的关系。
1. Declaration Merging
Declaration Type
Namespace
Type
Value
Namespace
X
X
Class
X
X
Enum
X
X
Interface
X
Type Alias
X
Function
X
Variable
X
首先我们来讲一 ...
vscode 配置 typeScript+nodejs 和 react+typeScript 开发环境
电脑环境:需要先安装好
1. nodejs (官网下载安装,安装8.0以上版本, 使用 node --version 查看是否安装成功)
2. npm (安装好node时跟着就安装好了npm,使用 npm -v 查看是否安装成功)
3. typescript (打开终端命令,输入 npm install -g typescript ,输入 tsc -v 查看 ...
TypeScript tsconfig 配置文件
tsc --init 会生成一个 tsconfig.json 的配置文件,tsc 没法用需要全局安装 typescript。这个文件是对 ts 的编译配置文件。我们新建一个文件夹,生成 tsconfig.json,将
"removeComments": true,
这个配置放开,在编译的时候,把注释去掉。
demo.ts
const tt: string = 'hahah'; // this is a ts val
然后执 ...
编译TypeScript(TypeScript转JavaScript)
编译TypeScript(TypeScript转JavaScript)
生成相关说明,TypeScript编译器如何编译.ts文件。 指定模块代码生成:“none”、“commonjs”、“amd”、“system”、“umd”、“es2015”或“esnext”。 作者: 志银(ZainChen); 更新日期: 2019.02.22
1.配置tsconfig.json文件
tsconfig.json
文件配置说明
&nbs ...
TypeScript类型检查机制
类型检查机制:TypeScript编译器在做类型检查时,所秉承的一些原则。
作用:辅助开发,提高开发效率。
一、类型推断
不需要指定变量的类型(函数的返回值类型),TypeScript可以根据某些规则自动地为其推断出一个类型。
1,基础类型推断
let a //let a: any
let b = 1 //let b: number
let c = [] //let c: any[]
let c2 = ...