我的美丽实习日记day4
目录
参考资料
本日简短总结
- 学习了TypeScript
- 根据Alita教程写一个王者荣耀资料库
TypeScript学习笔记
安装TypeScript
yarn add typescript
TypeScript原始数据类型
-
string
-
number
-
boolean
-
void
-
null
-
undefined
-
symbol
-
标准库
- 内置对象的声明文件
-
中文错误消息（不推荐）
- tsc --locale zh-CN
Object（非原始类型）
const foo: object = function () {}
const obj: { foo: number, bar: string} = { foo: 123, bar: 'string'}
Array
const arr1: Array<number> = [1,2,3]
const arr2: number[] = arr1
元祖类型（Tuple Types）
- 明确元素数量和各个元素类型的数组
const tuple: [number, string] = [12, 'miao']
// 下标访问
const age: number = tuple[0]
// 解构
const [age, name2] = tuple
枚举类型
enum PostStatus {
// 不指定值会从0开始累加
// 也可以用字符串枚举，但如果使用字符串则全部都要赋值
Draft = 0,
Unpublished = 1,
Published = 2
}
let state = PostStatus.Draft
- 枚举类型会入侵代码（指改变编译结果）
- 编译过后是一个双向键值对对象
- 可以考虑使用常量枚举const，这样就不会被编译成双向键值对对象
函数类型
// 问号? => 可选参数 TS自带的
function func1 (a: number, b?: number): string {
return 'func1'
}
// 等号= => 默认值 ES6特性
function func2 (a: number, b: number = 10): string {
return 'func2'
}
// 剩余参数 ES6特性(rest可以是任意命名)
function func3 (a: number, b: number, ...rest: number[]): string {
return 'func2'
}
任意类型（AnyType）
function stringift(value: any): string {
return JSON.stringify(value)
}
隐式类型推断
let age = 18
age = 'string' // 报错
- 但是尽可能还是标记变量
- 如果无法推断的话会变成any
类型断言
- 有时候TypeScript无法推断变量类型，但是开发者可以明确知道
const nums = [110, 120, 119, 112]
const res = nums.find(i => i > 0)
const num1 = res as number
const num2 = <number>res // JSX下不能使用
接口（interfaces）
- 约束对象的结构
interface Post {
title: string,
content: string
// 可选成员
subtitle?: string
// 只读成员
readonly summary: string
}
function printPost (post: Post) {
console.log(post.title)
console.log(post.content)
}
//动态类型
interface namelist {
[index: number]:string,
[index: string]:string
}
let list2: namelist = {
1: 'balabala',
bala: 'balabala'
}
类
class Person {
name: string // = 'initname'
// 私有变量
private age: number
// 保护变量，只读
protected readonly gender: boolean
constructor(name: string, age: number) {
this.name = name
this.age = age
this.gender = true
}
sayHi (msg: string) {
console.log(msg)
}
}
类与接口
interface EatAndRun {
eat (food: string): void
run (distance: number): void
}
class Person implements EatAndRun {
eat(food: string) {
}
run(distance: number) {
}
}
class Animal implements EatAndRun {
eat(food: string) {
}
run(distance: number) {
}
}
抽象类
// 抽象方法
abstract class Animal {
eat (food: string): void {
}
// 抽象类
abstract run (distance: number): void
}
泛型（Generics）
function createNumberArray (length: number, value: number): number[] {
return Array<number>(length).fill(value)
}
function createArray<T> (length: number, value: T): T[] {
return Array<T>(length).fill(value)
}
类型声明
为了兼容JavaScript，有些包被引入的时候可以声明类型
- 有些包会提供类型声明依赖，可以不用声明
import { camelCase } from 'lodash'
declare function camleCase (input: string): string
const res = camelCase('hello world')
回调函数
function func1 (num: number): void {
console.log(num)
}
function func2 (this: any, num: number, func: (num: number) => void){
func.call(this, num)
}
func2(1, func1)
TypeScript-React学习笔记
- React.FC<>的在typescript使用的一个泛型，FC就是FunctionComponent的缩写，是函数组件。
- 里面传入的泛型P是参数列表声明
Alita学习
- yarn alita g pages 页面名可以新增页面
- alita是约定式的，很多东西都不用配置，很方便
