Typescript基础1

99 阅读2分钟

本文已参与「新人创作礼」活动, 一起开启掘金创作之路。

这是typescript学习的系列课程,今天开启第一部分。

不多说废话,直接精简出最精华的部分给大家。

一、Typescript如何执行

官方说法:TypeScript是JavaScript的超集。

我的理解:Typescript在编译期间用来限制JS的编写,类似eslint一样提供类型检测的能力。

首先我需要知道自己写了一个ts文件,应该按照什么顺序执行看有没有报错。

如何执行ts文件?

方法一

// 全局安装ts-node包
yarn add ts-node -g
// 通过ts-node执行ts文件
ts-node abc.ts

方法二

yarn add nodemon -g
// 通过nodemon执行ts文件
nodemon abc.ts

以上两者的区别:

  • 1、使用ts-node,在每次修改文件之后需要重新执行一次命令
  • 2、使用nodemon,每次保存之后自动更新(推荐使用)

二、写一个爱坤的例子看效果

// test.ts
let message: string = "我们的爱坤"
message = "你干嘛;哎哟;啊哈,你好烦";
console.log('message>>>>>>', message);

以下是执行结果

image.png

三、类型注解

Typescript中常见的类型有以下几种:any类型、number类型、boolean类型、数组类型、元组类型、enum枚举类型、void类型、null类型、undefine类型、never类型

// 类型注解.ts

// any类型
let any: any = '我是any类型';

/*number 类型 */
let num: number = 1;

/* string 类型 */
let str: string = 'string'

/* boolean类型 */
let boolean: boolean = true;

/* 数组类型, 表示元素的类型都是一样的*/
let arr1: number[] = [1, 2, 3]; // 写法1
let arr2: Array<number> = [1, 2, 3]; // 写法2

/* 元组类型, 表示每个元素对应位置的类型要相同 */
let tuple: [number, string, boolean] = [1, 'str', true];

/* enum 枚举类型 , 用于定义数值集合(默认从0开始) */
enum Color { Red = 2, Green = 3, Blue = 4 };
enum SexEnum { MAN = 'man', WOMAN = 'woman', UNKOWN = 'unkown' };
let myColor: Color = Color.Red;
let myGender: SexEnum = SexEnum.UNKOWN;

/* void 类型 , 用于表示函数没有返回值*/
function func(): void {
  console.log('唱跳rap和篮球');
}

/* null 类型, 表示不属于任何类型(很少用,一般不知道类型用any就行了) */
let myNull: null = null;

/* undefine 类型(很少用,一般不知道类型用any就行了) */
let under: undefined = undefined;


console.log('any类型>>>', any);
console.log('number类型>>>', num);
console.log('string类型>>>', str);
console.log('boolean类型>>>', boolean);
console.log('数组类型>>>', arr2);
console.log('元组类型>>>', tuple);
console.log('enum枚举类型数字>>>', myColor);
console.log('enum枚举类型字符串>>>', myGender);
console.log('void 类型>>>', func());
console.log('null类型>>>', myNull);
console.log('undefine类型>>>', under);

执行以下上述的代码,结果如下:

image.png

ok,以上为今天Typescript基础入门的内容。

学如逆水行舟,不进则退。第一天不求贪多,只求稳步的进步。

参考资料: