TypeScript学习笔记及其实践｜青训营学习完JavaScript再来学TypeScript，不得不感慨还是新语

学习完JavaScript再来学TypeScript，不得不感慨还是新语言写起来爽，作为JavaScript的超集,TypeScript在为开发大型复杂应用提供静态类型系统的同时,又保留了JavaScript的表达能力。本文将介绍我在青训营TypeScript学习中的一些心得体会与实践。

相比原生JavaScript,TypeScript具有静态类型系统、支持ES新特性、可配置性强等优点。

静态类型系统可提前发现大量错误,有助于编写健壮程序。编译器可识别变量/参数的类型,找出隐藏的问题。
支持最新的ES特性,如异步函数、装饰器等,使编写兼容新语法的代码更简单。
可配置性强,可设置编译过程中的严格程度,包括是否进行严格Null检查等。

TypeScript的语法与JavaScript类似,不同之处在于增加了可选的静态类型。

声明变量时可指定变量类型,如 let count: number;
参数及返回值也可设置类型,如 function greet(name: string): string {}
支持接口(Interfaces)来定义对象结构,如interface Person { name: string; age: number; }
枚举类型(Enums)也得到支持,如 enum Color {Red, Green, Blue}

我感觉Ts相比于js最大的优势还是提前发现错误TypeScript的编译器可以在代码执行前就识别出变量、参数等的类型错误,让程序员更早地发现并修复问题。这比在运行时才报错要好得多。而且引入类型后,函数和类的接口一目了然。这将减少未来对代码的误解,使代码更易维护。

下面是我用TypeScript重写了我之前JS做的To-do小项目的代码：

interface Todo {
  id: number;
  name: string;
  completed: boolean; 
}

const initTodos: Todo[] = [
  { id: 1, name: '学习TypeScript', completed: false },
  { id: 2, name: '打CS', completed: true },
  { id: 3, name: '打OW', completed: false }
];

class TodoList {
  todos: Todo[];

  constructor(todos: Todo[] = []) {
    this.todos = todos;
  }

  addTodo(todo: Todo) {
    this.todos.push(todo);
  }

  toggleComplete(id: number) {
    const todo = this.todos.find(t => t.id === id);
    if (todo) {
      todo.completed = !todo.completed;
    }
  }

  removeCompleted() {
    this.todos = this.todos.filter(t => !t.completed);
  }
}

const list = new TodoList(initTodos);

list.addTodo({ id: 4, name: 'czczcz', completed: false});
list.toggleComplete(1);
list.removeCompleted();

console.log(list.todos);

TypeScript学习笔记及其实践 ｜ 青训营

TypeScript学习笔记及其实践｜青训营