02 TypeScript与JavaScript有何不同?
待兔 316 2

TypeScript 是类型化的 Javascript , 它不仅支持JavaScript 的所有特性,还在 JavaScript 的基础上添加了静态类型注解扩展。

TypeScript 中,我们不仅可以轻易复用 JavaScript 的代码、最新特性,还能使用可选的静态类型进行检查报错,使得编写的代码更健壮、更易于维护

接下来我们一起看看 TypeScript 的基本语法。

基础语法

定义变量

let age = 23;

上面代码既符合 typescript 也符合 javascript语法


区别在于,typescript还可以像下面那样定义 age

let age : number = 1; // 显示指定 age是 number类型

同样的,我们也可以显示定义 string, boolean,null, undefined等类型

下表是 javascript类型与 typescript类型的对照表 |Javascript原始类型|TypeScript类型| |-|-| |string|string| |number|number| |boolean|boolean| |null|null| |undefined|undefined|

下面我们来了解一下typescript中的类型

字符串 string

let name: string = 'tom'; // 字符串字面量
let url: string = String('www.helloworld.net'); // 显式类型转换
let hello: string = `my site is ${url}`; // 模板字符串

说明:所有 JavaScript 支持的定义字符串的方法,我们都可以直接在 TypeScript 中使用。

数字 number

同样,我们可以使用number类型表示 JavaScript 已经支持或者即将支持的十进制整数、浮点数,以及二进制数、八进制数、十六进制数,具体的示例如下所示:

let n: number = 11; // 十进制整数
let n1: number = Number(12); //十进制整数
let num10: number = 3.1415926; // 十进制浮点数 
let num2: number = 0b1010; // 二进制整数 ,0b开头
let num8: number = 0o744; // 八进制整数 ,0o开头
let num16: number = 0xf00d;// 十六进制整数, 0x开头 

布尔值 boolean

使用boolean表示 true 或者 false,如下代码所示。

let isLogin: boolean = true;
let hasMoney: boolean = false;

静态类型检测

在编译时期,静态类型的编程语言即可准确地发现类型错误,这就是静态类型检测的优势。

在编译时,TypeScript 编译器将通过对比检测变量接收值的类型与我们显示注解的类型,从而检测类型是否存在错误。

  • 如果两个类型完全一致,显示检测通过;
  • 如果两个类型不一致,它就会抛出一个编译期错误,告知我们编码错误,具体示例如下代码所示:
    const age: number = 23;
    const age2: number = "23"; // ts(2322) Type 'string' is not assignable to type 'number'.

小结

这一讲通过与 JavaScript 的基础类型进行对比,我们得知:TypeScript 其实就是添加了类型的 JavaScript,它并没有任何颠覆性的变动 所以,学习 typescript 并不是一件难事

评论区

索引目录