简单TypeScript入门(随便写)

Author： whksoft
发布时间：April 21, 2023
35views
No comments
2853 words
Categories：教程攻略

# 什么是TypeScript

* TypeScript是微软开发的一种语言，它在JavaScript中添加了类型定义等功能。
* 它是JavaScript语言的完全超集。
* 通过在编译时检测不同类型的函数调用和赋值，可以提高程序的质量。
* 此外，为了更快地采用ECMAScript的最新功能，可以从早期开始使用浏览器尚未支持的功能。
* 通常将程序的扩展名命名为.ts。
* 将TypeScript文件（\*.ts）编译为JavaScript文件（\*.js）。
* TypeScript也经常在React和Angular等框架中使用。

# 安装

使用npm进行安装。

```shell
$ mkdir sample
$ cd sample
$ npm init
$ npm install typescript
$ echo export PATH=\$PATH:`pwd`/node_modules/.bin >> ~/.bashrc
$ source ~/.bashrc
$ tsc --version
```

# 编译

首先，创建一个名为sample.ts的文件。

```typescript
function hello(name: string): void {
    console.log("Hello " + name + "!");
}
let your_name: string = "John";
hello(your_name);
```

使用tsc（TypeScript Compiler）命令将TypeScript文件编译为JavaScript文件。

```shell
$ tsc sample.ts
```

使用node命令运行编译后的sample.js文件。

```shell
$ node sample.js
Hello John!
```

# 类型注释

在TypeScript中，可以在变量、常量、函数、参数等后面指定“：类型名”来声明类型。如果进行不匹配的赋值或引用，则在编译时会出现错误。

```typescript
function hello(name: string): void {
    console.log("Hello " + name + "!");
}
let your_name: string = "John";
hello(your_name);
```

# 指定类型

可以指定以下诸如原始类型的类型。

```typescript
let v_bool: boolean = true;
let v_num: number = 123;
let v_str: string = "ABCDEFG";
let v_null: null = null;
let v_undef: undefined = undefined;
```

列表和元组可以按以下方式指定。

```typescript
let v_arr1: string[] = ["Red", "Green", "Blue"];
let v_arr2: Array<string> = ["Red", "Green", "Blue"];
let v_tuple: [string, number] = ["John", 16];
```

对象使用 object 表示。

```typescript
let v_obj: object = {"name": "John", "age": 16};
```

枚举（enum）类型指定类型名。

```typescript
enum Color {Red, Green, Blue};
let v_enm: Color = Color.Green;
```

Class使用类名指定。

```typescript
class MyClass { 
    name: string; 
}
var val_class: MyClass = new MyClass();
```

如果要允许任何类型，则使用`any`指定。

```typescript
let v_any: any = 4;
```

使用`|`表示`string`或`number`类型。

```
function func(arg: string | number) { ... }
```

可以将`null`和`undefined`分配给任何类型的变量。但是，在使用`--strictNullChecks`选项进行编译时，将进行严格的检查，这些内容将不再被允许。

```typescript
let v_num: number = null
let v_str: string = undefined
```

`void`表示不返回值。

```typescript
function log(msg: string): void {
    console.log(msg);
}
```

`never`表示甚至没有返回。

```typescript
function error(msg: string): never {
    throw new Error(msg);
}
```

# 类型断言

使用类型断言可以对类型不明确的值进行类型标记。有两种方法，一种是在值之前写入<type>，另一种是在值之后写入as type。但是，前者无法区分在React中使用的JSX标记，因此后者的写法更受推荐。

```typescript
interface Person {
    name: string;
    age: number;
}
let foo = <Person>{}
foo.name = "John";    // 如果没有类型断言，将会出现错误
let bar = {} as Person
bar.name = "John";    // 如果没有类型断言，将会出现错误
```

# 类型别名

可以使用 type 关键字定义类型别名。

```typescript
type bool = boolean;
let flag: bool = true;
```

# 参考文献

