开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情
typescript
全局安装Typescript
npm install -g typescript
检查是否成功
tsc -v
vscode自动编译
1.生成配置文件 tsconfig.json
tsc --init
2.修改tsconfig.json配置
"outDir": "./js"
'strict': false,
3.启动监视任务
终端 ->运行任务 -> 监视tsconfig.json文件
类型注解
function getList(id: string) {
return id;
}
console.log(getList('111'));
接口
interface User {
name: string,
age: number
}
function getUser(user: User) {
return user.name + user.age
}
let user = {
name: 'zs',
age: 16
}
console.log(getUser(user));
类
TypeScript里的类只是一个语法糖,本质还是Javascript函数的实现
webpack打包TS
npm install -D typescript webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin ts-loader cross-env
rules: [
{
test: /.tsx?$/,
use: 'ts-loader',
include: [reslolve('src')]
}
]
配置打包的命令
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js"
"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
基础类型
//布尔值
let isDone: boolean = false;
//数字
let a1: number = 10;
//字符串
let name: string = 'zs';
//undefined和null
let u: undefined = undefined;
let n: null = null;
默认情况下null和undefined是所有类型的子类型
//数组
- let arr: number[] = [1,2,3]; //元素后面加上[]
- let arr1: Array = [2,3,4]; //使用数组泛型
//元祖i 元祖类型允许表示一个已知元素数量和类型的数组,各个元素的类型可以不相同
let t1: [string, number]
t1 = ['zs', 20]
//访问一个已知索引的元素,会得到正确的类型
console.log(t1[0].substring(1))
//枚举 enum类型 对javascript标准数据类型的补充
enum Age {
10,
20,
30
}
//枚举的值从0开始
let age: Age = Age.10 //0
let age: number = Age[2] //20
//any 不清楚类型的变量指定一个类型, 可以使用any标记
let sure: any = 4;
数组中不知道类型时也可以使用any
let list: any[] = [1, true, 'zs']
//void类型
当一个函数没有返回值时,通常会使用void类型
//表示没有任何类型,表示不能是undefined和null之外的值
function fn() :void {
}
声明的变量,只能为undefined 和null
let str: void = undefined
//object类型
表示非原始的类型
除了number, string 与boolean之外的类型
Object.create
