教程：TypeScript TS 快速入門

【前端速成】TypeScript TS 快速入門｜Tiktok工程師帶你入門前端｜布魯斯前端
更新于: 2022-05-12 00:11:10

课程大纲

  • 0:00 開始 
  • 8:33 開始課程 
  • 12:00 什麼是TypeScript 
  • 15:52 為什麼需要TypeScript 
  • 17:07 TypeScript優缺點比較 
  • 23:05 TypeScript編譯流程 
  • 24:38 React+TS課程宣傳 
  • 25:23 TypeScript環境安裝 
  • 28:58 ts檔案寫法、tsc編譯、tsconfig.json設定、sourceMap設定 
  • 39:32 TypeScript基本類型、陣列等等 
  • 47:46 TypeScript enum 
  • 51:43 TypeScript union 
  • 53:00 TypeScript type 
  • 55:18 TypeScript interface 
  • 56:20 TypeScript object寫法、type與interface的區別 
  • 1:01:59 TypeScript function 
  • 1:11:45 TypeScript 斷言as、unknown、fetch api 
  • 1:18:53 TypeScript class 
  • 1:39:22 TypeScript 泛型Generics 
  • 1:46:52 TypeScript utility 
  • 1:55:35 TypeScript + React 整合跟操作 
  • 2:17:17 Q&A 

什么是Typescript

  • 加强版的 js
  • 加强了 type
  • 开发完成后，需要编译
  • 搭配 react/express 等框架

为什么需要

  • 开发时的类型检测
  • 补强动态语文的出错的缺点
  • 提高可维护性

优缺点

  • 优点：
    • 减少bug
    • 提高稳定性
    • 很容易看懂 function
    • 代码提示
  • 缺点
    • 不是真正的类型检查
    • 需要编译
    • 学习成本

安装

# 局部<推荐>
npm i -D typescript
# 全局
npm i -g typescript
# check
tsc --version
❯ tsc --version
Version 4.6.4

初始化配置文件

typescript --init

配置，编译

  • srcDir: ./src
  • outDir: ./dist
# 编译命令
tsc
-开始一个项目

Union

  • js 同一个变量可以表示不同的类型
  • ts 用这个方式(union)可以实现
let a = number | string;
a = 100;
a = 's1';

自定义类型

  • type
  • interface
type A = number | string;
let a1: A;
a1 = 100;
a1 = 's1';

2者的区别

  • type是不可以扩展的
    • 用组合的方式来扩展
  • interface 是可以扩展的
    • 同样的名字，会以“打开类”的方式去新增加内容
interface Card {
  name: string
}

interface Card {
  age: number
}

let obj: Card = {
  name: "aric",
  age: 18
}

unknown 类型

  • 是一个不确定的类型，但断言之后就确定了
  • 提示编译器推断过程
type Data = {
  userId: number
  id: number
  title: string
  completed: boolean
}

type Beta = {
  name: string;
}

async function getData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1')
  return await res.json() as Data; // 断言
}

const data1 = getData();
// unknown 是一过渡，让ts编译器按如下流程推断
const beta = data1 as unknown as Beta;

never 类型

// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}

泛型

  • function
  • class
  • 在使用的时候，告知程序类型
function print<T>(arg: T): void {
  console.log(arg)
}

print("hello")
print(1)

# 可以用上面简单的方式，自动推断
print<string>("hello")
print<number>(1)
// ==== generic class ====
class Person<T> {
  name: T
  age: number
  constructor(name: T, age: number) {
    this.name = name
    this.age = age
  }
}

各种工具 utility

Partial<Type>

  • 只使用一个类型的部分字段
interface Todo {
  title: string;
  description: string;
}
 
function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
  return { ...todo, ...fieldsToUpdate };
}
 
const todo1 = {
  title: "organize desk",
  description: "clear clutter",
};
 
const todo2 = updateTodo(todo1, {
  description: "throw out trash",
});

Required<Type>

  • 将一个可选类型，全都变成 required 类型
interface Props {
  a?: number;
  b?: string;
}
 
const obj: Props = { a: 5 };
const obj2: Required<Props> = { a: 5 };

Readonly<Type>

  • 将目标类型里的key变成 readonly 类型
interface Todo {
  title: string;
}
 
const todo: Readonly<Todo> = {
  title: "Delete inactive users",
};
 
todo.title = "Hello";

参考