注：本文的目的不是建议同学们不要学Typescript，相反老俊非常建议读者有时间都要去系统学习一下Typescript，本文是针对没时间学习的一些开发者说的

TypeScript 是 JavaScript 的超集，并向该语言添加了可选的静态类型、类、接口和其他高级功能。它使开发人员能够在编译时而不是运行时捕获错误，从而有助于改善大型 JavaScript 应用程序的开发体验。

为什么要使用TypeScript

我们经常因为一些愚蠢的错误而花费数小时来调试代码，例如传递错误的 props、变量名称中的拼写错误、弄乱类型等等。
Typescript 通过提供静态类型帮助我们开发人员节省时间。它允许指定变量、参数、元组和函数返回类型的类型，这有助于在编译时而不是运行时捕获错误，并且绝对有助于减少生产中代码的破坏。

TypeScript 可能看起来会增加很多额外的工作，但它是值得的！

速学TypeScript必学的基础知识

很开发者由于没有时间去系统学习Typescript，当他拿到一份Typescript编写的项目时会毫无头绪。其实Typescript非常简单。对于已经学习过Java开发语言的同学来说几乎没什么学习成本。针对快速开发，只要掌握这些基础知识就可以上手用了

变量

使用 Typescript 有时可能有点棘手，我尝试提供带有 React 应用程序使用结构的 Typescript 示例
变量可以分配给各种基本数据类型，如字符串、数字、布尔值等。下面是我们如何为变量添加类型

var name : string = 'John';
var age : number = 18;  
var isPresent : boolean = true;

数组

有几种方法可以为数组指定类型

var nameArray : string[];                 //declaration
nameArray = ["John", "David" , "Tom"];   //initialization
/* Another way of declaring array is 
var nameArray : Array<string>   */

此外，我们可以为数组提供一个可选类型，该类型可以在数组中采用两种或多种类型。

//Optional type either string or number
let values : (string | number)[]= ['Apple', 2, 'Orange', 3, 4, 'Banana']

元组（Tuple)

元组与多类型数组类似，唯一的问题是我们没有可选类型，而是数组将包含的强制类型。

/* Tuple */
var person : [number, string] = [18, "John"];

/* Tuple Array */
var users : [number, string, string][];
users = [[18, "John", "Admin"],[23, "David", "Accountant"],
[40, "Tom", "Admin"]];

类型和接口

类型和接口用于定义变量、函数和其他构造的自定义类型。类型和接口都有相似的用途，但它们有一些关键的区别。
类型和接口之间的主要区别之一是接口可以扩展，而类型则不能。
类型和接口之间的另一个区别是接口可以定义可选和只读属性，而类型则不能。
一般来说，两者都提高了代码的可读性和可维护性。

类型(Type)

使用 Type 定义自定义类型

type TagType = {
  id: string;
  label: string;
};
var Tag : TagType = {
    id: "123",
    label: "TypeScript"
  };

// Extending type with another type
type BlogType = {
  title: "string;"
  body: string;
}& TagType;

var Blog : BlogType = {
title: "\"Typescript Fundamentals\","
id: "101",
label: "Typescript",
body: "Things you need to know to start ..."
}

接口(Interfaces)

使用接口定义自定义类型

interface TagInterface { 
   id: string;
   label: string;
   showTag: ()=>string; 
} 

var Tag : TagInterface = {
    id: "123",
    label: "TypeScript",
    showTag?    : () =>{return "Hi there"} // Optional properties '?'
  };

// Extending interface with another interface
interface BlogInterface extends TagInterface{
  title: "string;"
  body?: string;
};

 var Blog: BlogInterface = {
   title: "\"Typescript Fundamentals\","
   id: "101",
   label: "Typescript",
   showTag: () => {
      return "Hi Tags";
   },
 };

函数类型（Function)

Typescript 中的函数可以具有类型化参数、类型化返回值和可选参数。这是一个例子

//TagType is defined in the previous examples
const [tags, setTags] = useState<TagType[]>([]);
const addTag = (tag: Tag) => {
   setTags((prev: Tag[]) => [...prev, tag]);
 };

组件类型（Components ）

TypeScript 中的函数组件提供了一种简单而强大的方法来构建具有类型安全性和代码清晰度的用户界面。 React.FC类型用于定义功能组件的类型。这通过确保组件返回有效的 JSX 元素来提供额外的类型安全性。

import React, { FC } from "react";
type NewTagProps = {
  onAddTag: (tag: TagType) => void;
  availableTags: TagType[];
};
export const NewTag: FC<NewTagProps> = ({
  onAddTag,
  availableTags,
}) => {
console.log("Availble Tags ",availableTags);
  return (
    <div>
      <h3 className="text-center my-3">New Tags Availble</h3>
      {
        // Map the available tags ${availableTags}
      }
    </div>
  );
};

一些特殊 TypeScript 类型

需要特别注意的一些特殊 TypeScript 类型：

any是一种特殊类型，正如名称所示，它代表任何类型（所有类型）的值，这将有助于逃避类型检查

unknown

类型unknown是 any 的类型安全版本

void

类型 void 是指不存在任何类型。

总结

TypeScript 是一种功能强大的编程语言，与 JavaScript 相比，它具有多种优势。使用 TypeScript，开发人员可以编写比传统 JavaScript 更可靠、更易于维护且更具可扩展性的代码。
TypeScript 近些年非常受欢迎，现在广泛应用于 Angular、React 和 Node.js 等大型应用程序中。通过学习 TypeScript，开发人员可以提高技能并了解软件开发的最新趋势。老俊说技术公众号转存失败，建议直接上传图片文件

TypeScript不用学，了解这些必要的基础知识你就能上手用了