Typescript学习笔记
参考:https://www.tslang.cn/docs/handbook/basic-types.html
准备:
1.IDE::VSCode
2.安装:首先安装node.js,然后cmd中使用如下命令全局安装。
npm install -g typescript |
然后使用tsc -v命令查看安装版本。
快速入门:
1.新建目录,然后cmd进入该目录,执行code .启动vscode。
2.新建ts文件:greeter.ts。
class Student { fullName: string; constructor(public firstName, public middleInitial, public lastName) { this.fullName = firstName + " " + middleInitial + " " + lastName; } }
interface Person { firstName: string; lastName: string; }
function greeter(person : Person) { return "Hello, " + person.firstName + " " + person.lastName; }
var user = new Student("Jane", "M.", "User"); document.body.innerHTML = greeter(user); |
3.在VSCode中使用ctr+`打开终端,使用命令:tsc greeter.ts编译ts代码为Javascript代码。
4.新建index.html引用greeter.js。然后在浏览器中打开即可。
<!DOCTYPE html> <html> <head> <titile>Hello Typescript.</titile> </head> <body> <script src="greeter.js"></script> </body> </html> |
5.项目根目录添加tsc编译配置。
{ "compilerOptions": { "target": "es5", "noImplicitAny": false, "module": "commonjs", "removeComments": true, "sourceMap": true, "outDir": "js" }, "include":[ "./**/*" ], "exclude": [ "./**/*.js" ] } //target:编译之后生成的JavaScript文件需要遵循的标准。有三个候选项:es3、es5、es2015。 //noImplicitAny:为false时,如果编译器无法根据变量的使用来判断类型时,将用any类型代替。为true时,将进行强类型检查,无法推断类型时,提示错误。 //module:遵循的JavaScript模块规范。主要的候选项有:commonjs、AMD和es2015。为了后面与node.js保持一致,我们这里选用commonjs。 //removeComments:编译生成的JavaScript文件是否移除注释。 //sourceMap:编译时是否生成对应的source map文件。这个文件主要用于前端调试。当前端js文件被压缩引用后,出错时可借助同名的source map文件查找源文件中错误位置。 //outDir:编译输出JavaScript文件存放的文件夹。 //include、exclude:编译时需要包含/剔除的文件夹。 |
6.添加vs项目配置:项目根目录新建.vscode目录,添加task.json如下:
{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "0.1.0", "command": "tsc", "isShellCommand": true, "args": ["-p", "."], "showOutput": "always", "problemMatcher": "$tsc" } |
然后使用ctr+shift+b启动编译,可以看见js文件产生到了js目录下。
7.点击F5启动编译,选择环境为Node.js。vscode会提示你创建launch.json,指定启动入口文件的路径如下:
{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", ${workspaceRoot}/js/greeter.js "outFiles": [ "${workspaceRoot}/out/**/*.js" ] } ] } |
再次点击F5启动编译,在【调试控制台】中查看调试信息。
PS:由于之前选择的是Node.js环境,因此调试到document.body.innerHTML = greeter(user);会报错document找不到,因为document是前台的元素。
1基本类型
//布尔值boolean let isDone:boolean = false;
//数字number:hex-0x,oct-0o,bin-0b let decLiteral:number = 6;
//字符串strin let str:string = "Hello World.";
//数组[]/Array let list:number[] = [1,3,5]; let list1:Array<number> = [1,3,5];
//元组Tuple:已知元素类型和数量的数组,并非不能修改 let x:[string,number,number]; x = ['a',100,200]; console.log(x[0]); console.log(x[1]); console.log(x[2]);
//枚举enum,默认从0开始 enum Color {Red, Blue, Green} let c:Color = Color.Red;
//Any用于不使用类型检查器进行编译阶段的检查,可以调用任意方法 let notSure:any = true; notSure = 4; notSure.ifItExists();
//Object允许赋任意值,但是不能像any那样调用任意方法 let obj:Object = 5; obj = true; //obj.ifItExists();
//void没有任何类型,与Any对应,void类型还能赋值为null和undefined let uu:void = null; uu = undefined;
//null和undefinde也是类型,而且是任何类型的子类型,可以赋值给任何类型 let nu:number = 4; nu = null; nu = undefined;
//never类型表示永远不存在的类型
//类型断言 let sv:any = "I'm string."; let svl:number = (<string>sv).length; let svl1:number = (sv as string).length; |
未完待续...