这周在 segmentfault 上学习
Typescript课程，总共26节课，目前上到第七节课。这周也在设计自己写的记账小程序，目前原型设计、数据库设计都已完成，下周进行开发工作。
一、开发环境的搭建
初始化工程
用npm init -y 创建一个 package.josn
新建目录
|-src soource 源代码
|-- tools 工具 与业务无关的工具方法
|-- utils 工具 与业务有关的工具方法
|-- config 配置文件
|-- assets 静态资源
|-- img
|-- font
|-- api 公共的接口
|-- build 放 webpack 的配置
|-- typings 把typescript语法转es5
安装依赖包
typescript、tslint
- typescript 给我们提供一个 tsc 命令
tsc --init 初始化 typescript 配置文件 tsconfig.josn - tslint 相对于eslint，是规范 ts 的写法
webpack 、webpack-cli、 webpack-dev-server
- webpack 主要是是将 ts 语法转化为 es5
- webpack-cli 提供 webpack 命令
- webpack-dev-server 开发的时候起一个 web 服务器
二、基础数据类型
布尔类型
let bool : boolean
bool = false
字符串类型
let str : string
str= 'sss'
数值类型
let num : number
num = 123
数组类型
let arr : number[]
let arr1 : Array
let arr2 : Array
let arr3 : (number | string)[]
元组类型
元组和数组类型很像，规定长度 和 类型
let tuple : [string, number, boolean]
tuple = ['sss', 123, true]
枚举类型
通过缩影找名称，通过名称找缩影 用 enum 定义
enum Std: {
name,
age,
sex
}
console.log(Std.name)
console.log(Std[0])
任意类型
let life : any
life = 'cdd',
life = 1243,
life = fasle
void类型
没有类型，当方法没有返回值的时候设置 void 类型
fuction say (): viod {
console.log('ssss')
}
let say = (): viod => {
console.log('ssss')
}
null 和 undefinded 类型
let nu : null
nu = null
let unde ： undefinded
unde = undefinded
never 类型
表示永远不存在的类型（报错，一直执行）
const errorFunc = (): never => {
throw new Error('bzc是小猪')
}
const infiniteFun = (): never => {
while (true) {}
}
object 类型
let obj : object
obj = {
name: 'dreamlin517',
sex: 'women'
}
类型断言
就是指定类型
const getLength = (target: string | number): number => {
if ((target).length || (target as string).length === 0) {
return (target).length
} else {
return target.toString().length
}
}
三、 symbol
表示独一无二的值，表示跟任何值都是不同的值
-
const s = symbol()()传参数只能是 string 和 number 类型 - symbol 的值不可以跟其他类型做运算
- symbol 的值可以转换字符串和布尔值
symbol 可以作为属性名 好处是 symbol 是独一无二的可以保证不会被别的变量和属性名覆盖
四、接口
定义接口
用 interface 定义接口，接口名首字母一般大写
// 给对象字面量定义接口
interface Vegetable {
name: string,
quantity： number
}
const apple = ({name, quantity}: Vegetable ) => {
return ` ${quantity} ${name} `
}
apple ({
name: 'xss',
quantity: 123,
})
可传参可不传参
interface Vegetable {
type: string,
color?： string // ? 表示这个参数可传可不传
}
const apple = ({type, color}: Vegetable ) => {
return ` A ${color ? color + ' ' : ''}${type}`
}
apple ({
color: 'red',
type: 'apple'
})
apple ({
type: 'apple'
})
多传参
interface Vegetable {
color?: string,
type: string,
// [porp: string]: any 第一种
}
getVegetables({
color: 'red',
type: 'tomato',
size: 3
} as Vegetable) //第二种： 类型断言
//第三种
const Vegetable = {
color: 'red',
type: 'tomato',
size: 3
}
getVegetables(Vegetable)
接口继承
用 extends
interface Animal {
name: string,
}
interface Dog extends Animal {
leg: number
}
interface cat extends Animal {
color: string
}
const dog: Dog = {
leg: 4,
name: 'hghg'
}
只读属性
// 只读 readonly
interface ArrInter {
0: number,
readonly 1: string // 在属性前加 readonly
}
let arrr: ArrInter = [1, 'a']
// arrr[1] = 'b'
给函数定义类型
用 type 定义
type SumFunc = (a: number, b: number) => void
const sum: SumFunc = (a, b) => {
console.log(a + b)
}
sum(122, 123)
// sum('a', 'b')
五、函数
定义函数类型
type Add = (x: number, y: number) => number
let add: Add = (x, y): number=> {
return x + y
}
可传参可不传参
参数要设置默认值 且符合该参数定义的类型
type Add2 = (arg1: number, arg2: number, arg3?: number) => number
let add2: Add2 = (x, y, z = 0) => x + y + z
add2(1, 2)
add2(1, 2, 3)
剩余参数
type Add3 = (aeg1: number, ...arg: number[]) => number
let add3: Add3 = (x, y, z) => x + y + z
add3(1, 2, 3, 4)
重载
就是参数可以是两个或多个数据类型
type StrorNum = string | number
const add7 = (x: StrorNum): StrorNum[] => {
if (typeof x === 'string'){
return x.split('')
} else {
return x.toString().split('').map(item => Number(item))
}
}
add7(123)
add7('abc')
六、泛型
// 其中 T 是泛型变量
const getArry = (value: T, times: number): T[] => {
return new Array(times).fill(value)
}
console.log(getArry(1, 3).map((item) => item)) // 如果在这里不指定类型的话 ts会根据你具体传的参数来判断类型类型
七、其他
y = y || 0 或 当y为true返回前面的值，当y为false返回后面的值
y = y && 0 且 当true为返回后面的值，当y为false返回前面的值