Typescript教程（一） Typescript简单入门

1,017次阅读
没有评论

Typescript简介

TypeScript 是目前地球上最流行的编程语言之一，也是增长最快的语言，没有之一。它最初由 Microsoft 于 2012 年发布，尽管花了一些时间才形成势头，但到 2017 年它的受欢迎程度已经爆炸式增长。它催生了一个完整的工具和框架生态系统，有人说它在引发目前如火如荼的全栈革命方面发挥了重要作用。
Typescript教程（一） Typescript简单入门

Typescript简史

  • 2010年 Microsoft为了响应内部开发人员和外部客户的需求而创建了TypeScript，他们希望有一种比现有 JavaScript 更安全使用的前端语言

  • 2012 Microsoft公布并开源了Typescript，当时版本是0.8

  • 2015年 JavaScript在前端开发领域已经占据了巨大优势。但 TypeScript 提供了一种更安全、更熟悉、更少 bug 的前端语言，这吸引了后端开发人员再次对前端产生兴趣，从而使全栈开发的概念遍地开花

  • 2022 年，TypeScript 已成为第四大最流行的编程语言，仅次于 Java、Python，当然还有编程语言之王 JavaScript，并且看起来将在未来几年继续迅速崛起

  • 今天，越来越多的开发人员正在从JavaScript转向Typescript

    Typescript的构成

    整个Typescript系统主要有3部分构成，语法、编译器、IDE的集成

  • 语法：TypeScript 包含了 JavaScript 的所有内容。除此之外，TypeScript 添加了一些新语法来表达类型和一些新关键字

  • 编译器：TypeScript 本身不受任何浏览器支持；当你写好一个ts文件丢到浏览器里面是无法运行的，它需要通过编译器编译成JavaScript后才能运行。。 TypeScript 编译器称为 TSC，在安装 TypeScript 时自动被安装。

  • IDE集成： TypeScript 由 Microsoft 创建，默认情况下与流行的 Microsoft IDE 套件 Visual Studio 完全集成，无需任何额外配置。它还可以安装在当今许多最流行的开发工具和编辑器中。

    Typescript的优缺点

    优点

  • 静态类型检查，不需要等到运行时才知道代码的错误，它能够在错误到达生产之前捕获错误，这最终可以节省开发时间

  • 更好的可读性：TypeScript 使编写功能性和正确的代码变得更容易，也更容易同其他开发人员协同开发

  • 更容易捕获到具体的错误

  • 更快的JavaScript语言支持：TypeScript 的发布周期比 JavaScript 本身更快，JavaScript的新特性会优先出现在Typescript中，因此使用 TypeScript 可以让我们提前了解即将进入开发工具箱的新功能，并允许我们开始工作更快地提供未来的功能。

    缺点

  • 需编写更多的代码： 因为好做好类型检查，需要额外编写很多静态类型代码

  • 增加学习成本，需要理解接口（Interfaces）和泛型（Generics），类（class），枚举类型（Enums）等

  • ts 集成到构建流程需要一定的工作量

    类型驱动开发

    Typescript是典型的类型驱动开发语言，类型驱动开发首先是要创建类型的范例；我们可以通过考虑表示系统的不同元素所需的类型以及这些元素将具有的属性来设计我们的应用程序。Typescript申明的类型系统就像一个契约或者合同，严格规范了JavaScript代码的编写，就如建筑施工时必须要有的图纸一样。

    开发环境的搭建

    如果我们想编写 TypeScript，至少有几个东西是必须要安装的。第一个是流行的JavaScript 运行时 Node.js，我们使用它来安装和编译 TypeScript 本身，第二个是IDE，这里无脑推荐Vscode。

    安装Nodejs

    windows安装Nodejs

    在windows上安装Nodejs是很方便的，直接https://node.js/org 官网上下载就行，然后直接运行exe安装程序即可
    Typescript教程（一） Typescript简单入门

    在 Mac 上安装 Node.js

    brew update
brew install node

    在Linux上安装Nodejs

    这里以18.17.1版本为例
    浏览官网，进入到一个下载页，https://nodejs.org/dist/v18.17.1/
    右键复制这个链接
    Typescript教程（一） Typescript简单入门
    然后在linux上

    
wget https://nodejs.org/dist/v18.17.1/node-v18.17.1-linux-x64.tar.gz //下载
tar xf  node-v18.17.1-linux-x64.tar.gz //解压
cd node-v18.17.1-linux-x64  
ln -s /usr/yourpath/node-v18.17.1-linux-x64/bin/npm    /usr/local/bin/ //软链接
ln -s /usr/yourpath/node-v18.17.1-linux-x64/bin/node   /usr/local/bin/ //软链接
node -v

## 设置npm镜像源
npm config set registry https://registry.npm.taobao.org

