TypeScript 由浅入深的阶段性学习总结TypeScript 由浅入深 TypeScript（TS）是一种静态类型

TypeScript 由浅入深

TypeScript（TS）是一种静态类型的超集语言，它扩展了JavaScript，提供了类型系统和许多现代编程语言的特性。学习TypeScript可以从基础入手，逐步深入到高级概念。以下是从浅入深的学习路径：

1. 基础入门

1.1 安装与配置

安装TypeScript：
```
npm install -g typescript
```
创建 tsconfig.json：
```
tsc --init
```
1.2 基本类型

基本数据类型：

let num: number = 10;
let str: string = "hello";
let bool: boolean = true;
let arr: number[] = [1, 2, 3];
let obj: { name: string } = { name: "Alice" };

联合类型：

let value: number | string = 10;
value = "hello"; // 合法

空值与未定义：

let n: null = null;
let u: undefined = undefined;

任意类型：

let anyVar: any = 10;
anyVar = "hello"; // 合法

1.3 函数与接口

函数类型：

function add(x: number, y: number): number {
  return x + y;
}

接口：

interface Person {
  name: string;
  age?: number; // 可选属性
  [propName: string]: any; // 索引签名
}

let person: Person = { name: "Alice", age: 25 };

2. 中级概念

2.1 类型断言

类型断言：

let anyVar: any = "hello";
let strVar: string = anyVar as string;

类型守卫：

function isNumber(value: any): value is number {
  return typeof value === "number";
}

if (isNumber(10)) {
  console.log("It's a number");
}

2.2 泛型

泛型函数：

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

let output = identity<string>("hello");

泛型类：

class Box<T> {
  private _value: T;

  constructor(value: T) {
    this._value = value;
  }

  get value(): T {
    return this._value;
  }
}

let box = new Box<number>(10);

2.3 类与继承

类：

class Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name);
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

let dog = new Dog("Rex");
dog.speak(); // Rex barks.

接口与类：

interface Identifiable {
  id: number;
}

class User implements Identifiable {
  id: number;
  name: string;

  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }
}

3. 高级概念

3.1 模块与命名空间

模块：

// math.ts
export function add(x: number, y: number): number {
  return x + y;
}

// main.ts
import { add } from "./math";
console.log(add(10, 20)); // 30

命名空间：

namespace Math {
  export function add(x: number, y: number): number {
    return x + y;
  }
}

console.log(Math.add(10, 20)); // 30

3.2 装饰器

类装饰器：

function logClass(target: Function) {
  console.log(target);
}

@logClass
class MyClass {
  constructor() {
    console.log("MyClass created");
  }
}

new MyClass();

属性装饰器：

function logProperty(target: any, key: string) {
  console.log(target, key);
}

class MyClass {
  @logProperty
  myProp: string = "hello";
}

const instance = new MyClass();

方法装饰器：

function logMethod(target: any, key: string, descriptor: PropertyDescriptor) {
  console.log(target, key, descriptor);
}

class MyClass {
  @logMethod
  myMethod() {
    console.log("myMethod called");
  }
}

const instance = new MyClass();
instance.myMethod();

4. 实战应用

4.1 Vue 3 与 TypeScript

Vue 3 组件：

// setup 函数
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    onMounted(() => {
      console.log('Component mounted');
    });

    return {
      count,
      increment
    };
  }
};

Vue 3 组件：

<script lang="ts" setup> 
// script setup 语法糖
import { ref, onMounted } from 'vue'; 
// 定义计数器 
const count = ref(0); 
// 定义递增函数 
function increment() { 
  count.value++; 
} 

// 组件挂载时的回调 
onMounted(() => { console.log('Component mounted'); }); 
</script> 

<style scoped> /* 你可以在这里添加样式 */ </style>

Props 类型：

import { defineComponent, PropType } from 'vue';

export default defineComponent({
  props: {
    message: {
      type: String as PropType<string>,
      required: true
    }
  },
  setup(props) {
    console.log(props.message);
  }
});

4.2 React 与 TypeScript

React 组件：

import React, { useState } from 'react';

interface Props {
  title: string;
}

const MyComponent: React.FC<Props> = ({ title }) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{title}</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default MyComponent;

通过以上步骤，你可以从基础开始逐步深入学习TypeScript。从基本类型到高级概念，再到实战应用，TypeScript提供了丰富的特性和工具，帮助你编写更加健壮和可维护的代码。希望这些内容能帮助你更好地掌握TypeScript！前端真的得每天坚持学习和不断总结很重要！很重要！很重要！温故而知新~

TypeScript 由浅入深的阶段性学习总结