不能直接运行在浏览器或者node上
JS 动态脚本语言 类型定义是不严格规范
TS 多了一个类型检查 --> 更趋向于静态语言，需要编译执行，在打包构建的过程中进行编译
动态语言 VS 静态语言
-
静态语言对于类型检查严格，编译过程中就会发现错误；运行时性能较好
-
动态语言对于类型检查较为灵活，可读性较差；运行时性能会差
基础知识
基础类型：number string boolean array object undefined void（函数不带返回值）
- enum 枚举 js中常用的映射关系
const obj = {
'RUN': 'run',
'EAT': 'eat'
}
enum ActionType {
/** 跑 */
Run, // 不设值默认为0
/** 吃 */
Eat = 'eat'
}
const a = ActionType.Run;
- type interface type:
type Action = 'eat' | 'run';
const a: Action = 'eat';
interface: 描述数据结构 --> 标识服务端接口返回值是什么
// www.baidu.com
interface BaiduResponse {
name: string;
height: number;
}
axios.get<BaiduResponse>().then();
// 拿到的数据格式就被规定为BaiduResponse
const b: BaiduResponse = {
name: '',
height: 0
}
- 联合类型 | (联合类型一次只能用一种类型)
- 交叉类型 & (交叉类型每次都是多个类型的合并类型)
interface A {
name: string;
}
interface B {
gender: number;
}
function test (a: A | B) {
}
test({gender: 0, name: 'zhangsan', xxx: 1}) // 不能赋值给 a: A | B
function test (a: A & B) {
}
test({gender: 0}) // 缺少 a: B
- typeof 可以获取一个变量的声明或者对象的类型
function toArray(x: number): Array<number> {
return [x]
}
type Func = typeof toArray;
- keyof 用来获取对象中的所有key
interface Person {
name: string;
age: number;
}
type K1 = keyof Person; // 'name' | 'age'
7. in 用来遍历枚举
```ts
type Keys = "a" | "b" | "c" | "d";
type Obj = {
[key in Keys]: number;
}
const obj: Obj = {
a: 1,
b: 2,
c: 3,
d: 4
}
- extends 用于约束泛型 泛型：一种类型的参数
interface A<T> {
// T 就是泛型，可以是任何类型
a: T;
}
const b: A<number> = { a: 1}
// a: '1111' 报错
type Action = 'eat' | 'run';
interface A<T extends Action> {
a: T;
}
const b: A<eat | run> = {}
// 必须有 length 属性
interface ILengthwise {
length: number;
}
function loggingIdentity<T extends ILengthwise>(arg: T): T {
return arg;
}
// <> 给函数类型传参 定义了泛型 T 受后面 ILengthwise 约束
// (arg: T) 入参声明 类型为 T类型
// (): T 函数的返回值
loggingIdentity(3) // 报错，因为参数不满足 ILengthwise ，ILengthwise 中有约束必须要有一个对象属性为 length
loggingIdentity({ length:10, value: 1})
- Partial & Required
可选项 ?
interface A {
name: string;
age: string;
}
interface B {
name?: string;
age?: string;
}
const a: B = {
// 什么都不传ok的
}
Partial<> 接收一个参数使参数中的所有属性变成可选项
interface A {
name: string;
age: string;
}
type B = Partial<A>;
相对的，Required 将所有可选项变成必选项
interface A {
name: string;
age: string;
}
type B = Partial<A>;
type C = Required<B>;
面试题及实战
- 你觉得ts的好处是什么？
1.1 ts是js的加强版，涵盖了所有的属性和特性，给js添加了了可选的静态类型或者基于类的面向对象编程，ts的功能比js只多不少 1.2 ts是面向对象的编程语言，包含了类、接口的概念 1.3 ts在开发的适合就能给出编译错误，js错误只能在运行时体现 1.4 作为强类型的语言，可以明确知道所有数据的类型
- type 和 interface 的区别 用interface 描述数据结构，用type 描述类型；
type setUser = (name: string) => void
interface setUser {
(name: string): void;
}
2.1 相同点 都能用来描述函数和对象 都允许extends
2.2 不同点 type 可以声明基本类型的别名
type Name = string;
type 可以声明联合类型
type a = b | c;
type 可以声明具体数组中的元素位置
type PetList = [Dog, Cat] // 第一个元素必须是Dog
-
什么叫泛型？泛型的具体使用？
-
如何基于一个已有的类型，扩展出一个大部分内容相似，但部分区别的类型？
可以通过Pick Omit
interface Test{
name: string,
sex: number,
height: string;
}
// 只写有sex的
type Sex = Pick<Test, 'sex'>;
// 排除sex
type withoutSex = Omit<Test, 'sex'>
