课程名称
课程章节
第2章 TypeScript 基础语法入门
- 2-6 基础类型快速入门（上） (16:22)
- 2-7 基础类型快速入门（中） (18:16)
- 2-8 基础类型快速入门（下） (15:02)
课程讲师
课程内容
掌握基础类型快速入门：
-
基础类型
-
数组类型
- 基本形式定义
- 范型方式定义
-
对象类型
-
联合类型 Union Type
-
类型别名
-
any类型
-
函数类型
-
接口类型
- 相对于类型别名，它拥有继承extends语法
- 同样的interface，会进行拼接
- note：优先使用interface，实在不行再用type或者其他的类型。
-
交叉类型
- note：即便用交叉类型，可以解决扩展类复用属性的需求，但是还是建议优先使用interface，extends的写法会更加优雅，尤其交叉类型用不好会出现一些错误。
课程收获
ts基础类型
// 基础类型 string, number, boolean
const teacherName: string = 'Dell Lee';
const teacherAge: number = 28.0;
const isMale: boolean = true;
ts 数组类型
定义一个数组，可以约定数组的每一项是什么类型，有两种方式定义，可以用基本形式，也可以用范型方式。
// 数组类型
const numberArr: number[] = [1, 2, 3];
const stringArr: string[] = ['a', 'b', 'c'];
const booleanArr: Array<boolean> = [true, false]; // 范型
ts对象类型
定义对象某些属性是可传可不传，可以借助 ？ 。
const user: {name: string, age: number} = { name: 'dell', age: 18};
const userOne: {name: string, age?: number} = {name: 'dell'};
ts联合类型 Union Type
id参数可以是字符串也可为数字，则借助 | 。
联合类型，需要有对应类型的逻辑处理，实际这里ts会帮忙分析潜在的bug。 => 类型收窄来解决该问题 => 通过typeof一些语句，把一些逻辑限制在某些类型之内。
// 联合类型 Union Type
function union(id: string|number) {
if(typeof id === 'string') { // 类型收窄 Narrowing
console.log(id.toUpperCase());
}else {
console.log(id);
}
}
ts类型别名
两个对象，是同样的类型，可以不用那么麻烦，反复重复写同样一长串的类型声明，利用类型别名即可，这样就可以类型复用了，利用type定义。
// 类型别名
type User = {name: string, age: number};
const userTwo: User = { name: 'dell', age: 18};
const userThree: User = { name: 'dell', age: 18};
ts的any类型
message可以是任何类型。
// any
function showMessage(message: any) {
console.log(message);
}
实际不写也不报错，可以让它配置，不写any报错。
compilerOptions配置项， “noImplicitAny”: true，不明确的any不允许它出现，这样不写any就报错了。
tsconfig.json
{
"compilerOptions": {
"noImplicitAny": true,
}
}
ts函数类型
函数除了可以设置参数类型，也可设置返回值的类型。
// 函数类型
function abc(message: string): number {
return 123;
}
// 箭头函数
// const def: (age: number) => number = () => {} 接收age参数为number类型，函数返回也必须是number类型，但是会报错，类型不匹配，没传参也没任何返回，和定义的类型不匹配
const def: (age: number) => number = (age: number) => { return 28 }
ts接口类型
口类型，跟类型别名和对象很相似。
// 接口类型 Interface
interface Student {
age: number;
sex?: string;
}
const student: Student = { age: 18, sex: 'male''}
在类型别名User扩展一个别名，仅仅多一个薪资，那必须再写一个类型别名，name和age复制过去即可。
// 类型别名
type User = {name: string, age: number};
const userTwo: User = { name: 'dell', age: 18};
const userThree: User = { name: 'dell', age: 18};
type Employee = {name: string, age: number, salary: number};
使用Interface，它里面是支持一个继承的语法的。
// 接口类型 Interface
interface Student {
age: number;
sex?: string;
}
interface OldStudent extends Student {
name: string;
}
const oldStudent: OldStudent = { age: 18, sex: 'male', name: 'dell'};
除了使用extends，还以使用以下方式：
定义两次同样的接口，ts它会将其拼接起来。
// 接口类型 Interface
interface Student {
age: number;
sex?: string;
}
interface Student {
name: string;
}
// interface OldStudent extends Student {
// name: string;
// }
const student: Student = { age: 18, sex: 'male', name: 'dell'}
// const oldStudent: OldStudent = { age: 18, sex: 'male', name: 'dell'};
如果不给name，student对象报错。
note：优先使用interface，实在不行再用type或者其他的类型。
ts交叉类型
Employee想用User里的东西，只能重复写一遍其中的属性。
// 类型别名
type User = {name: string, age: number};
const userTwo: User = { name: 'dell', age: 18};
const userThree: User = { name: 'dell', age: 18};
type Employee = {name: string, age: number, salary: number};
实际上，也可以不这么写，用 & 去定义Employee
// 交叉类型
type Employee = User & {salary: number};
const employee:Employee = {name: 'dell', age: 18, salary: 1}
note：即便用交叉类型，可以解决扩展类复用属性的需求，但是还是建议优先使用interface，extends的写法会更加优雅，尤其交叉类型用不好会出现一些错误。
随时随地看视频
