课程名称

专为小白设计的TypeScript入门课

课程章节

第2章 TypeScript 基础语法入门

• 2-6 基础类型快速入门（上） (16:22)
• 2-7 基础类型快速入门（中） (18:16)
• 2-8 基础类型快速入门（下） (15:02)

课程讲师

Dell

课程内容

掌握基础类型快速入门：

• 基础类型

• 数组类型

  • 基本形式定义
  • 范型方式定义

• 对象类型

• 联合类型 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的写法会更加优雅，尤其交叉类型用不好会出现一些错误。