TypeScript 学习笔记(一)---基本类型及变量声明
2018-03-21 15:31
906 查看
什么是TypeScript
TypeScript 是 JavaScript 的类型的超集,它可以编译成纯 JavaScript。编译出来的 JavaScript可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript的优缺点
优点性能有所提升(相对于js多了一个编译阶段,在此期间进行优化)
减少维护成本(因其代码所要求比较规范易懂)
缺点
增加学习成本(中文资料不多;且对于专业不是计算机相关的同学来说【class,interfacce,enums,generics】等需要理解)
增加开发成本(要多写类型定义;集成到项目构建中成本增加)
获取并使用TypeScript
一般来讲可以使用 npm 来获取:// npm install -g typescript
创建一个名为 greeter.ts 的文件
function greeter(person) { return "Hello, " + person; } let user = "Jane User"; document.body.innerHTML = greeter(user);
虽然后缀是 .ts但是其实完全是 js 的语法。
然后在命令行编译这个文件:
tsc greeter.ts
会在当前目录下生成一个名为 greeter.js 的文件。
使用gulp编译 typescript 文件
先在项目中安装所需要的东西:npm install --save-dev typescript gulp gulp-typescript
然后就在项目中引入相应的模块,选择需要编译的文件,编译后生成文件的地址(跟less差不多)
var gulp = require('gulp'); var ts = require('gulp-typescript'); gulp.task('tsc', function () { return gulp.src('src/**/*.ts') .pipe(ts({ option1:value1, option2:value2 })) .pipe(gulp.dest('dist/js')); });
TypeScript语法及特性
基本变量类型
Boolean:let isDone: Boolean = false;
Number:
let decimal: number = 6; // 10进制 let hex: number = 0xf00d; //16进制 let binary: number = 0b1010; //2进制 let octal: number = 0o744; //8进制
string:使用双引号 ( ” ) 或单引号 ( ’ ),但是在使用字符串模板的时候,只用单引号( ’ )
let fullName: string = `Bob Bobbington; let sentence: string = `Hello, my name is ${ fullName }'.//字符串模板,引用fullname 变量。使用单引号
arrary:数组类型在声明的时候需要写明数组内元素类型:
let list: number[] = [1, 2, 3]; // or let list: Array<number> = [1, 2, 3]; // Declare a tuple type let x: [string, number]; // Initialize it x = ["hello", 10]; // OK // Initialize it incorrectly x = [10, "hello"]; // Error
当一个数组在声明时设定了其中元素的类型,当超出已知设定的界限时,后面的元素可以是设定类型中的任意一种类型:
x[3] = "world"; // OK, 'string' can be assigned to 'string | number' console.log(x[5].toString()); // OK, 'string' and 'number' both have 'toString' x[6] = true; // Error, 'boolean' isn't 'string | number'
enums:
enum Color {Red, Green, Blue} let c: Color = Color.Green; //1
上例子中,默认的 color.green的值是0.也可以通过手动赋值的方式修改默认值,需要注意的是若修改其中的一个而后面的没有修改,则是按照 +1的方式递增;
enum Color {Red = 1, Green = 3, Blue} let c: Color = Color.Green; //3 let d: color = Color.Blue; //4
还可以通过相应的枚举值来获取相应的属性字段名称:
enum Color {Red = 1, Green, Blue} let colorName: string = Color[2]; //Green
Any:any 类型相当于Javascript中的 var 声明变量。也就是可以被赋值为任意类型的数据,任意修改。
let notSure: any = 4; notSure.ifItExists(); // ok,在编译时被声明为any的变量不会做类型检查。在运行时这个变量是有可能有ifItExists这个属性的。 notSure.toFixed(); // okay
void:通常用在函数声明时表明函数无返回。在声明变量时也可以使用,但是只能被赋值为null 或 undefined
null undefined:只能被赋值为null或undefined。同时也是任何其他类型的子类型,也就是任何其他类型可以被赋值为null,undefined.
never:这个类型表明一个变量的值永远不会出现(雾)
变量声明
varlet
const
var
跟JavaScript基本相同。let
算是JavaScript新的特性。- 一个使用 let 声明的变量在声明前无法访问(调用)
- 可以在块级作用域中访问,只要这个块级作用域时在变量声明后调用的。若这个块级作用域在声明前调用也是不行的。
function foo() { // okay to capture 'a' return a; } // illegal call 'foo' before 'a' is declared // runtimes should throw an error here foo(); let a = 4; foo(); //ok,now it is declared
typescript 中使用 let 声明变量后不可以重复声明,也不可以再使用var 再次声明。
const
const 声明的变量与let 基本相同,唯一区别在于不能修改。const numLivesForCat = 9; const kitty = { name: "Aurora", numLives: numLivesForCat, } // Error kitty = { name: "Danielle", numLives: numLivesForCat }; // all "okay" kitty.name = "Rory"; kitty.name = "Kitty"; kitty.name = "Cat"; kitty.numLives--;
在上述例子中把 “kitty” 再次赋值为一个对象时不可以的,而修改 “kitty”的属性的值则是可以的。因为kitty绑定的是一个对象的地址的值,把kitty赋值为另外一个对象相当于把另外这个对象的地址的值给kitty,也就是修改了kitty的值;而修改kitty的属性则是修改了这个地址内的数据,并没有改变kitty的值。
destructuring
具体可以参考阮一峰老师的es6入门:http://es6.ruanyifeng.com/#docs/destructuring相关文章推荐
- C++ Primer 学习笔记4 变量和基本类型 (变量初始化规则、声明和定义)
- Javascript学习笔记一基本数据类型与变量声明
- c++ Premier 学习笔记(unit2 变量和基本类型 -声明与定义
- 【Linux学习笔记】30:declare命令(声明/取消/查看变量类型)
- JavaScript学习笔记一 - 基本语法,数据类型、变量
- Kotlin学习笔记2 : 变量常量与基本数据类型
- C++ Primer 学习笔记_4_变量和基本类型(续1)
- TypeScript学习笔记之变量声明
- 《C++ Primer》学习笔记---第2章 变量和基本类型
- c++Primer学习笔记之六:变量和基本类型_2
- c++学习笔记之变量和基本类型(1)
- Python学习笔记之二 变量以及基本类型
- c++ Premier 学习笔记(unit2 变量和基本类型 -引用
- 【C++ Primer学习笔记】第2章:变量和基本类型
- TypeScript学习笔记之基本类型
- C++学习笔记一 变量与基本类型
- C++编程 学习笔记(二)变量和基本类型
- C程序设计语言(K&R)学习笔记--2.基本类型、常量、变量
- C++ Primer 学习笔记_5_变量和基本类型(续2)
- C++Primer 学习笔记 第二章(变量和基本数据类型)