昨天的课程应该来说对0基础的小伙伴还是挺不友好的,包括对于我这种学过一点点ts的... 笔记的话我就按照某马的课程顺序来写,大致总结一下吧. 如果感兴趣的可以去看原视频,大家想看的自己去b站搜,道长yyds.(也可私聊我,我分享一下~)
其实我个人是挺不喜欢ts的,因为我不喜欢java()...跟java像的我都不怎么能接受.不过既来之则安之,以后公司要用你也不能不写是不是.所以如果你也跟我一样的想法的话,我还是建议大家一句,真的要学,他可能让你觉得很讨厌,但是真的很有用...
ts是?为什么要用ts?
What: ts其实就是戴着镣铐的js,这个镣铐就是类型.它是一门强类型语言,变量一旦声明,就不能改变它的类型!
Why: 跟用js相比,用ts能够尽早发现错误,方便大型项目的维护.
ts的数据类型
- js中的数据类型: 简单数据类型有：Number，String，Boolean，null，undefined，Symbol 复杂数据类型有：Object（包括：Array ， Function）
- ts新增: void类型 接口类型 元组类型 字面量类型 枚举类型
下面简单说一下这些类型,至于泛型的话,随缘更新...(根据推荐视频的顺序做了一些笔记,大家可以参考一下,当然我比较建议就是自己写笔记,至少跟着老师写一遍)
1-10
let x: number = 1
x = 2
// x = '4' 不能赋值给字符串类型，因为已经制定了数字类型。
console.log(x);
let x1 = '1' // 自动识别类型。
x1 = '2'
let arr:number[] = [1, 2, 3] // 数字数组
// arr.push(9) √ 只能加入数字！
let arr1: string[] = ['1', '2', '3']
let arr2: (string | number)[] = [1, '2', 3] // (string | number) 表示联合类型。联合类型只能.出共有的方法
let x2: string | number = 3
x2 = '1000'
// 类型别名
type t = null | undefined
let arr3: t[] = [null, undefined]
type t1 = (boolean | string)[]
let arr4: t1 = [true, false, 'true']
let arr5: object[] = [{}, {}, { name: 'zs', age: 18 }, []]
// 数组属于对象....
11-18
// function add(num1: number, num2: number):number {
// return num1 + num2
// }
// 单独指定参数和返回值的类型
const add = (num1: number, num2: number): number => {
return num1 + num2
}
console.log(add(1, 2));
type SubFn = (num1: number, num2: number) => number
// 小注意点:类型别名只能给函数表达式和箭头函数用!
// 下面这种方式就是用类型别名同时指定参数 返回值的类型
const sub:SubFn = (num1, num2) => {
return num1 - num2
}
console.log(sub(1, 2));
// void就是无返回值.
// 可以给函数指定undefined的返回值类型,但是你指定之后必须要返回undefined,没有返回undefined就报错,所以一般都用void.
// 2023.8.4 现在不报错.但是定义成undefined不是好习惯,一般都是用void
const test = (): void => {
console.log(1111);
}
test()
// const test2 = ():undefined => {
// console.log(11111111);
// }
// test2()
// 可选参数.(可以全部可选) 但是要注意,不能前面可选 后面却不可选,这是错误的.
const print = (name?: string, gender?: string): void => {
if (name && gender) {
console.log(name,gender);
}
}
print('zs', '男')
print('zs')
print()
// 对象类型 (自动推断)
// let obj = {
// name: 'zs',
// age: 18
// }
// 定义对象的类型
let obj: {
name: string,
age: number,
sayHi: (content: string) => void
} = {
name: 'zs',
age: 38,
sayHi(content) {
console.log("哥们一点也不想学习",content);
}
}
console.log(obj.age);
obj.sayHi("cnm")
// 类型别名写法
type p = {
name: string,
age: number,
sayHi: (content: string) => void
}
const p1: p = {
name: 'zs',
age: 38,
sayHi(content) {
console.log("哥们一点也不想学习",content);
}
}
// 接口interface (只能用来约束对象)
interface IPerson {
name: string,
age: number,
sayHi: () => void,
}
const p2: IPerson = {
name: 'zs',
age: 999,
sayHi() {
console.log('hello');
},
}
p2.sayHi()
// 接口的继承?
interface IStudent extends IPerson {
score: number,
sleep:() => void
}
const p3: IStudent = {
name: 'ls',
age: 99,
score: 59,
sayHi() {
console.log('hello');
},
sleep() {
console.log('zzz');
},
}
p3.sleep()
// 高频面试题: type如何实现继承??
type Person = {
name: string,
age: number
}
type Student = {
score: number,
sleep:() => void
} & Person
// & Person 就 相当于继承了哈. |的话就是表示或的意思
const p4: Student = {
name: 'ww',
age: 29,
score: 59.5,
sleep() {
console.log('每天我睡十二个小时,我是废物');
},
}
p4.sleep()
}
19-22
// 元组类型:
// const arr: number[] = [111.1,111.2] 需求:数组表示经纬度.这样并不能完全达到需求
const arr: [number, number] = [111.1, 123.2] // [number,number] 就是元组类型 (限制长度)
// 类型推论,ts会帮你推断类型,所以能省略可以省略类型. 但是 也有时候必须手动指定 (类型断言!)
// 字面量类型. 顾名思义 字面量其实可以是 1 也可以是 '1' 也可以是 false
// 这边老师举了一个例子(其实就是限制取值范围的)
type Direction = '上' | '下' | '左' | '右'
function changeDirection(direction: Direction) {
console.log(direction);
}
changeDirection('上')
// 枚举 enumerate x {}
enum Milktea {
traditional = '经典奶茶',
pudding = '布丁奶茶'
}
function changeTaste(milktea: Milktea) {
console.log(milktea);
}
changeTaste(Milktea.pudding)
补充: 枚举的意义? 就是(我认为的) 限制你这个参数只能是某个对象(枚举对象)里面的一个属性. 另外,如果枚举里面只写属性名的话他们默认的值是数字...(就可以是 0 1 2 3 也可以是0 100 200 300...)
我是很少放自己写的笔记出来的,主要是写的没有非常大众化,够自己理解,但是别人可能看着没有那么爽(?)所以各位看官轻喷.
