typescript基础(一)（代码编译/数据类型/变量）

gexzygg
276 阅读4分钟

官方文档:www.typescriptlang.org/docs/.

JavaScript是一种若类型语言,无法支撑大型项目的运行;而typescript是一种强类型的语言,可以支撑大型项目开发和维护。

TypeScript通过在JavaScript的基础上添加静态类型定义构建而成，可以编译为 JavaScript代码来执行。它最大特点是强大的类型系统和对ES6规范的支持，TypeScript托管于GitHub上面。

特点：

  • 类型系统：类型注解、编译时类型检查、类型推断和类型擦除
  • 接口
  • 枚举
  • Mixin
  • 泛型编程
  • 命名空间

从 ECMA 6规范中移植而来的：

  • 类
  • 模块
  • lambda 函数的箭头语法
  • 可选参数以及默认参数
  • 元组【事实上就是js里面的数组来的，只是typescript提供了不同的玩法而已，和python里面的元祖不是一回事】
  • await / async

TypeScript属于Javascript 的超集，扩展了Javascript的语法，现有的Javascript代码可以不经任何改动的情况下在TypeScript环境下运行。同时TypeScript代码，可以通过typescript的编译器转换为纯正的 JavaScript代码，且编译出来的 JavaScript代码能够运行在任何浏览器上。TypeScript 的编译工具也可以运行在任何服务器和任何系统上。typeScript文件的后缀为.ts。

代码编译

main.ts

function main(person) {
    return "Hello, " + person;
}

var user = "Jane User";

document.body.textContent = main(user);

终端： tsc main.ts

编译后代码：main.js

function main(person) {
    return "Hello, " + person;
}
var user = "Jane User";
document.body.textContent = main(user);

数据类型

数据类型关键字描述
任意类型any如果不声明类型，默认则声明为 any 的变量可以赋予任意类型的值。
数值类型number等同于JavaScript的number类型，在TypeScript中所有的数字都是浮点数，都是number类型。
let num1: number = 0b1010; // 二进制
let num2: number = 0o744; // 八进制
let num3: number = 6; // 十进制
let num4: number = 0xf00d; // 十六进制
**注意：**TypeScript 和 JavaScript 都是没有整型的。
字符串类型string一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号来定义多行文本和内嵌表达式。
let name: string = "xiaoming";
let qq_number: string= '50000000';
let text: string = `您好，我叫 ${ name } ，我的QQ号码是${qq_number} `;
布尔类型boolean只有2个值：true 和 false。
let sex: boolean = true;
数组类型无声明变量为数组。
let arr: number[] = [1, 2]; // 在元素类型后面加上[]
let arr: Array<number> = [1, 2]; // 数组泛型
元组无元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。元祖在原生js中本身是支持的。
let x: [string, number];
x = ['xiaoming', 16]; // 运行正常
x = [16, 'xiaoming']; // 报错
console.log(x[0]); // 输出 xiaoming
枚举enum枚举类型用于定义数值集合。
enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c); // 输出 2
voidvoid用于标识方法返回值的类型，表示该方法没有返回值。
function hello(): void {
alert("Hello xiaoming");
}
nullnull空。
undefinedundefined未定义
nevernevernever 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

新增类型： 联合类型： var 变量 = 类型1｜类型2｜类型3.。。。；

变量

变量的声明

  1. 方法1 指定数据类型
var 变量名:类型 = 值;
  1. 方法2 不指定数据类型
var 变量名 = 值; // var 变量名:any = 值;
  1. 方法3 预设变量并指定类型
var 变量名:类型;
  1. 方法 指定类型和值，默认类型为any, 默认值为 undefined
var 变量名;

如果定义了数据类型。更新变量时，如果不满足类型要求会报错

var username:string = "hello world";
username = "xiaoming";
username = 123;  // error TS2322: Type 'number' is not assignable to type 'string'.
console.log(username);

变量的作用域

  • 全局作用域 定义在程序结构的外部，可以在代码的任何位置使用
  • 类作用域 也称为属性或者字段 基本生命在类里的头部位置，不但可以在类的方法里面进行调用，也可以在类的方法来面调用，该变量可以勇敢类名来访问。

类变量也可以是静态变量，静态变量可以通过类名直接访问。

  • 局部作用域 只能在声明她的一个代码块中使用
avatar
文章
阅读
粉丝