TypeScript小白入门目标掌握ts的常见类型了解ts的一些优点和用途要点 TypeScript——JavaS

目标

掌握ts的常见类型
了解ts的一些优点和用途

要点

TypeScript——JavaScript的超集 👁‍🗨有点碎，慢慢看，别走神👁‍🗨

基本类型🔵

number

let decLiteral: number = 6; 
let hexLiteral: number = 0xf00d; 
let binaryLiteral: number = 0b1010; 
let octalLiteral: number = 0o744;

string

let name: string = "xuSir君";

boolean

let isDone: boolean = false;

array

let list: number[] = [1, 2, 3];

Tuple(元组)

let x: [string, number];
x = ['hello', 10];

enum

enum Color {Red, Green, Blue} 
let c: Color = Color.Green;

any(任意类型)

let notSure: any = 4;
notSure = "maybe a string instead"; 
notSure = false;

Void (Void类型像是与any类型相反，它表示没有任何类型)

function warnUser(): void { 
    console.log("This is my warning message"); 
}

Null 和 Undefined

// Not much else we can assign to these variables! 
let u: undefined = undefined; 
let n: null = null;

接口-interface

interface UserInfo {
    name?: string,
    age: number
}

const userInfo: UserInfo = {age: 18} // 检查到 age 必选项 加 ？ name?: string 类型检查

实际应用中还有别的写法吗❔

// 这种写法是不是也可以呢👁‍🗨
type UserInfo = {
    name?: string,
    age: number
}

类

不废话，前后台的童鞋都很熟悉这玩意

class Greeter { 
    greeting: string;
    constructor(message: string) { 
        this.greeting = message;
    } 
    greet() { 
        return "Hello, " + this.greeting; 
    } 
} 
let greeter = new Greeter("world");

类的继承

class Animal { 
    move(distanceInMeters: number = 0) { 
        console.log(`Animal moved ${distanceInMeters}m.`); 
    } 
} 
class Dog extends Animal { 
    bark() { 
        console.log('Woof! Woof!'); 
    } 
} 
const dog = new Dog(); 
dog.bark(); 
dog.move(10); 
dog.bark();

public private protected abstract 等修饰符的使用，自行查询😂

泛型

使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

// 定义
function identity<T>(arg : T) : T{ 
    return arg; 
}

// 使用
let out = identity<string>("yivi"); // 传入所有的参数，包括类型参数
let out = identity("yivi");  // 使用类型推论——即编译器会自动推断类型

高级类型🔴

联合类型 | (联合一次只能使用一种类型，交叉类型是多个类型的联合类型)
交叉类型 &

interface UserInfoA {
    name?: string,
    age?: number
}
interface UserInfoB {
   width: number
}
function test(param: UserInfoA | UserInfoB) {

}

typeof 获取一个变量声明或对象的类型

function toArray(x: number): Array<number> {
    return [x]
}

type Func = typeof toArray  // (x: number) => number[]

keyof 获取一个对象中的所以key值

interface UserInfoA {
    name: string,
    age: number
}
type Person = keyof UserInfoA  // 'name' | 'age'

in 用来遍历枚举类型

type Keys = 'a' | 'b' | 'c'
type Obj = {
    [key in Keys]: any
}

extends 继承 T 类型.

interface ILength {
    length: number
}
// arg: T 入参 arg 类型 T
functon identity<T extends ILength>(arg: T):T { 
    //  T extends ILength 继承了ILength 约束了入参必须要有 length属性
    console.log(arg.length)
}

Partial 是将某个类型的属性全部变为可选项

interface ILength {
    length: number
}
type options = Partial<ILength> // options --> { length?: number }

Required 必选

Required 的作用就是将某个类型里的属性全部变为必选项。 Readonly 只读 Readonly 的作用是将某个类型所有属性变为只读属性，也就意味着这些属性不能被重新赋值。

Record

Record<K extends keyof any, T> -->将K中的所有属性的值转化为T类型

interface PageInfo {
    title: string
}
type Page = 'home' | 'about'
// Record 约束的是类型不是值
const x: Record<Page, PageInfo> = {
    home: {title: 'xxx'},
    about: {title: 'xxx'}
}

什么有点懵😢，看下面🤣

// 把keys所有的属性值 转化为 number类型
type keys = 'A' | 'B' | 'C'
const result: Record<keys, number> = {
  A: 1,
  B: 2,
  C: 3
}

这下明白了把大兄弟，奥里给🚀

Exclude 移除对应的类型

typof T0 = Exclude<'a' | 'b', 'a'> // --> 'b'

Extract 取交集

type T0 = Extract<'a' | 'b', 'a'> // --> 'a'

TypeScript 的好处有哪些呢，童鞋们❓

TypeScript 是JavaScript的超集也就是plus+版，它给JavaScript添加了可选的静态类型和基于类的面向对象编程，它拓展了JavaScript的语法。所以ts的功能比js更加丰富.
Typescript 是纯面向对象的编程语言，包含类和接口的概念.
TS 在开发时就能给出编译错误，而 JS 错误则需要在运行时才能暴露出来。
TS 作为强类型语言，你可以明确知道数据的类型。代码可读性极强，几乎每个人都能理解。
TS 中有很多很方便的特性, 比如可选链. ?.a.b.xxx,增加代码的可读性

补充：type 和 interface的异同

记住了：用 interface 描述数据结构，用 type 描述类型 ❗ ❗ ❗

都可以描述一个对象或者函数

interface User {
  name: string
  age: number
}

interface SetUser {
  (name: string, age: number): void;
}

type User = {
  name: string
  age: number
};

type SetUser = (name: string, age: number) => void;

都允许拓展, 也可以相互扩展（extends）

// interface extends interface
interface Name { 
  name: string; 
}
interface User extends Name { 
  age: number; 
}

// type extends type
type Name = { 
  name: string; 
}
type User = Name & { age: number  };

// interface extends type
type Name = { 
  name: string; 
}
interface User extends Name { 
  age: number; 
}

// type extends interface
interface Name { 
  name: string; 
}
type User = Name & { 
  age: number; 
}

🤞只有type可以做的🤞

type 可以声明基本类型别名，联合类型，元组等类型

// 基本类型别名
type Name = string

// 联合类型
interface Dog {
    wong();
}
interface Cat {
    miao();
}

type Pet = Dog | Cat

// 具体定义数组每个位置的类型
type PetList = [Dog, Pet]

// 当你想获取一个变量的类型时，使用 typeof
let div = document.createElement('div');
type B = typeof div

来找茬啊👀