* [https://www.typescriptlang.org/docs/home.html](https://www.typescriptlang.org/docs/home.html)

广告位招租

Last modification：April 21st, 2023 at 05:14 pm

如果觉得我的文章对你有用，请随意赞赏

简单TypeScript入门(随便写)

whksoft • 2023 年 04 月 21 日

# 什么是TypeScript

# 安装

使用npm进行安装。

```shell
$ mkdir sample
$ cd sample
$ npm init
$ npm install typescript
$ echo export PATH=\$PATH:`pwd`/node_modules/.bin >> ~/.bashrc
$ source ~/.bashrc
$ tsc --version
```

# 编译

首先，创建一个名为sample.ts的文件。

```typescript
function hello(name: string): void {
    console.log("Hello " + name + "!");
}
let your_name: string = "John";
hello(your_name);
```

使用tsc（TypeScript Compiler）命令将TypeScript文件编译为JavaScript文件。

```shell
$ tsc sample.ts
```

使用node命令运行编译后的sample.js文件。

```shell
$ node sample.js
Hello John!
```

# 类型注释

在TypeScript中，可以在变量、常量、函数、参数等后面指定“：类型名”来声明类型。如果进行不匹配的赋值或引用，则在编译时会出现错误。

```typescript
function hello(name: string): void {
    console.log("Hello " + name + "!");
}
let your_name: string = "John";
hello(your_name);
```

# 指定类型

可以指定以下诸如原始类型的类型。

```typescript
let v_bool: boolean = true;
let v_num: number = 123;
let v_str: string = "ABCDEFG";
let v_null: null = null;
let v_undef: undefined = undefined;
```

列表和元组可以按以下方式指定。

```typescript
let v_arr1: string[] = ["Red", "Green", "Blue"];
let v_arr2: Array<string> = ["Red", "Green", "Blue"];
let v_tuple: [string, number] = ["John", 16];
```

对象使用 object 表示。

```typescript
let v_obj: object = {"name": "John", "age": 16};
```

枚举（enum）类型指定类型名。

```typescript
enum Color {Red, Green, Blue};
let v_enm: Color = Color.Green;
```

Class使用类名指定。

```typescript
class MyClass { 
    name: string; 
}
var val_class: MyClass = new MyClass();
```

如果要允许任何类型，则使用`any`指定。

```typescript
let v_any: any = 4;
```

使用`|`表示`string`或`number`类型。

```
function func(arg: string | number) { ... }
```

可以将`null`和`undefined`分配给任何类型的变量。但是，在使用`--strictNullChecks`选项进行编译时，将进行严格的检查，这些内容将不再被允许。

```typescript
let v_num: number = null
let v_str: string = undefined
```

`void`表示不返回值。

```typescript
function log(msg: string): void {
    console.log(msg);
}
```

`never`表示甚至没有返回。

```typescript
function error(msg: string): never {
    throw new Error(msg);
}
```

# 类型断言

# 类型别名

可以使用 type 关键字定义类型别名。

```typescript
type bool = boolean;
let flag: bool = true;
```

# 参考文献

* [https://www.typescriptlang.org/docs/home.html](https://www.typescriptlang.org/docs/home.html)

简单TypeScript入门(随便写)

Leave a Comment Cancel reply

2021 CCPC 吉林省赛PDF下载

Paper酱的Minecraft Paper服务器优化教程【翻译版】

这是本站的第一篇文章！

Spigot CMI 插件更新记录翻译版

解决 Windows 10/11 微软中文输入法占用内存过高问题

解决 Windows 10/11 微软中文输入法占用内存过高问题

简单TypeScript入门(随便写)

magisk踩坑：Android app 获取root权限后进行获取/data/data与/data/user/0的子目录只能显示两个项目(gms与应用本身)

Paper酱的Minecraft Paper服务器优化教程【翻译版】

修复国内无法访问 JsDelivr 导致个人网站部分资源无法加载问题教程

简单TypeScript入门(随便写)