## 安装Typescript
```shell
npm install -g typescript
tsc --v

配置tsconfig.json

当我们安装好Typescript后，我们就可以通过npm install typescript来给项目增加Typescript支持，这时我们必须在跟目录创建一个tsconfig.json文件。我们也使用命令来生成，如

npx tsc --init --rootDir src --outDir build --esModuleInterop --resolveJsonModule --lib es6 --module commonjs --allowJs true --noImplicitAny true

tsconfig.json大概长这样子：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es6"],
    "module": "commonjs",
    "rootDir": "src",
    "resolveJsonModule": true,
    "allowJs": true,
    "outDir": "build",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": true,
    "skipLibCheck": true                                
  }
}

具体配置，请看官网 ，具体的常用配置项我们后面章节再介绍。我们先学习Typescript语法

基本类型

Typescript的基本类型包含以下内容，我们逐一讲解

  • 原来JavaScript原始类型

  • any

  • unknown

  • never

  • as

  • union type

  • literal type

  • type

  • non-null

    原始类型

    TypeScript支持JavaScript本身支持的所有相同的基础，因此变量，功能参数和类成员可以描述为这些基本类型，如果熟悉JavaScript，这些类型应该很了解了，主要有

  • bigint

  • boolean

  • number

  • null

  • string

  • symbol

  • undefined

定义方式举例：

let bignum: bigint = BigInt(0);
const result = bignum * 1;
let isEnabled: boolean = true;
let num: number;
let nothing: null = null;
let greeting: string = ‘Hello’;
let aSym: symbol = Symbol();
let notYet: undefined = undefined;

any类型

TypeScript 添加了一种特殊类型，它不是 JavaScript 的一部分，称为 any，这种类型意味着所讨论的值实际上可以是任何受支持的类型，这意味着该值可以像函数一样调用，或者像对象一样读取其属性，或者像任何基元一样处理

let anything: any
anything = 'still any'
anything = 123

当 TypeScript 隐式地将某个值视为 any 时，它需要警告我们，从此时起，将不再对该值进行类型检查，因为我们还没有明确告诉它不要检查该值的类型，有意将其设置为 any 类型。因此，我们可能会错误地使用该值，而 TypeScript 将无法警告我们

unknown类型

另一种我们在 JavaScript 中还不熟悉的特殊 TypeScript 类型是 unknown 类型。这可以被认为是与 any 相反的一种；虽然 any 类型允许我们对值执行任何操作，例如分配给它、调用它的方法或读取它的属性，但 unknown 类型限制我们的操作可以做它。举例

let notKnown: unknown;
notKnown = { test: 'test' };
console.log(notKnown.test)

当我们访问notKnow.test时会出错，
unknown 类型被认为比 any 类型使用起来更安全，因为它可以防止我们以不适合的方式使用值。相反， any 类型无法阻止我们完全错误地使用值，这可能会导致我们的应用程序失败。

never类型

另一种没有相应 JavaScript 等效项的 TypeScript 类型是 never 类型。该类型表示一种不应该存在的状态，并且可以在某些情况下由 TypeScript 推断出来，例如在函数抛出错误的情况下，永远不会停止执行的函数的返回值。
never 单独使用的场景是非常少的，但也不是没有

interface Info {
  //当我们不知道这个数组里面是什么类型的时候，我们就可以设置为never类型
  like: never[];  
  age: number;
  name: string;
}
let obj: Info = {
  like: [],
  age: 18,
  name:'磅礴'
}

as运算符

Typescript用 as 运算符作为类型转换的一种形式来指定值属于特定类型：

let anotherVar = ‘another’ as string;

Union联合类型

TypeScript 中的联合类型是指一个值可能是一组预定义的不同类型之一——我们用它来告诉编译器一个值可能是这种类型，也可能是那种类型。语法很简单 - 我们用管道字符分隔联合中的每种类型：

let either: string | number = 1;
either = 'hello'
either = 666
either = true

我们可以使用字符串对其进行初始化，但如果我们尝试将其设置为任何其他类型，无论是在初始化期间还是稍后在应用程序中，TypeScript 都会向我们显示错误，上面例子中 either = true将报错。

literal type类型

在 Typescript 中，literal types 是指一种类型，它的值只能是一个固定的字面量，没有literal关键字，使用如下

let pos:"left";
pos = 'left'
let pos: 'left' | 'right' | 'center';
pos = 'center'

type类型

在前面的literal，如果literal过多，变量多次定义会很麻烦，我们可以定义一个type类型

type directions = 'left' | 'right' | 'middle';
let pos:directions = 'middle'

如果我们想扩展类型别名，我们基本上需要创建一个具有不同标识符的新别名，然后包含我们要扩展的类型，如下所示：

type directions2D = directions | 'up' | 'down';

类型断言

假设我们有一段代码

function splitString(str: string | null) {return str.split('');}

此时str.split会报错，因为str有可能为null
我们可以通过类型断言来解决此问题
类型断言有两种形式。 其一是“尖括号”语法：

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

另一种是as语法

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

前面的代码我们改为一下这种断言形式就不会报错

function splitString(str: string | null) {
    return (str as string).split('');
}

function splitString2(str: string | null) {
    return (<string>str).split('');
}

但上面代码编译后在浏览器执行splitString(null)是100%会报错的，所以断言可以解决编译时错误却无法避免运行时错误，应尽量避免使用

non-null运算符!

非空断言运算符是指定值绝对不是 null 的另一种方法。这将禁用 TypeScript 对所使用的值进行的 null 和 undefined 检查，并防止编辑器显示错误，非空断言运算符是一个后缀感叹号
我们可以使用非空断言运算符来实现前面类型断言相同的结果，而不是使用 as 运算符将str 参数专门转换为字符串

function splitString(str: string | null) {return str!.split('');}

本篇就先写到这，下一篇我们来学习一下Typescript编译器

正文完
TypeScript 全栈
发表至： JavaScript
2023-09-06
 

公众号

最新文章

归档